search

negomi / react-burger-menu

:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations
http://negomi.github.io/react-burger-menu/
MIT License
5.04k stars 582 forks source link

Fix accessibility issue when menu is opened #477

Closed kimyu92 closed 1 year ago

kimyu92 commented 1 year ago

Related Issue or PR:

https://github.com/negomi/react-burger-menu/issues/413 https://github.com/negomi/react-burger-menu/pull/426

Issue:

When working with other libraries where menu is opened, keyboard navigation or focus is affected due to specificity of tabindex for .bm-item

I can see why we need tabIndex=-1 when something is closed. However, it may not be necessary to specify tabIndex=0 when menu is opened.

omitted (or non-integer values) The user agent will decide whether the element is focusable, and if it is, whether it is sequentially focusable or click focusable (or both).

According to https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex, or related discussions, if an element is meant to be accessible, it should follow semantic html like using button, heading and if it's custom implementation, probably attribute role or aria-* should be used. Otherwise, we should let browser to do its own thing.

kimyu92 commented 1 year ago

Please kindly review it and let me know if you need any additional information.

cc @negomi

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.