maniator / maniator/verticopolis
[Enhancement]: [P3] Complete the build-palette tab a11y (WAI-ARIA keyboard nav + focus restoration)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 5
- Forks
- 1
- PR merge metrics
- No merged PRs in 30d
Description
Deferred from the palette category-tabs PR (v1.97.0). The mobile category tab bar ships a functional tablist (`role=tablist`/`role=tab`/`aria-selected`, each tab a focusable `` reachable by Tab), which both review layers judged acceptable. Two a11y refinements are follow-up:
- Full WAI-ARIA tablist keyboard pattern: add `aria-controls` on tabs linking to their `.pal-group` sections, `role=tabpanel` + `aria-labelledby` on the sections, roving `tabindex`, and Left/Right/Home/End arrow-key navigation between tabs. Note the desktop/mobile split: the tablist is only meaningful on mobile (on desktop `#palette-tabs` is `display:none` and all sections show), so the tabpanel semantics must not read as a broken tablist on desktop.
- Focus restoration on hide: when a star/mode drop empties the active category, `syncPaletteTabs` sets `hidden` on the tab and its section; if a `.pal-tab` or an in-group `.pal-item` currently holds keyboard focus, focus falls to `` with no restoration. Move focus to the newly selected tab in that case. (Pre-existing for items; newly reachable for the tab buttons.)
/bmad-code-review.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at syncPaletteTabs and trace the mobile #palette-tabs, .pal-tab, and .pal-group elements, including the existing star/mode-drop focus behavior. Implement the specified WAI-ARIA relationships, roving tabindex, and arrow-key navigation without breaking the desktop/mobile split. Done means the active category remains keyboard-accessible and focus moves to the newly selected tab when its former category is hidden.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100