Closed d-rita closed 2 months ago
🚀 Deployed on https://pr-1495--dhis2-ui.netlify.app
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 |
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
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 renderedhttps://github.com/user-attachments/assets/af1febeb-4b26-4cb1-83b7-b65a660d4fa8
https://github.com/user-attachments/assets/e926bd45-0be0-4fa8-b0fa-53afc3276b0b
https://github.com/user-attachments/assets/b2cd3753-ca53-4c90-abb0-23defb16343a
Conclusion:
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:tada: This PR is included in version 9.11.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
Implements LIBS-563
Description
This feature improves the accessibility of the flyout menu component
Escape
keyRight Arrow
key on a focused menu item containing a submenu, a flyout menu is opened and focus is placed on the 1st item.Left Arrow
key 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