How to add aria-label in Menu.Button

[yudyananda]

Hi, anyone here knows how to add aria-label in Menu.Button? In my case the button have no text (icon only)

[RobinMalfait]

Hey! Thank you for your suggestion!
Much appreciated! 🙏

You should be able to just add aria-label to the Menu.Button, but keep in mind that adding aria-label means that the contents becomes unreadable. So if you at one point at actual text next to your icon, then that won't be "visible" to screenreader users.

Another and preferred solution is to do something like this:

<Menu.Button>
  <svg />
  <span class="sr-only">User actions</span>
</Menu.Button>

Where you add an element that is marked with the sr-only class. This makes it invisible visually, but keeps it for screen readers. Checkout: https://tailwindcss.com/docs/screen-readers for more information,

[yudyananda]

you are right, simply add <Menu.Button aria-label="foo">. thanks for helping me out