maniator / maniator/verticopolis

[Enhancement]: [P3] Complete the build-palette tab a11y (WAI-ARIA keyboard nav + focus restoration)

Open
#628 0 comments 0 reactions 0 assignees View on GitHub

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:

  1. 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.
  2. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.