Skip to content

[a11y] Sprint 4 — contrast, tokens & non-text alternatives (nonexistent utilities, charts, graph canvas) #95

Description

@Santisoutoo

Part of VforVitorio#889 (Fable-5 a11y audit 2026-07-05). Sprint 4 — Contrast, tokens & non-text alternatives.

  • S4.1 a11y(tokens): fix non-existent Tailwind utilities that silently no-op + rewrite SplashGate tokens [M] [P2]tailwind.config.ts:50-54 replaces the default amber scale with only 300/500/700, so amber-200/400/600 no-op: dark:text-amber-400 (CitationCard.tsx:22, ArticleBlock.tsx:28, DiffPage.tsx:69,98), dark:text-amber-200 (LawHeader.tsx:136, CommandPalette.tsx:212), text-amber-600 (SettingsPage.tsx:1071,1083, CommentsPanel.tsx:133), bg-amber-200/70 (ExplorerPage.tsx:665), decoration-amber-400/70 (EditorPage.tsx:324); and SplashGate uses a whole foreign shadcn token set (bg-background/text-foreground/text-muted-foreground/bg-primary/text-primary-foreground/text-destructive, SplashGate.tsx:65-116) leaving the warm-up progress-bar fill invisible + retry button unstyled. AC: add the missing shades (or fix call sites) + rewrite SplashGate with real tokens; verify with a build (silent no-op is the failure mode). WCAG 1.4.3/1.4.11. (P2-10)
  • S4.2 a11y(contrast): amber-500/white chips, Badge amber, tiny muted text, dark focus ring [S] — white-on-amber-500 ≈2.0:1 at 12.5px (active user-tag chips ExplorerPage.tsx:389-399, FilterRail.tsx:350-351); Badge amber tone ≈3.5-3.8:1 (ui/Badge.tsx:8, law status across Explorer/Home/LawHeader); label-caps/text-muted ≈4.4:1 at 10.5-11px; focus ring ≈2.6:1 on dark --bg (index.css:105-109). AC: amber-soft bg + amber-700 fg; darken amber fg pair; ≥12px or darker muted; theme-aware ring. WCAG 1.4.3/1.4.11/2.4.7. (P1-7, P2-9, P2-11)
  • S4.3 a11y(dataviz): Recharts accessibilityLayer/table fallback + graph canvas name + "ver como lista" [M] — Dashboards hero chart values are hover-only, no text equivalent, no accessibilityLayer (DashboardPage.tsx:166-213); the graph <canvas> is nameless with no non-visual alternative, nodes unreachable by keyboard (GraphCanvas.tsx:247-328, GraphPage.tsx:172) — partial mitigation (seed neighbours as focusable rail chips) is undiscoverable + gone when the rail is closed. AC: enable Recharts accessibilityLayer + table toggle; role="img"+aria-label summarising the subgraph + a "ver como lista" (nodes+edges). Coordinate [epic] Graph VISUALIZATION — design, performance & UX (Fable 5 audit, 2026-07-03) VforVitorio/LexFlow#782 (viewer overhaul) + Epic: Trust & uncertainty communication (Fable-5 audit 2026-07-05) VforVitorio/LexFlow#847 (inferido). WCAG 1.1.1/2.1.1. (P1-8, P1-9)
  • S4.4 a11y(versions): VersionTimeline colour-only state + non-interactive when no onSelect [S] — current version = ring only, publish-vs-amendment = dot colour only, labels just "YYYY-MM"; on LawDetail it renders without onSelect so every dot is a focusable dead button (VersionTimeline.tsx:30-43, LawDetailPage.tsx:112). AC: aria-current="true", kind in the accessible name, non-interactive spans when no onSelect. WCAG 1.4.1/4.1.2. (P2-17)

Full detail: memory/fable_a11y_audit_2026-07-05.md.


Upstream: VforVitorio#893

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions