You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
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
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.
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:
Non-goals
Validation
Related