Skip to content

a11y pass on viewer UI — keyboard nav, live regions, landmark roles #7

@lazypower

Description

@lazypower

Why

PR #5 added the first ARIA affordances to the viewer UI (screen-reader status for the copy action on `MemoryCard.svelte`). A grep across `ui/src` shows that's the only component with any a11y markup at all — the rest of the viewer is mouse-only from the assistive-tech perspective.

```
$ grep -r "aria-|role=|sr-only|tabindex" ui/src
ui/src/components/MemoryCard.svelte: 2 matches (PR #5)
```

Everything else — Header, SearchPanel, TreeBrowser, ProfilePanel, ThemeToggle, App shell — has no semantic landmarks, no keyboard affordances beyond what the browser gives natively, no screen-reader state announcements.

Scope

Per-component audit, then fix in a single PR:

  • App.svelte — landmark regions (``, ``, ``), skip-to-content link, heading hierarchy
  • Header.svelte — banner role, logo alt text, nav semantics
  • ThemeToggle.svelte — `aria-pressed` for toggle state, screen-reader label for "toggle theme"
  • SearchPanel.svelte — `role="search"`, labeled input, `aria-live` region for result count / loading state, keyboard submit
  • TreeBrowser.svelte — this is the biggest gap. Proper tree semantics (`role="tree"`, `role="treeitem"`, `aria-expanded`, `aria-level`), arrow-key navigation, focus management on expand/collapse
  • ProfilePanel.svelte — heading structure, semantic lists
  • MemoryCard.svelte — already has copy-state live region; consider whether the card's role="button" is still right when the expanded body is interactive

Non-goals

  • Full WCAG 2.1 AA conformance audit — that's a bigger lift (color contrast, motion prefs, etc.). This issue is "bring the rest of the UI up to MemoryCard's baseline."
  • Screen-reader testing matrix. We'll verify with VoiceOver + keyboard-only browsing; broader AT coverage can be a follow-up if anyone asks.

Validation

  • Keyboard-only walkthrough: Tab through every interactive element; confirm nothing is a keyboard trap and every action is reachable without a mouse.
  • VoiceOver rotor: landmarks and headings should give a usable navigation outline.
  • `axe-core` / Lighthouse a11y audit in the browser — capture before/after scores in the PR description.

Related

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions