frontend: SVG/icon-button accessibility (#1719)#1723
Merged
Conversation
- Icon.tsx: default aria-hidden="true" on all 24 shared icon components,
placed before {...props} so consumers can override for meaningful icons.
- App.tsx: aria-hidden="true" on 21 decorative inline SVGs (all accompanied
by visible text), and role="img" aria-label="Prompt Driven" on the 2 brand
logos — fixing the mobile gap where the adjacent <h1> is hidden (sm:block)
and the logo was the only branding with no accessible name.
Existing icon-only buttons already carry title/sr-only labels, so no naked
controls remain on this surface. Inline SVGs in other components are a
follow-up sweep; the Icon.tsx default already covers icon-component usage
app-wide.
Closes #1719
Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
3 tasks
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
Add basic accessibility attributes to SVGs/icons. Sub-PR of EPIC #1720 — targets
epic/frontend-ui-polish, not main.Changes
components/Icon.tsx— defaultaria-hidden="true"on all 24 shared icon components, inserted before{...props}so any consumer can override it (e.g. passaria-labelfor a meaningful icon). This is the high-leverage change: it makes icon-component usage screen-reader-safe app-wide, not just on this surface. Mirrors the Heroicons convention (decorative by default).App.tsx— 21 decorative inline SVGs →aria-hidden="true". All sit next to visible text (button labels, status messages, section headers), so they're noise for a screen reader.App.tsx— 2 brand logos →role="img" aria-label="Prompt Driven". The adjacent<h1>Prompt Driven</h1>ishidden sm:block, so on mobile the logo was the only branding and had no accessible name. Now it does.Scope notes
title/sr-onlylabels; everything else has visible text.<svg>in other components (~270 across the app) are intentionally a follow-up — theIcon.tsxdefault already covers the shared-icon path everywhere. Kept this PR focused/reviewable.Verification
aria-hiddendefaultApp.tsxhave aria attributes (21 hidden, 2 labeled logos)npm test(vitest) — 54 passed / 12 filesCloses #1719
🤖 Generated with Claude Code