search

cyntler / hamburger-react

Animated hamburger menu icons for React.js weighs only 1.5 KB.
https://hamburger-react.netlify.app
MIT License
964 stars 36 forks source link

Hamburger Menu Should Have Accessible Name By Default #23

Closed LuisOsta closed 3 years ago

LuisOsta commented 4 years ago

Since this function's HTML element is a div container with the button role (as it should be the standards), it should also have some accessible name.

You can detect this by making a CRA with this hamburger menu, and running it through lighthouse (either locally or after deployment). This issue will show up: https://web.dev/button-name/.

We can set an accessible name through the 'label' property but that should default to some reasonable value.

Edit: After further testing, it seems that using the 'label' property doesn't resolve the accessible name issue.

luukdv commented 4 years ago

Hi @LuisOsta, I've considered adding a default for the label property. Since every project could be in a different language, I've decided to leave the label up to the user. Overwriting it could easily be forgotten, and you could end up with an English label for a French website (for example).

Hopefully this makes sense!

Besides that, I can't reproduce your issue. There's a test in place for the aria-label that passes, and after doing some manual tests I can confirm it resolves the lighthouse notice. Could you maybe provide a code snippet or repository?