feat(tree): improve screen reader support #102

wsuwt · 2021-11-30T14:55:23Z

Description

role=tree on tree element.
role=treeitem on tree-item element.
Adds aria-expanded to indicate expand/collapsed state of each tree-item
Adds aria-selected for single mode.
Adds aria-checked for multiple mode, to support tri-state i.e, true, false and mixed.
Adds aria-level which is depth+1 to each tree-item to indicate item depth.

Type of change

New feature (non-breaking change which adds functionality)

Checklist

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes
I have checked my code and corrected any misspellings

…bility/tree

cloudflare-workers-and-pages · 2021-12-07T07:51:46Z

Deploying with Cloudflare Pages

Latest commit:	`ea704b2`
Status:	✅ Deploy successful!
Preview URL:	https://2ba831bf.refinitiv-ui.pages.dev

View logs

…tate

wsuwt · 2021-12-08T13:13:22Z

@TremayneChrist and @goremikins Can you skim over this PR, it's not a lot of code but I'm not sure on some of the limitations on tree

Ability to toggle attribute on a treeitem between group and default mode, it would re-render to previous state on hover so I assume this is not supported and I did not add condition to remove aria-expanded when a parent changes to child node.

packages/elements/src/tree/elements/tree-item.ts

…i into accessibility/tree

packages/elements/src/tree/elements/tree-item.ts

packages/elements/src/tree/helpers/renderer.ts

packages/elements/src/tree/elements/tree-item.ts

* refactor(pagination): remove part info * feat(pagination): support max unknown * refactor(pagination): remove unused function `pageInfo` * refactor(pagination): handle input page selection * refactor(pagination): add state for check input is editing * refactor(pagination): request update element on blur * test(pagination): update transform text input selected test case * refactor(pagination): use state decorator to auto update the input * refactor(pagination): deprecate page, totalItems, page-changed (#78) * chore(pagination): add max attribute demo * test: fix test all fail when using setTimeout * refactor(pagination): update getter setter and internal value * chore(pagination): update demo page * refactor(pagination): update internal max and property change events * fix(pagination): max limit does not work * refactor(pagination): validate value is in supported range * refactor(pagination): add range value validation * refactor(pagination): add deprecation notice on getter * docs(pagination): remove type from jsdoc * test(pagination): update to support value, max properties * fix(pagination): getter in internal will retrigger incorrect warning message * refactor(pagination): reset input behavior for end users * refactor(pagination): reset input behavior for developers * test(pagination): refactor unit test * refactor(pagination): refactor innternal value and warning message * refactor(pagination): remove unnecessary blur input * test(pagination): update test case to support value and max approach * refactor(pagination): use getter for toggle button state * test(pagination): refactor unit-test * chore(pagination): remove demo for testing * fix(pagination): tab on the input to set a value * fix(pagination): the input does not get disable state from the root * test(pagination): add test case interaction when page is over * test(pagination): fix typo * test(pagination): remove unexpected attribute in snapshot * refactor(pagination): cast type for text input * refactor(pagination): remove unused interface * chore(pagination): fix indent js doc incorrect * fix(pagination): remove warning when set correct type value * fix(pagiantion): convert prop toString in setter * fix(pagination): add missing feature blur to set page from the input * refactor(pagination): getter setter of max and page should be string * chore(release): publish [skip ci] - @refinitiv-ui/[email protected] * fix(halo-theme): fix backward compat with current import native-element path * fix(themes): ignore hover styles on mobile device (#129) Co-authored-by: Theeraphat-Sorasetsakul <[email protected]> * chore(release): publish [skip ci] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] * chore: add incremental to TypeScript compiler option for faster subsequent builds (#136) * chore: add `incremental` to TypeScript compiler option for faster subsequent builds * chore: update lock-file * ci: create `GitHub release` and curated CHANGELOG on release (#137) * chore(polyfills): remove exports and entrypoints (#141) * chore(polyfills): remove exports and entrypoints * chore(polyfills): change all.js to index.js Co-authored-by: Wasuwat Limsuparhat <[email protected]> * ci: use multiple stage pipeline for the test workflow (#140) * fix(pagination): handle case when user input number with string (#142) * fix: release script should not be publish to NPM (#144) * chore: add development mode to dev-server so that developers can see the warnings (#147) * chore: fix broken status badge (#154) * Chore/add framework integration samples (#153) * Chore/sample react app (#148) * docs: init react sample app * feat: add form handler * fix: change native styles import path * chore: change import path * test: revise test case * test: fix wrong expect value test case * test: change test case name * chore: fix intent and code styling * chore: change import path * chore: remove logo file * docs: init vanilla sample app (#152) * chore: sample angular app (#150) * docs: init angular sample app * chore: sample vue app Co-authored-by: Theeraphat-Sorasetsakul <[email protected]> Co-authored-by: Jidapa-Pai <[email protected]> Co-authored-by: Napat Bualoy <[email protected]> * fix(checkbox): `Enter` key should not check or uncheck checkbox * fix(radio-button): `Enter` key should not check or uncheck radio-button * test(checkbox): update `Enter` keypress test * test(radio-button): update `Enter` keypress test * chore(deps): bump postcss from 7.0.39 to 8.2.13 (#155) chore(deps): bump autoprefixer from 9.6.5 to 10.4.2 * feat: upgrade `lit` to 2.1.1 (#156) * fix(radio-button): add IE11 arrow keys navigation support (#158) * chore: revert web-server development mode (#162) * chore(release): publish [skip ci] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] * feat(tree): improve screen reader support (#102) * feat(list): improve screen reader * feat(list): add aria-multiselectable for screen reader * test(list): improve key control cases * test(tree): update snapshots for tree * feat(tree): add roles to tree and treee-item and add aria-expanded * fix: add more generic type to default role for extendibility * refactor: use setAttribute instead of overriding AOM properties * refactor: aria expanded and selected logics * feat: add aria level and setsize support * feat: remove asterick key support * feat: used aria-checked for multiple mode to indicate indeterminate state * chore: update lock file * refactor: simplify aria setting logics * feat: add generic type to treeitem defaulRole * fix: handles multiple mode changes * test(tree): update snapshots * refactor: reflect aria-selected according to selected state * refactor: move most of the aria setting logics to tree-item element * refactor: remove aria-setsize as it's no longer needed Co-authored-by: Jidapa-Pai <[email protected]> Co-authored-by: Jidapa-Pai <[email protected]> * fix(tree-select): remove unnecessary x-scrollbar on default styles (#166) * fix(checkbox): wrong cursor style when hover the end of checkbox label (#165) fix(checkbox): wrong cursor style when hover the end of checkbox label * Include ef documentation into monorepo (#146) * docs: include EF documentation into monorepo Co-authored-by: Sarin Udompanish <[email protected]> Co-authored-by: Napat Bualoy <[email protected]> Co-authored-by: Theeraphat Sorasetsakul <[email protected]> Co-authored-by: Jidapa-Pai <[email protected]> Co-authored-by: wsuwt <[email protected]> Co-authored-by: Wasuwat Limsuparhat <[email protected]> * docs: resize home page images appropriately (#169) * chore(release): publish [skip ci] (#171) - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] - @refinitiv-ui/[email protected] Co-authored-by: refinitiv-ui-dev <[email protected]> * feat(collapse): add accessibility support (#161) * Revert "feat(collapse): add accessibility support (#161)" (#179) This reverts commit 158f031. * chore(*): update package lock * refactor(*): move peers into peerDependencies (#178) * refactor(*): move peers into peerDependencies * chore(*): print npm version * chore(*): update package lock * fix(*): trial custom npm build * fix(*): build utils before core * chore(core): move utils to peerDependencies * chore(*): update release build commands * Add types versions (#183) * refactor(core): rename elf.ts to index.ts to ensure default importing refactor(utils): rename utils.ts to index.ts to ensure default importing refactor(core): simplify package exports to remove `lib` path support refactor(utils): simplify package exports to remove `lib` path support refactor(elements): simplify package exports to remove `lib` path support refactor(phrasebook): simplify package exports to remove `lib` path support * fix(*): be flexible with types versions Co-authored-by: Tremayne Christ <[email protected]> Co-authored-by: Aleksejs <[email protected]> * chore(*): use node 16.x in prerelease script * chore(*): test on prerelease branch * test(core): replace elf.js with index.js Co-authored-by: Sakchai Homhual <[email protected]> Co-authored-by: Theeraphat-Sorasetsakul <[email protected]> Co-authored-by: Theeraphat Sorasetsakul <[email protected]> Co-authored-by: Sakchai Homhual <[email protected]> Co-authored-by: refinitiv-ui-dev <[email protected]> Co-authored-by: Domrongpon Tanpaibul <[email protected]> Co-authored-by: dtanp <[email protected]> Co-authored-by: Sarin-Udompanish <[email protected]> Co-authored-by: Wasuwat Limsuparhat <[email protected]> Co-authored-by: Jidapa-Pai <[email protected]> Co-authored-by: Napat Bualoy <[email protected]> Co-authored-by: wsuwt <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Jidapa-Pai <[email protected]> Co-authored-by: Sarin Udompanish <[email protected]> Co-authored-by: Napat Bualoy <[email protected]> Co-authored-by: Aleksejs <[email protected]>

Jidapa-Pai and others added 10 commits November 23, 2021 18:21

feat(list): improve screen reader

409b40a

feat(list): add aria-multiselectable for screen reader

7c0b5d5

test(list): improve key control cases

42642d2

test(tree): update snapshots for tree

41def04

Merge branch 'develop' into accessibility/list

e503ca1

feat(tree): add roles to tree and treee-item and add aria-expanded

679a550

Merge remote-tracking branch 'origin/accessibility/list' into accessi…

a40080a

…bility/tree

fix: add more generic type to default role for extendibility

035d4c4

Merge branch 'develop' into accessibility/list

61be64b

Merge remote-tracking branch 'origin/accessibility/list' into accessi…

3dcb321

…bility/tree

wsuwt changed the title ~~Accessibility/tree~~ feat(tree): improve screen reader support Nov 30, 2021

phetw added 4 commits December 1, 2021 14:48

refactor: use setAttribute instead of overriding AOM properties

6cdc4aa

refactor: aria expanded and selected logics

7898ed6

Merge remote-tracking branch 'origin/develop' into accessibility/tree

c55afab

feat: add aria level and setsize support

ea704b2

phetw added 2 commits December 7, 2021 17:18

feat: remove asterick key support

6f1d279

feat: used aria-checked for multiple mode to indicate indeterminate s…

86b5838

…tate

wsuwt added the accessibility Accessibility improvement label Dec 7, 2021

wsuwt and others added 4 commits December 7, 2021 19:51

Merge branch 'develop' into accessibility/tree

00e7114

chore: update lock file

51d2a37

refactor: simplify aria setting logics

cca053f

feat: add generic type to treeitem defaulRole

6f39f73

wsuwt requested review from goremikins and TremayneChrist December 8, 2021 12:59

wsuwt self-assigned this Dec 8, 2021

TremayneChrist reviewed Dec 8, 2021

View reviewed changes

packages/elements/src/tree/elements/tree-item.ts Outdated Show resolved Hide resolved

TremayneChrist reviewed Dec 8, 2021

View reviewed changes

packages/elements/src/tree/elements/tree-item.ts Outdated Show resolved Hide resolved

fix: handles multiple mode changes

6aec07c

Jidapa-Pai added 2 commits December 9, 2021 13:06

test(tree): update snapshots

f4721e6

Merge branch 'accessibility/tree' of github.com:Refinitiv/refinitiv-u…

3aa7cac

…i into accessibility/tree

wsuwt marked this pull request as ready for review December 9, 2021 06:52

TremayneChrist reviewed Dec 9, 2021

View reviewed changes

packages/elements/src/tree/elements/tree-item.ts Outdated Show resolved Hide resolved

TremayneChrist reviewed Dec 9, 2021

View reviewed changes

packages/elements/src/tree/elements/tree-item.ts Outdated Show resolved Hide resolved

phetw and others added 2 commits December 13, 2021 10:26

refactor: reflect aria-selected according to selected state

9844d88

Merge branch 'develop' into accessibility/tree

44ca8d9

wsuwt requested a review from TremayneChrist December 14, 2021 07:50

wsuwt added 2 commits December 15, 2021 12:17

Merge branch 'develop' into accessibility/tree

18c8bf8

Merge branch 'develop' into accessibility/tree

5531634

TremayneChrist reviewed Dec 15, 2021

View reviewed changes

packages/elements/src/tree/helpers/renderer.ts Outdated Show resolved Hide resolved

TremayneChrist reviewed Dec 15, 2021

View reviewed changes

packages/elements/src/tree/elements/tree-item.ts Outdated Show resolved Hide resolved

wsuwt and others added 7 commits December 15, 2021 18:13

Merge branch 'develop' into accessibility/tree

9d0b2be

refactor: move most of the aria setting logics to tree-item element

5cab00f

Merge branch 'develop' into accessibility/tree

05b2760

Merge branch 'develop' into accessibility/tree

c911c82

Merge branch 'develop' into accessibility/tree

6e9cb09

Merge branch 'develop' into accessibility/tree

a59379d

refactor: remove aria-setsize as it's no longer needed

f1a86e1

TremayneChrist approved these changes Jan 11, 2022

View reviewed changes

Merge branch 'develop' into accessibility/tree

2468ab3

wsuwt merged commit 0d6db3b into develop Jan 12, 2022

wsuwt deleted the accessibility/tree branch January 12, 2022 10:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tree): improve screen reader support #102

feat(tree): improve screen reader support #102

wsuwt commented Nov 30, 2021 •

edited

Loading

cloudflare-workers-and-pages bot commented Dec 7, 2021 •

edited

Loading

wsuwt commented Dec 8, 2021 •

edited

Loading

feat(tree): improve screen reader support #102

feat(tree): improve screen reader support #102

Conversation

wsuwt commented Nov 30, 2021 • edited Loading

Description

Type of change

Checklist

cloudflare-workers-and-pages bot commented Dec 7, 2021 • edited Loading

Deploying with Cloudflare Pages

wsuwt commented Dec 8, 2021 • edited Loading

wsuwt commented Nov 30, 2021 •

edited

Loading

cloudflare-workers-and-pages bot commented Dec 7, 2021 •

edited

Loading

wsuwt commented Dec 8, 2021 •

edited

Loading