Keyboard and accessibility: shortcuts, high contrast, reduced motion

jcoffey-dev commented

2026-10-06 16:58:41 +00:00

Owner

Admin UX roadmap, item 13 (and the ? sheet from item 12).

Account menu › Accessibility

Contrast: Follow the system / Standard / High. Motion: Follow the system / Reduce / Full. "Follow the system" is the default and tracks prefers-contrast / prefers-reduced-motion live. Stored in the browser like the layout choice.
High contrast has its own colors over any palette, in light and dark: every text pair 7:1 or better (WCAG AAA; checked: muted text 12.6:1 light, 14.9:1 dark), borders and inputs that stand out, a 3px focus ring, underlined links. (src/a11y.css, more specific than the palettes.)
Reduced motion stops animations and transitions.

Shortcuts (? lists them; also from the menu)

/ command bar (Ctrl+K still works everywhere)
g then h dashboard, p people, d domains, s settings overview, a your account
n on a list creates a new one, like its Create button
single keys never fire while typing in a field, with a modifier held, or with a dialog or menu open

Keyboard fixes

"Skip to content" link, first Tab stop
list rows take focus and open with Enter/Space
row action buttons are named for their row ("Actions for example.org"); they read as unlabeled

Translation: 23 new strings in en.json (a11y.*, shortcuts.*, list.rowActions), English only for now.

Checked locally: typecheck, lint, i18n:check, 626 tests (4 new), build, notice-check. Previewed against a local server: every g destination, n, ?, /; typing ghn?/ into a form field fired nothing; Enter on a focused row opened it; the Accessibility menu operated by keyboard; high contrast checked in dark and light. Not checked: a screen reader end to end.

Admin UX roadmap, item 13 (and the `?` sheet from item 12). **Account menu › Accessibility** - Contrast: Follow the system / Standard / High. Motion: Follow the system / Reduce / Full. "Follow the system" is the default and tracks `prefers-contrast` / `prefers-reduced-motion` live. Stored in the browser like the layout choice. - **High contrast** has its own colors over any palette, in light and dark: every text pair 7:1 or better (WCAG AAA; checked: muted text 12.6:1 light, 14.9:1 dark), borders and inputs that stand out, a 3px focus ring, underlined links. (`src/a11y.css`, more specific than the palettes.) - **Reduced motion** stops animations and transitions. **Shortcuts** (`?` lists them; also from the menu) - `/` command bar (Ctrl+K still works everywhere) - `g` then `h` dashboard, `p` people, `d` domains, `s` settings overview, `a` your account - `n` on a list creates a new one, like its Create button - single keys never fire while typing in a field, with a modifier held, or with a dialog or menu open **Keyboard fixes** - "Skip to content" link, first Tab stop - list rows take focus and open with Enter/Space - row action buttons are named for their row ("Actions for example.org"); they read as unlabeled Translation: 23 new strings in en.json (`a11y.*`, `shortcuts.*`, `list.rowActions`), English only for now. Checked locally: typecheck, lint, i18n:check, 626 tests (4 new), build, notice-check. Previewed against a local server: every `g` destination, `n`, `?`, `/`; typing `ghn?/` into a form field fired nothing; Enter on a focused row opened it; the Accessibility menu operated by keyboard; high contrast checked in dark and light. Not checked: a screen reader end to end.

jcoffey-dev added 1 commit 2026-10-06 16:58:42 +00:00

Keyboard and accessibility: shortcuts, high contrast, reduced motion

ci / build (pull_request) Skipped

Details

ci / publish (pull_request) Skipped

Details

ci / notices (pull_request) Successful in 46s

Details

github/ci (branch) GitHub Actions

Details

ci / github (pull_request) Successful in 1m22s

Details

27031f0837

Account menu › Accessibility chooses contrast and motion, each "follow
the system" by default and tracking it live. High contrast uses its own
colors over any palette, light and dark, every text pair at 7:1 or
better, with a thick focus ring and underlined links. Reduced motion
stops animations and transitions.

Shortcuts: ? shows them all, / opens the command bar, g then h, p, d, s
or a goes to the dashboard, people, domains, settings or your account,
and n creates a new one on a list. Single keys never fire while typing
in a field, with a modifier held, or with a dialog or menu open.

Keyboard fixes: a "Skip to content" link, list rows that take focus
and open with Enter, and row action buttons named for their row (they
read as unlabeled).

Admin UX roadmap, item 13; the ? sheet is part of item 12.

jcoffey-dev added 1 commit 2026-10-06 18:10:51 +00:00

Shortcuts work with a row's action button focused

ci / build (pull_request) Skipped

Details

ci / publish (pull_request) Skipped

Details

ci / notices (pull_request) Successful in 13s

Details

github/ci (branch) GitHub Actions

Details

ci / github (pull_request) Successful in 2m3s

Details

62b64016f5

The button stopped key presses from bubbling, so ?, / and g did nothing
while it had focus; the row's own Enter handler already ignores presses
from inside the row. The ? beside Keyboard shortcuts is hidden from
screen readers, which read it out.

jcoffey-dev merged commit 8269a1d329 into main

2026-10-06 18:13:23 +00:00

jcoffey-dev deleted branch feature/keyboard-a11y

2026-10-06 18:13:23 +00:00

jcoffey-dev referenced this pull request

2026-10-06 18:40:01 +00:00

People as cards, friendly empty states, and a first-domain hello #92

Keyboard and accessibility: shortcuts, high contrast, reduced motion #91