Skip to content

fix(web): a11y essentials + restore broken benchmark viewMode#85

Merged
github-actions[bot] merged 1 commit intodevelopfrom
feat/web-a11y
May 8, 2026
Merged

fix(web): a11y essentials + restore broken benchmark viewMode#85
github-actions[bot] merged 1 commit intodevelopfrom
feat/web-a11y

Conversation

@frapercan
Copy link
Copy Markdown
Owner

Why

UX audit flagged: only 3 of 14 pages used aria/role/label htmlFor. Drive-by: when PRs #81 (heatmap) and #82 (URL-sync) auto-rebased onto each other, the viewMode state on /benchmark was dropped — develop currently fails to build that page. Folded the trivial fix into this PR so it can land.

What

A11y

  • Skip-to-content link in the locale layout: hidden until focused, lands focus on <main id="main" tabIndex={-1}>. Reachable on the first Tab press.
  • NavLinks dropdowns now expose aria-haspopup="menu", aria-expanded, aria-current="page" on active groups. Inner items carry role="menuitem". Mobile menu locks body scroll while open and restores prior overflow on close (no more dual-scroll trap).
  • StatusBadge gains a redundant leading glyph per state (clock / pulse / check / ✕ / slash-circle). Color-blind users still parse the badge at a glance. Wrapper carries role="status" and a verbose aria-label.
  • Benchmark filter chips (Pipeline stage, Neighbours K) gain aria-pressed plus role="group" with descriptive aria-label.
  • Heatmap | Table toggle already ships role="tablist" / aria-selected from feat(web): benchmark heatmap small-multiples — visual ranking per cell #81.

Drive-by build fix

Test plan

  • next build green; 18 routes; no TS errors (was failing on develop before this PR)
  • Backend untouched
  • Press Tab on first load — "Skip to main content" link appears top-left, focusing it jumps to <main>
  • Use a screen reader on /jobs — StatusBadge announces "Status: succeeded" etc.
  • On a small viewport: open the mobile menu, body underneath stops scrolling; close and underneath scrolls again
  • Tab into Pipeline-stage chips — focus ring appears, aria-pressed flips on selection

…o-rebase

A11y improvements

- Skip-to-content link in the locale layout: hidden until focused, lands
  focus on <main id="main" tabIndex={-1}>. Reachable on the first Tab
  press; was the most-flagged item by automated scanners.
- NavLinks dropdown buttons now expose `aria-haspopup="menu"`,
  `aria-expanded`, `aria-current="page"` on active groups. Inner items
  carry `role="menuitem"`. Mobile menu locks body scroll while open
  (restores prior overflow on close).
- StatusBadge gains a redundant leading glyph per state (clock, pulse,
  check, ✕, slash-circle). Color-blind users still parse the badge at
  a glance. Wrapper carries `role="status"` and a verbose aria-label.
- Benchmark filter chips (Pipeline stage, Neighbours K) gain
  `aria-pressed` plus `role="group"` with descriptive `aria-label`.
- Heatmap | Table toggle (#81) already shipped with `role="tablist"`
  and `aria-selected`.

Drive-by fix

- Restore the `viewMode` state declaration on /benchmark. PR #81's
  toggle UI references `viewMode` / `setViewMode`, but the auto-rebase
  ladder against #82 dropped the hook line on develop, leaving the
  page broken at build time. Adds the line back; default "heatmap".
  (Also re-imports BenchmarkHeatmap, similarly lost.)

CI: next build green; backend untouched.
@github-actions github-actions Bot enabled auto-merge (squash) May 8, 2026 16:49
@github-actions github-actions Bot merged commit 7201a4f into develop May 8, 2026
13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant