ilpanich / axiam / 29408835368

91%

Build Type

push

github

Committed by web-flow

Commit Message

frontend: apply design-system UI/UX & accessibility audit fixes (#185)

Addresses the findings in claude_dev/AXIAM-frontend-audit.md across
accessibility, cross-browser correctness, and UI/UX consistency.

Accessibility
- Global prefers-reduced-motion guard; loading spinners degrade to an
  opacity pulse instead of rotation (#1).
- Shared useModalA11y hook restores focus to the trigger and locks
  background scroll for ConfirmDialog / FormDialog / SecretRevealModal /
  UserSearchDialog (#3).
- Input/Textarea gain error/invalid props wiring aria-invalid +
  aria-describedby and a destructive style, with an inline error node (#2).
- Standardized a single focus-visible ring (.focus-ring) across inputs,
  search and hand-rolled dialog buttons (#4).
- ToggleField control enlarged to 20px with a larger label target (#7).
- DataTable headers get scope="col"; decorative empty-state glyph is
  aria-hidden (#8).
- SearchInput accepts an explicit label, no longer relying on the
  placeholder as its only accessible name (#9).
- Button gains a 44px icon-touch size and active-state press feedback (#10).
- StatusBadge adds a distinct per-state icon (SVG, aria-hidden) as a
  non-color cue while keeping the text label as the sole matchable name (#15).

Cross-browser / mobile
- Gradient painted on a fixed pseudo-element layer instead of
  background-attachment: fixed (iOS Safari jank) (#16).
- Dynamic-viewport units (dvh) for full-height utilities and dialog
  max-heights so content isn't hidden behind mobile browser chrome (#17).
- Touch press feedback via active: states; hover lift gated to
  hover-capable pointers (#18).
- glass-card blur reduced on small screens for GPU perf (#19).

UI/UX & consistency
- glass-card solid @supports fallback when backdrop-filter is
  unavailable (#5).
- Stronger structural borders (--border-strong token, white/10 dividers)
  and dropped the universal cyan border-color rule so borders are
  predictable (#6, #13).
- DataTable: stronger... (continued)

Coverage Stats

1682 of 1859 branches covered (90.48%)

Branch coverage included in aggregate %.

28 of 30 new or added lines in 9 files covered. (93.33%)

4 existing lines in 1 file now uncovered.

27285 of 33258 relevant lines covered (82.04%)

71.3 hits per line