feat(menu): add keyboard accessibility to menus

dhis2 / ui

Components and related resources for the DHIS2 design system

https://ui.dhis2.nu

BSD 3-Clause "New" or "Revised" License

40 stars 15 forks source link

feat(menu): add keyboard accessibility to menus #1533

Closed d-rita closed 3 months ago

d-rita commented 4 months ago

Implements LIBS-623

Description

This feature handles keyboard accessibility of the menu and its children components in the following ways:

[x] A user can use the Up and Down arrow keys to navigate a list of menu items by moving focus between them.
[x] A user can use the Space or Enter key to trigger actionable menu items, e.g toggle, open link, act like a button, and open a submenu.

Checklist

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

dhis2-bot commented 4 months ago

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

flaminic commented 3 months ago

Thanks @d-rita . Looks good to me. I only have some minor comments above

d-rita commented 3 months ago

There definitely was a bit more to this task. 😅 Thank you for the review @flaminic and @kabaros. 🎉

as discussed privately, it'd be good to:

memoise childrenToRender to make sure we're not recalculating it unnecessarily

add some comments for the reasons for the extra checks (handling warning when passing regular html etc...)

but this can be done in the subsequent PR

I have implemented this feedback in this PR. I have also added the menu children role checks and warning if none is provided as was discussed.

dhis2-bot commented 3 months ago

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

The release is available on:

Your semantic-release bot :package::rocket: