Page tops audit: tab pinning, pre-paint tabs, contrast, a11y, dead CSS

Merged
BI
2d ago
+679-4822

Follow-up to #1581 and #1589 after a six-checker audit of every page top (Josh: "Go ahead with all recommendations", 10 Nov 2026). Presentation and accessibility only; no clinical logic or values change.

What changed

  • Folder tabs pin under the header on every phone page. Short wrappers on Referrals, Movements and ED used display: contents on phone so sticky works. Verified on a local production build: 19 phone routes report top: 56, sticky, docked after a 1,000 px scroll.
  • Tabs draw correctly before the page finishes loading (CSS first paint keyed on data-folder-painted), and follow the hero if it swaps.
  • Hero danger red #e27a68 to #e88573 (4.7:1 on the slate); Figma tokens match.
  • Sideways chips and cells re-measure on font load and child changes; tablet cells scroll instead of overflowing; 48 px right scroll padding.
  • Loading and titles: named loading states for Seclusion, Activity and Help; steady ward-bar title; /ward-flow/transport redirects to the officer page; legal forms hidden h1 matches the view; clock placeholder before hydration.
  • Accessibility: hero is the h1 on discharges, search and referrals; aria-controls only on the chosen tab; Home "Flow stages" is a toggle toolbar; roving arrow keys in discharge filters; board hero uses links with aria-current; Suspense around lazy patient panes keeps keyboard focus.
  • Visual fixes: bed meeting act row wraps below 64rem, out-of-area pill colours phone-only, referral sort note ink, ED fold and handover small-phone spacing.
  • Dead CSS: about 274 unused classes removed across 28 modules; census top styles moved to census-top.module.css to keep census under 1,500 lines.
  • Budgets: referrals lowered 583.6 to 579.2; ed 529.6 to 530.5, movements/WF-001 605.1 to 605.7, bed-meeting 584.1 to 585.0 (each under 1 KB, within the 5 KB allowance). History file follows in this PR.

Checks

Fresh, local: typecheck, eslint, prettier, raw-colour, journey verify --check, pre-commit hook, and focused vitest suites per area (dead CSS 591/591; load 422 + 524; interact 136 + 106; visual 109/109; figma tokens 23/23). Hosted CI not yet run.

Left on purpose (low)

  • Duplicate "nav" label on folder tabs (needs a FolderTabs change across ~33 callers).
  • Title size 17 px on Home vs 18 px elsewhere.
  • Hero not the h1 on ward, board, governance and movements (tests pin those h1s).
  • Statistics sub-pages have no folder tabs.

Generated by Claude Code