fix: add ARIA labels, roles, and alt text for WCAG 2.1 AA compliance#1
Open
fix: add ARIA labels, roles, and alt text for WCAG 2.1 AA compliance#1
Conversation
Add missing accessibility attributes across 7 component files:
- Add alt text to GPS marker images in gps-location pane
- Add aria-label to icon-only buttons (add panel, collapse controls,
scroll lock, filter, mute, IO info, help)
- Add role="button" to clickable divs acting as buttons (help menu,
CODA wordmark, help overlay toggle)
- Add aria-expanded to channel dropdown for screen reader state
- Add aria-label with dynamic state to mute button ("Mute"/"Unmute")
Include accessibility regression test suite (17 assertions) that
validates all ARIA attributes and alt text are present in source.
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.
Summary
alttext to GPS marker<img>elements in the GPS Location pane (gps-location.tsx)aria-labelto 10+ icon-only buttons across the UI that previously had no accessible name (add panel, collapse controls, scroll lock, filter, mute, IO info, help, time controls, channel dropdown)role="button"to clickable<div>elements acting as buttons (help menu, CODA wordmark, help overlay toggle) so screen readers announce them correctlyaria-expandedto the comm channel dropdown button to convey open/closed statearia-labelto the mute button that reflects current state ("Mute audio" / "Unmute audio")accessibility.spec.ts) with 17 assertions validating all ARIA attributes and alt text are presentFiles changed
src/components/panes/gps-location.tsxalton marker img,aria-labelon lock buttonsrc/components/framework/dockview/dockview-header-actions.tsxaria-labelon add panel + collapse buttonsrc/components/framework/dockview/dockview.tsxaria-labelon watermark add panel buttonsrc/components/interface/header.tsxrole+aria-labelon help menu & wordmark,aria-labelon time buttonssrc/components/interface/pane-help-control-button.tsxrole="button"+aria-labelon help togglesrc/components/panes/comm.tsxaria-label+aria-expandedon channel dropdown,aria-labelon filter & scroll locksrc/components/panes/video/video-controls.tsxaria-labelon mute,aria-labelon IO info buttonsrc/components/accessibility.spec.tsMotivation
Multiple interactive elements in the CODA UI lacked accessible names, making them invisible or unlabeled to screen readers. This fails WCAG 2.1 Success Criterion 4.1.2 (Name, Role, Value) at the AA level. These changes are minimal, non-breaking, and improve the experience for users relying on assistive technology.
Test plan
npm test— the newaccessibility.spec.tsshould pass all 17 assertions