website
website copied to clipboard
[Header] GitHub link is missing an Accessible Name (accessibility bug)
Bug report
Current Behavior
- Go to https://www.radix-ui.com
- Open Chrome DevTools
- Open the Elements panel
- Locate the GitHub link element
- Open the Accessibility panel
- 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 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/Header.tsx#L145-L153
Further improvement: update the tooltip text (and the link's aria-label) to be "GitHub". Otherwise, speech recognition users (who can't open tooltips) have to guess until they say "View GitHub" in order to open the link.