website icon indicating copy to clipboard operation
website copied to clipboard

[ThemeToggle] Button is missing an Accessible Name (accessibility bug)

Open ashleemboyer opened this issue 1 year ago • 0 comments

Bug report

Current Behavior

  1. Go to https://www.radix-ui.com
  2. Open Chrome DevTools
  3. Open the Elements panel
  4. Locate the "Toggle theme" button element
  5. Open the Accessibility panel
  6. See that the Accessible Name is empty (""), like pictured:

Expected behavior

The Accessible Name should match the tooltip that appears on hover/focus.

Suggested solution

Set the aria-label on the button element to match the text of the tooltip. This value should be set all the time, not just when the tooltip shows.

Location of the code, from what I can tell: https://github.com/radix-ui/website/blob/52578d3c5956b26c117ad8328ee40ecc6170b648/components/ThemeToggle.tsx#L28-L53

ashleemboyer avatar Jun 01 '24 23:06 ashleemboyer