33 lines
1.3 KiB
Markdown
33 lines
1.3 KiB
Markdown
|
# Accessibility notes (Descrybe v2 web)
|
||
|
|
|
||
|
|
Critical fixes from the a11y pass (keyboard / focus / ARIA).
|
||
|
|
|
||
|
|
## Sidebar (`Nav.svelte`)
|
||
|
|
|
||
|
|
- Mobile drawer uses `inert` + `aria-hidden` when closed so off-canvas links are not in the Tab order.
|
||
|
|
- Open drawer traps focus; **Escape** closes it.
|
||
|
|
- Hamburger `aria-controls="app-sidebar"` matches the aside `id`; label toggles Open/Close.
|
||
|
|
- Nav links expose `aria-current="page"`; **More** uses `aria-expanded` / `aria-controls`.
|
||
|
|
- Primary **Stores** points at `/stores` (`data-tour="nav-stores"`).
|
||
|
|
|
||
|
|
## Focus traps
|
||
|
|
|
||
|
|
Shared helper: `src/lib/a11y/focus-trap.ts`.
|
||
|
|
|
||
|
|
| Surface | Behavior |
|
||
|
|
|---------|----------|
|
||
|
|
| `Dialog.svelte` | Tab cycle inside panel; focus restored on close; Escape closes |
|
||
|
|
| Tutorial popover | Tab cycle = popover controls **+** highlighted `data-tour` target (so forced steps stay keyboard-reachable); Escape pauses |
|
||
|
|
| Mobile sidebar | Tab cycle while drawer open |
|
||
|
|
|
||
|
|
## Store hub (`/stores`)
|
||
|
|
|
||
|
|
- Landmark `section` with accessible heading (sr-only).
|
||
|
|
- Each connector is an `article` with labelled title + CTA `aria-label`.
|
||
|
|
- Status badges include an accessible name (`Status: …`).
|
||
|
|
|
||
|
|
## Remaining (non-blocking)
|
||
|
|
|
||
|
|
- Individual feature dialogs that bypass `ui/Dialog` should adopt the same trap.
|
||
|
|
- Live axe/browser keyboard audit on every route still recommended before production.
|