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

[d-rita]

Implements LIBS-563

---

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
• 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]

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

[cypress]

Passing run #3355 ↗︎

0

584

0

0

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]

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]

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

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

with.menu.mov

2. 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

options.menu.mov

3. 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.

modified.options.menu.mov

Conclusion:

1. Most likely, the implementation in the data entry app will need an update to allow for navigation with a keyboard.
2. 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

[alaa-yahia]

Thank you for investigating the root cause @d-rita. Nice digging!
I am approving the pr based on your conclusions.