feat(flyout-menu): accessibility improvements for flyout menu component

d-rita commented 5 months ago

Description

This feature improves the accessibility of the flyout menu component

A user can close the flyout menu by pressing the Escape key
By pressing the Right Arrow key on a focused menu item containing a submenu, a flyout menu is opened and focus is placed on the 1st item.
By pressing the Left Arrow key on any focused item inside a submenu, it will close and focus the parent menu item if any.

Checklist

[ ] API docs are generated
[x] Tests were added
[ ] Storybook demos were added

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

dhis2-bot commented 5 months ago

🚀 Deployed on https://pr-1495--dhis2-ui.netlify.app

cypress[bot] commented 5 months ago

Passing run #3355 ↗︎

0

584

0

Details:

feat: flyout accessibility improvements
Project: ui	Commit: `0675f993c2`
Status: Passed	Duration: 06:42 💡
Started: May 6, 2024 6:38 AM	Ended: May 6, 2024 6:45 AM

Review all test suite changes for PR #1495 ↗︎

alaa-yahia commented 3 months ago

Hi @d-rita I've tested the Flyout menu in the aggregate data entry app. However, I wasn't able to move from the DropdownButton to the Flyout menu as demonstrated in the screen recording. Is this functionality outside the scope of this Flyout menu accessibility pull request? Here is the code for options dropdownButton in aggregate data entry app. Screen recording: https://github.com/user-attachments/assets/f4c19f5c-654e-49fa-90c8-9112a529f1f3

d-rita commented 3 months ago

I've tested the Flyout menu in the aggregate data entry app. However, I wasn't able to move from the DropdownButton to the Flyout menu as demonstrated in the screen recording. Is this functionality outside the scope of this Flyout menu accessibility pull request? Here is the code for options dropdownButton in aggregate data entry app. Screen recording: https://github.com/user-attachments/assets/f4c19f5c-654e-49fa-90c8-9112a529f1f3

In order to reproduce this, I have tested with one of the DropDownButton storybook examples with a somewhat similar implementation, i.e. the WithMenu example. Then I also tested with the aggregate data entry app Options component implementation from above on a test branch

WithMenu storybook example: The first menu item receives focus immediately the menu is rendered

https://github.com/user-attachments/assets/af1febeb-4b26-4cb1-83b7-b65a660d4fa8

Data entry app's Options component (as is): Code implementation found here. Only the child items within the menu that are not conditionally rendered as a group receive focus, i.e. the last one

https://github.com/user-attachments/assets/e926bd45-0be0-4fa8-b0fa-53afc3276b0b

Data entry app's Options component (after modification): Code implementation found here The modification was to conditionally render each child item instead of all of them wrapped in a fragment. Outcome: all menu items are able to receive the tabIndex attribute, and hence be focused as needed.

https://github.com/user-attachments/assets/b2cd3753-ca53-4c90-abb0-23defb16343a

Conclusion:

Most likely, the implementation in the data entry app will need an update to allow for navigation with a keyboard.
Ideally, this PR only handles the FlyoutMenu component hence updates to the DropDownButton regarding the menu (for example, passing the closeMenu prop which is a function to close the flyout with the Esc key will be handled in another PR) cc: @Chisomchima

dhis2-bot commented 2 months ago

:tada: This PR is included in version 9.11.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

dhis2 / ui