a11y: screen-reader data for dashboard charts, non-color status cues, plus next build repair - #338
Open
rudra496 wants to merge 3 commits into
Open
a11y: screen-reader data for dashboard charts, non-color status cues, plus next build repair#338rudra496 wants to merge 3 commits into
rudra496 wants to merge 3 commits into
Conversation
BarChart's hover-only titles and Sparkline's unlabeled SVG left the dashboards' financial data unreachable for screen-reader users. BarChart now wraps its bars in a figure with a visually-hidden caption list announcing every label:value pair (formatValue-aware), with the visual layer marked aria-hidden; Sparkline announces a computed trend summary via role=img, with a decorative opt-out used by StatCard where the trend percentage is already announced as text. Visual output unchanged.
Hue alone can't carry eight financial states: funded and paid both read as the good-green at a glance while meaning escrowed vs released, and refunded/open share near-identical slate tones. Each status now carries a fixed lucide glyph (aria-hidden, since the label text renders anyway) as a non-color cue; palette untouched. Difficulty badges keep their text-plus-hue encoding.
42fc033 used jest.fn as a type annotation, failing tsc under noUnusedLocals-strict settings (TS2749) and with it the whole next build. Wrap in ReturnType<typeof jest.fn>.
|
@rudra496 is attempting to deploy a commit to the chonilius' projects Team on Vercel. A member of the Team first needs to authorize it. |
This was referenced Aug 27, 2026
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
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 #15
Fixes #49
What changed
#15 — charts were invisible to screen readers
title— unreachable for keyboards and screen readers. Now wrapped in a<figure>with a visually-hidden caption list announcing everylabel: valuepair (formatValue-aware, so the dashboards announce real currency figures); the bar layer isaria-hiddenso nothing gets double-announced. Visual output unchanged.role=imgwith a computed trend summary ("Trend from 10 to 42 (320% increase)"), plus adecorativeopt-out. StatCard uses the opt-out since its trend line already announces the same movement as text — no duplicate announcements.BarChart.test.tsx(4 cases) andSparkline.test.tsx(6 cases).#49 — status color audit + non-color cues
Audited the live mapping in
Badge.tsx(not the speculation in the issue — the real palettes):funded(sky) vspaid(emerald): both read as positive at a glance, but mean escrowed vs released — the exact confusion the issue warns about.refundedvsopen: near-identical slate tones (600 vs 700 on the same bg/ring) — a real confusable pair the issue didn't even call out.aria-hiddenicons since the label text renders anyway. Difficulty badges keep text+hue (4 well-separated hues, visible text labels).Bonus —
next buildhas been broken on main42fc033 introduced
logout: jest.fnas a type annotation (TS2749);tsc --noEmitfails andnext builddies at type-check for every fresh clone. One-lineReturnType<typeof jest.fn>repair included so this PR leaves the repo buildable.Verification
npx jest: 269 passing on this branch vs 252 on current main; the 7 remaining failures are in pre-existing failing suites (WalletContext, ConnectPanel, NetworkBadge, Tabs, AuthContext, BountyCard) that fail identically without my changes — none touch Badge/BarChart/Sparkline/StatCard (46/46 there).npx tsc --noEmit: clean (was failing on main).npm run build: succeeds (was failing on main).eslinton all touched files: clean.Honest scope note: WCAG contrast of the existing Tailwind pairings (50/700 light, /10 + -300 dark) passes AA by inspection and is unchanged by this PR; the colorblind-safety argument here rests on the cues no longer depending on hue at all. I don't have a screen-reader rig in this environment, so the SR behavior is covered by the RTL assertions rather than a manual VoiceOver pass.