feat(flyout-menu): accessibility improvements for flyout menu component #1495
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
🚀 Deployed on https://pr-1495--dhis2-ui.netlify.app |
Passing run #3355 ↗︎
Details:
Review all test suite changes for PR #1495 ↗︎ |
|||||||||||||||
d-rita
force-pushed
the
LIBS-563/flyout-menu-accessibility
branch
from
0675f99 to
0342c0c
Compare
d-rita
force-pushed
the
LIBS-563/flyout-menu-accessibility
branch
from
0342c0c to
de7d976
Compare
d-rita
force-pushed
the
LIBS-563/flyout-menu-accessibility
branch
from
de7d976 to
94f69df
Compare
d-rita
force-pushed
the
LIBS-563/flyout-menu-accessibility
branch
from
d14f666 to
f31fd08
Compare
d-rita
force-pushed
the
LIBS-563/flyout-menu-accessibility
branch
from
841d270 to
3a6e749
Compare
d-rita
force-pushed
the
LIBS-563/flyout-menu-accessibility
branch
from
3a6e749 to
51a0207
Compare
d-rita
force-pushed
the
LIBS-563/flyout-menu-accessibility
branch
from
51a0207 to
b930acb
Compare
d-rita
force-pushed
the
LIBS-563/flyout-menu-accessibility
branch
from
b930acb to
9c66c4d
Compare
|
Hi @d-rita |
In order to reproduce this, I have tested with one of the
with.menu.mov
options.menu.mov
modified.options.menu.movConclusion:
|
alaa-yahia
approved these changes
Jul 16, 2024
There was a problem hiding this comment.
Thank you for investigating the root cause @d-rita. Nice digging!
I am approving the pr based on your conclusions.
- focus the popper's first child element when it is rendered - move focus to flyout menu's first child, i.e. the menu when it receives focus - the Right arrow key opens the submenu, Left arrow key closes submenu and focuses its parent item - close flyout menu with the Escape key by passing it a closeMenu function as a prop - add unit tests simulating opening and closing of submenus
d-rita
force-pushed
the
LIBS-563/flyout-menu-accessibility
branch
from
9c66c4d to
a58b27f
Compare
dhis2-bot
added a commit
that referenced
this pull request
Jul 29, 2024
# [9.11.0](v9.10.3...v9.11.0) (2024-07-29) ### Features * implement accessible flyout menu and handle submenus ([#1495](#1495)) ([73d1f7e](73d1f7e))
kabaros
added a commit
that referenced
this pull request
Aug 26, 2024
* chore: update modal accessibility and translation chore: remove unnecessary files in PR chore: update modal accessibility and translation * fix: add aggregate data exchange to sharing dialog type prop's type * fix: add all possible sharing dialog type prop's types * fix: restrict dialog types to only sharable and restrict type of sharing type * fix(translations): sync translations from transifex (master) Automatically merged. * chore(release): cut 9.8.2 [skip release] ## [9.8.2](v9.8.1...v9.8.2) (2024-06-14) ### Bug Fixes * **translations:** sync translations from transifex (master) ([0dfb475](0dfb475)) * fix(translations): sync translations from transifex (master) Automatically merged. * chore(release): cut 9.8.3 [skip release] ## [9.8.3](v9.8.2...v9.8.3) (2024-06-16) ### Bug Fixes * **translations:** sync translations from transifex (master) ([5f7f65a](5f7f65a)) * fix(modal): dont swallow keyDown events * fix(drop-down): dont swallow keyDown events unless its esc and open (#1529) * chore(release): cut 9.8.4 [skip release] ## [9.8.4](v9.8.3...v9.8.4) (2024-06-19) ### Bug Fixes * **drop-down:** dont swallow keyDown events unless its esc and open ([#1529](#1529)) ([bdb8eff](bdb8eff)) * chore(release): cut 9.8.5 [skip release] ## [9.8.5](v9.8.4...v9.8.5) (2024-06-19) ### Bug Fixes * **modal:** dont swallow keyDown events ([d4a0c44](d4a0c44)) * chore(release): cut 9.8.6 [skip release] ## [9.8.6](v9.8.5...v9.8.6) (2024-06-20) ### Bug Fixes * add aggregate data exchange to sharing dialog type prop's type ([d3b5486](d3b5486)) * add all possible sharing dialog type prop's types ([43210cb](43210cb)) * restrict dialog types to only sharable and restrict type of sharing type ([1748809](1748809)) * fix(split-button): stop swallowing key down events * chore(release): cut 9.8.7 [skip release] ## [9.8.7](v9.8.6...v9.8.7) (2024-06-20) ### Bug Fixes * **split-button:** stop swallowing key down events ([22d43bc](22d43bc)) * fix: i18n wrap pick a date (#1531) * chore(release): cut 9.8.8 [skip release] ## [9.8.8](v9.8.7...v9.8.8) (2024-06-20) ### Bug Fixes * i18n wrap pick a date ([#1531](#1531)) ([4e4a43d](4e4a43d)) * fix: update @dhis2/multi-calendar-dates (#1525) * chore(release): cut 9.8.9 [skip release] ## [9.8.9](v9.8.8...v9.8.9) (2024-06-20) ### Bug Fixes * update @dhis2/multi-calendar-dates ([#1525](#1525)) ([cf5d39d](cf5d39d)) * fix(LIBS-629): bump library to use Nepali script when 'ne' locale passed * chore(release): cut 9.8.10 [skip release] ## [9.8.10](v9.8.9...v9.8.10) (2024-07-01) ### Bug Fixes * **LIBS-629:** bump library to use Nepali script when 'ne' locale passed ([6546572](6546572)) * feat(menu): add aria-attributes and roles to menu and its components (#1514) * feat: add relevant aria-attributes and roles to menu and its child components * fix: update role to menuitem in sharing-dialog-autocomplete test * feat(menu): add keyboard accessibility to menus (#1533) * feat: add support for keyboard navigation and action - Navigate menu items using Up and Down arrow keys - Space and Enter keys trigger the onClick handler attached to the menu items - Extract navigation and action logic into custom useMenuNavigation hook - Handle visual focus of menu items by tracking only the focusable items - Pass only native props to the native child elements, i.e. tabIndex - Implement tests simulating keyboard interactions * feat: ensure all menu children are li elements - wrap non-li children in li tags for consistency - assign tabIndex for visual focus to children with menuitem role - add active CSS class to focused MenuItem component - modify tests * fix: conditional focus and navigation of menu - apply focus and keyboard navigation within the menu iff it contains focusable items * fix: add suffix to MenuItemProps * chore(release): cut 9.9.0 [skip release] # [9.9.0](v9.8.10...v9.9.0) (2024-07-02) ### Features * **menu:** add aria-attributes and roles to menu and its components ([#1514](#1514)) ([54b816c](54b816c)) * **menu:** add keyboard accessibility to menus ([#1533](#1533)) ([235a71e](235a71e)) * fix(translations): sync translations from transifex (master) (#1532) * chore(release): cut 9.9.1 [skip release] ## [9.9.1](v9.9.0...v9.9.1) (2024-07-02) ### Bug Fixes * **translations:** sync translations from transifex (master) ([#1532](#1532)) ([bb15173](bb15173)) * feat(TabBar): accessibility improvements for TabBar & Tab (#1468) * feat(TabBar): accessibility improvements for TabBar & Tab * feat: make Tabs a composite component * fix: failing tests * docs: improve documentation for CalendarInput callback function usage (#1538) * feat(menu): memoise menu's childrenToRender function and add valid role checks (#1539) * feat: optimise menu and add valid role checks - memoise menu's childrenToRender function - add comments explaining menu child checks and the props passed to them - avoid passing custom props to native HTML elements - move separator role to the divider component - check if role exists on menu children and log a console warning if not - update tests * fix(lint): lint issue in master --------- Co-authored-by: Mozafar Haider <[email protected]> * chore(release): cut 9.10.0 [skip release] # [9.10.0](v9.9.1...v9.10.0) (2024-07-03) ### Features * **menu:** memoise menu's childrenToRender function and add valid role checks ([#1539](#1539)) ([bddbdae](bddbdae)) * **TabBar:** accessibility improvements for TabBar & Tab ([#1468](#1468)) ([b095f5a](b095f5a)) * fix: do not hijack input when inside a menu (#1551) * fix(selectorbar): handle components other than SelectorBarItem correctly as children (#1534) * chore(release): cut 9.10.1 [skip release] ## [9.10.1](v9.10.0...v9.10.1) (2024-07-04) ### Bug Fixes * **selectorbar:** handle components other than SelectorBarItem correctly as children ([#1534](#1534)) ([7c78ac7](7c78ac7)) * do not hijack input when inside a menu ([#1551](#1551)) ([7a27d3d](7a27d3d)) * refactor(storybook): replace "storiesOf" with new api * refactor(testing story filenames): rename stories.e2e to e2e.stories * chore(prod story filenames): change file extension from stories.js to prod.stories.js * fix(calendar): pin temporal dependency to version 0.4.3 due to breaking changes * chore(workspace package json): use new storybook start command * chore(storybook): active working plugins * chore(storybook): restore proper output & use static directory * chore: adjust react-dependency to prevent "wrong hook usage" error * chore: fix imports from story to story files * chore: fix final-form re-export snapshot tests * chore: fix import in calendar input e2e story * chore: fix linter issues * chore: remove legacy scripts and GH workflow bandaids * chore(headerbar profile): fix wrongly resolved merge conflict post-rebase * chore: fix tooltip story * chore(cypress): fix intersection detector tests * chore: fix most cypress tests * chore: fix linter issues * refactor: fix circular dependencies * refactor: add missing file extensions in import statements * chore(headerbar online test): wait for story to render before proceeding * chore(storybook): upgrade react & react-dom to ^18 * fix: get storybook 8 working * fix: get rid of storybook references in docs * chore(menu item cypress test): fix selectors * fix(icon types): export IconSubtract16 & IconSubtract24 * fix(menu item types): make suffix prop optional * fix(modal types): accept ReactNodes as children * fix(tag types): accept ReactNodes as children * chore(release): cut 9.10.2 [skip release] ## [9.10.2](v9.10.1...v9.10.2) (2024-07-15) ### Bug Fixes * **icon types:** export IconSubtract16 & IconSubtract24 ([5237c66](5237c66)) * **menu item types:** make suffix prop optional ([c059fde](c059fde)) * **modal types:** accept ReactNodes as children ([bc59cf7](bc59cf7)) * **tag types:** accept ReactNodes as children ([c093a14](c093a14)) * chore: make build script work again * fix(translations): sync translations from transifex (master) Automatically merged. * chore(release): cut 9.10.3 [skip release] ## [9.10.3](v9.10.2...v9.10.3) (2024-07-24) ### Bug Fixes * **translations:** sync translations from transifex (master) ([b7d3ec6](b7d3ec6)) * feat: implement accessible flyout menu and handle submenus (#1495) - focus the popper's first child element when it is rendered - move focus to flyout menu's first child, i.e. the menu when it receives focus - the Right arrow key opens the submenu, Left arrow key closes submenu and focuses its parent item - close flyout menu with the Escape key by passing it a closeMenu function as a prop - add unit tests simulating opening and closing of submenus * chore(release): cut 9.11.0 [skip release] # [9.11.0](v9.10.3...v9.11.0) (2024-07-29) ### Features * implement accessible flyout menu and handle submenus ([#1495](#1495)) ([73d1f7e](73d1f7e)) * fix: issue with production build not loading some dependent modules * chore(package json): remove superfluous resolutions (react & temporal) * fix: resolve react version (#1567) * fix: resolve react version * fix: update yarn.lock again to test the build passes on CI --------- Co-authored-by: Flaminia Cavallo <[email protected]> Co-authored-by: Mozafar Haider <[email protected]> * fix: pin react version in resolution (#1573) * fix: fix publishing to npm (#1577) * chore(release): cut 9.11.1 [skip release] ## [9.11.1](v9.11.0...v9.11.1) (2024-08-08) ### Bug Fixes * fix publishing to npm ([#1577](#1577)) ([1889a7b](1889a7b)) * get rid of storybook references in docs ([1904b17](1904b17)) * get storybook 8 working ([8c6be62](8c6be62)) * issue with production build not loading some dependent modules ([5060c61](5060c61)) * pin react version in resolution ([#1573](#1573)) ([46cdd79](46cdd79)) * resolve react version ([#1567](#1567)) ([c18a73d](c18a73d)) * **calendar:** pin temporal dependency to version 0.4.3 due to breaking changes ([3b5a586](3b5a586)) * fix(translations): sync translations from transifex (master) Automatically merged. * fix(translations): sync translations from transifex (master) Automatically merged. * chore(release): cut 9.11.2 [skip release] ## [9.11.2](v9.11.1...v9.11.2) (2024-08-18) ### Bug Fixes * **translations:** sync translations from transifex (master) ([2f82be2](2f82be2)) * **translations:** sync translations from transifex (master) ([e8b0559](e8b0559)) * fix: select-field not showing in correct place (#1400) * chore(release): cut 9.11.3 [skip release] ## [9.11.3](v9.11.2...v9.11.3) (2024-08-21) ### Bug Fixes * select-field not showing in correct place ([#1400](#1400)) ([d97d640](d97d640)) * docs: update css variables info (#1584) --------- Co-authored-by: chisom chima <[email protected]> Co-authored-by: Flaminia Cavallo <[email protected]> Co-authored-by: @dhis2-bot <[email protected]> Co-authored-by: Birk Johansson <[email protected]> Co-authored-by: Chisom Chima <[email protected]> Co-authored-by: Flaminia <[email protected]> Co-authored-by: Thomas Zemp <[email protected]> Co-authored-by: Diana Nanyanzi <[email protected]> Co-authored-by: Alaa Yahia <[email protected]> Co-authored-by: Redet Getachew <[email protected]> Co-authored-by: Mohammer5 <[email protected]> Co-authored-by: Jan-Gerke Salomon <[email protected]> Co-authored-by: Flaminia Cavallo <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Implements LIBS-563
Description
This feature improves the accessibility of the flyout menu component
EscapekeyRight Arrowkey on a focused menu item containing a submenu, a flyout menu is opened and focus is placed on the 1st item.Left Arrowkey on any focused item inside a submenu, it will close and focus the parent menu item if any.Checklist
All points above should be relevant for feature PRs. For bugfixes, some points might not be relevant. In that case, just check them anyway to signal the work is done.
Screenshots
supporting text