Accessibility suite failures + mobile orientation bug

[TortoiseWolfe]

Migrated from the README "Accessibility Suite" section (lines 435–443) so the brief isn't lost when the README is cleaned up.

Brief (retained verbatim)

Read CLAUDE.md first. Run the accessibility tests and figure out what's failing. These are real component bugs, not environment issues. Don't touch the test assertions, fix the actual components. Some of these are straightforward but at least one has a structural decision that'll break other pages if you get it wrong. Read the test expectations carefully before you start changing things.

There's also an orientation problem on mobile viewports. Run those tests and you'll see something in the CSS isn't respecting the viewport width after a rotation. The test output shows the numbers.

Start with those two areas. Once both specs are green, show me the results before moving on.

Two areas

1. Accessibility spec failures — real component bugs, not environment issues. Fix the components, not the assertions. At least one has a structural decision that will break other pages if done wrong; read the test expectations carefully first.
2. Mobile orientation — something in the CSS isn't respecting viewport width after a rotation. The test output has the numbers.

Constraints

• Docker-first: docker compose exec spoketowork pnpm ...
• Existing a11y features are load-bearing — skip-to-content link, font-scaling toolbar, colorblind filters, 44px (min-h-11 min-w-11) touch targets
• Do not modify test assertions to make them pass

Acceptance

Both specs green, results reported before moving on.

[TortoiseWolfe]

Reviewed 2026-08-01 against 3cca5af — the brief's premise is wrong in two places

The underlying work is real, but two assumptions in the migrated brief will send someone down the wrong path.

1. Pa11y does not exist in this repo

grep -c pa11y package.json → 0. There is no pa11y / pa11y-ci dependency and no script that runs one. The a11y stack here is axe-playwright plus @storybook/addon-a11y.

config/pa11yci.json and config/pa11yci-auth.json are committed but read by nothing. The README claimed Pa11y too (now corrected).

"Run the accessibility tests" resolves to pnpm test:a11y:ci (package.json:66), which runs exactly one file: tests/e2e/tests/accessibility.spec.ts. The three specs in tests/e2e/accessibility/ are never run by CI at all.

2. Three of that file's assertions could never fail

Fixed in the commit that references #76, but worth knowing while reading this issue: expect(alt).toBeDefined() passed for a missing attribute, the focus-indicator check compared a string that is always truthy, and every label assertion sat behind if (inputId). So "the accessibility tests are failing" was never the whole picture — some of them were incapable of failing.

3. The orientation test was already loosened into passing

tests/e2e/tests/mobile-orientation.spec.ts:142-151 warns on overflow and then asserts scrollWidth <= 844 + 100 — up to 100px of horizontal overflow passes. And src/app/globals.css:9 sets html, body { overflow-x: hidden }, which suppresses the very overflow the test measures.

So the CSS hides the bug and the assertion tolerates it. Fixing "the orientation bug" means fixing the gate first, or you will be chasing something you cannot observe.

Concrete targets

Sub-44px controls, against our own min-h-11 min-w-11 convention:

• src/components/organisms/CreateGroupModal/CreateGroupModal.tsx:216 — btn-xs min-h-0 min-w-0 p-0, explicitly defeating the rule
• src/components/PWAInstall.tsx:256,263 — btn-xs
• src/components/GlobalNav.tsx:199,212,220 — btn-sm, no min-h-11 (the mobile copies at :339,345,462 are compliant)
• src/components/organisms/RouteCompanyList/RouteCompanyList.tsx:142
• src/components/organisms/CompanyTable/TableHead.tsx:29
• src/components/organisms/AdminModerationQueue/ModerationCard.tsx:56,69,91,98

Measure signed in — a signed-out probe misses most of the nav.

Already compliant, don't "fix": WorkerScheduleTimeline.tsx:120,131, and the CookieConsent buttons.

Related

• Accessibility + layout fix batch, with gates that can actually fail #79 carries the full layout batch (container width, the overflow-x clip, breakpoint at 428px, heading rhythm) plus the gates, ported from upstream which has already root-caused each one.
• CI reports green on tests that cannot fail #76 covers the Pa11y adopt-or-delete decision.