.bm-menu-wrap component: [aria-hidden="true"] elements contain focusable descendants

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.05k stars 586 forks source link

.bm-menu-wrap component: [aria-hidden="true"] elements contain focusable descendants #440

Closed fmacherey closed 3 years ago

fmacherey commented 3 years ago

Hey there,

when profiling our page with chrome lighthouse, it notices that there are children (a-Links) elements which are focusable by accessibility tools but the container is not.

This happens because the menu-container has aria-hidden but not hidden-attribute. So I think the simplest fix is, to add hidden attr with same value as aria-hidden. Here you can read more: https://web.dev/aria-hidden-focus/?utm_source=lighthouse&utm_medium=devtools

We are using the slide menu in our project.

negomi commented 3 years ago

Hi @fmacherey,

Thanks for reporting this.

I checked out your PR and noticed the animation wasn't working with the simple fix. However, I was able to add the hidden attribute in a slightly more complex way.

I've just released that fix in v3.0.6.