a11y: give icon-only chrome buttons accessible names#5
Open
chinesepowered wants to merge 1 commit into
Open
Conversation
The dock, the sidebar/grid close buttons, and the annotation toolbar are all icon-only. Their labels came only from `data-tip`, which is a CSS hover tooltip ([data-tip]::after { content: attr(data-tip) }) and is not exposed to assistive tech — so screen readers announced them as an unlabeled "button". Add aria-label to each, plus aria-pressed on the toggle buttons (sidebar, grid, annotate, and the tool/color/size selectors) so their on/off state is conveyed too. No visual or behavioral change.
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.
What
The icon-only buttons in the deck chrome had no accessible name. They rely on
data-tip="…", which is rendered purely as a CSS hover tooltip:That content isn't exposed to assistive tech, so every dock / sidebar / grid / annotator button was announced as an unlabeled "button". CONTRIBUTING asks that engine changes stay "keyboard-accessible", so this closes the gap for screen-reader and voice-control users.
Changes
src/deck/Deck.tsx—aria-labelon prev/next, the sidebar & grid close buttons, and the dock's sidebar, grid, annotate, fullscreen (state-aware label), and presenter buttons.aria-pressedon the sidebar / grid / annotate toggles so their on state is conveyed.src/deck/Annotator.tsx—aria-labelon every tool, color, size, undo, and clear button (colors and sizes get real names via small label maps), plusaria-pressedon the selected tool / color / size.The existing
data-tiptooltips are left untouched, so there is no visual or behavioral change — this is purely additive semantics.Verification
npx tsc --noEmit✓npm run build✓