sparksuite / react-accessible-dropdown-menu-hook

A simple Hook for creating fully accessible dropdown menus in React
http://sparksuite.github.io/react-accessible-dropdown-menu-hook
MIT License
112 stars 26 forks source link

Support tabbing inside the menu #273

Closed rafalradomski closed 3 years ago

rafalradomski commented 3 years ago

First of all, congrats guys, it's a great lib.

I currently building the mega menu, and your lib works great only missing tabbing feature to me.

Currently, you can navigate between menu items only with UP and DOWN keys,

Is it's possible to use somehow tabbing when the focus is in the menu?

Something like here: https://adobe-accessibility.github.io/Accessible-Mega-Menu

corymharper commented 3 years ago

Hi @rafalradomski ,

Thank you for checking out our package, I'm glad you like it! Towards your question, on the page you link towards, I'll reference a quote there:

The accessible mega menu models its use of WAI-ARIA Roles, States, and Properties after those described in the WAI-ARIA Menu or Menu bar (widget) design pattern with some notable exceptions, so that it behaves better with screen reader user expectations for global navigation. We don't use role="menu" for the menu container and role="menuitem" for each of the links therein

Our hook strictly follows exactly the practices they're linking to, without any exceptions, those practices can be seen here. Following those practices makes the design you're looking to implement more or less impossible, as the tab button is strictly to transfer focus to the next item that would have been in the tab order, usually also meaning the menu is closed. Lastly, in the context of a container give the role menu the left and the right arrow keys having functionality of any kind doesn't work out from an accessibility standpoint, because the aria-orientation of a container with that role is vertical.

Currently our hook is designed only to interact with one level deep accessible menus, it could feasibly be extended to eventually work with menubars as well, but I think what you are looking for is outside of the scope of this project.

I hope my explanation is sufficient, and all the best to you!