Expose Kbd's accessible name with role="img" - #441
Merged
Conversation
Kbd built a spoken shortcut name ("Command+Shift+P") and attached it as
aria-label on a bare <kbd>. That element has no implicit ARIA role — it
maps to generic, where aria-label is prohibited — so screen readers were
liable to drop the label and announce the raw glyphs instead.
Give the root role="img", matching the existing pattern in StatusDot,
Rating, and Avatar. As a leaf role it also makes the nested glyph <kbd>
children presentational, so the name is announced once.
The old tests asserted the aria-label DOM attribute, which passed even
though the name was unexposed. They now query by role and accessible
name via getByRole('img', {name}), which fails without the role.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
czarandy
enabled auto-merge (squash)
August 7, 2026 01:45
czarandy
disabled auto-merge
August 7, 2026 01:45
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #362
Problem
Kbddoes real work to build a spoken shortcut name —getKeyLabelmapsmodto "Command"/"Control" and glyphs like⌥/⌫/↑to "Alt"/"Backspace"/"Up Arrow", joined into e.g.Command+Shift+P— and then attaches it asaria-labelon a bare<kbd>.<kbd>has no implicit ARIA role; it maps togeneric, andaria-labelis prohibited onrole="generic". Screen readers are liable to ignore the label and announce the raw glyph content of the nested<kbd>children instead ("⌘⇧P", or nothing intelligible). The feature largely wasn't reaching users.Fix
Give the root
<kbd>role="img", matching the existing pattern inStatusDot,Rating, andAvatar.imgis a leaf role, so the nested glyph<kbd>elements become presentational and the shortcut is announced once, as its readable name.The
<kbd>element itself is unchanged, so document semantics and all styling stay as they were.aria-hiddenstill opts the whole thing out for callers whose control already carriesaria-keyshortcuts.Tests
The existing tests asserted the
aria-labelDOM attribute, which passed even while the name was unexposed. They now query by role and computed accessible name —getByRole('img', {name: 'Control+Shift+K'})— plus new assertions that the root carries the role, that exactly oneimgis exposed (the glyphs aren't announced separately), and thataria-hiddenremoves it from the tree.Verified as a regression test: reverting the
role="img"line fails 8 of the 22Kbdtests. Full suite green (3198 tests), lint/typecheck/format clean.