Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Header] GitHub link is missing an Accessible Name (accessibility bug) #786

Open
ashleemboyer opened this issue Jun 1, 2024 · 0 comments

Comments

@ashleemboyer
Copy link

Bug report

Current Behavior

  1. Go to https://www.radix-ui.com
  2. Open Chrome DevTools
  3. Open the Elements panel
  4. Locate the GitHub link 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 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:

{gitHubLink && (
<Tooltip className="radix-themes-custom-fonts" content="View GitHub ">
<IconButton asChild size="3" variant="ghost" color="gray">
<a href={gitHubLink} target="_blank">
<GitHubLogoIcon width="16" height="16" />
</a>
</IconButton>
</Tooltip>
)}

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.

@ashleemboyer ashleemboyer changed the title [Header] GitHub link is missing an Accessible Name [Header] GitHub link is missing an Accessible Name (accessibility bug) Jun 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant