[OpenSpec] admin-panel-keyboard-accessibility

[github-actions]

⚠️ OpenSpec-managed issue — this content is automatically synced
from the openspec/ directory. Manual edits will be overwritten on next sync.

Artifacts

• ✅ Metadata
• ✅ Proposal
• ✅ Specs
• 🔲 Design
• ✅ Tasks
• 🔲 Plan
• 🔲 Review

Specs

• 📄 admin-panel-accessibility

Tasks

• 1.1 Add aria-haspopup="listbox" to trigger (js/admin.js:1073-1077) and toggle
• 1.2 Add role="listbox" to optList (js/admin.js:1090-1091) or role="dialog" +
• 1.3 Add a keydown listener on dropdown that: closes the panel and returns focus to
• 1.4 Verify updateTriggerLabel() (js/admin.js:1093-1098) continues to update
• 2.1 Add role="dialog" and aria-modal="true" to #nldesign-theming-dialog-overlay's
• 2.2 After document.body.insertAdjacentHTML('beforeend', dialogHtml) (js/admin.js:313),
• 2.3 Add a focus-trap keydown listener scoped to the dialog: Tab/Shift+Tab cycle only
• 2.4 Add Escape-closes-dialog behavior equivalent to the existing cancel click handler
• 3.1 Add role="dialog" and aria-modal="true" to #nldesign-apply-dialog-overlay's inner
• 3.2 Apply the same focus-in-on-open / focus-trap / focus-restore-on-close / Escape-closes
• 3.3 Confirm the "Select all" / "Deselect all" buttons (js/admin.js:908-915) and the
• 4.1 Extend tests/e2e/spec-coverage/app-theming.spec.ts's
• 4.2 Add e2e coverage (new spec file or extend an existing theming-sync/token-set-apply-dialog
• 4.3 Add the equivalent assertions for the apply-token-set dialog.
• 5.1 Run the new/extended Playwright specs and confirm they pass against a running dev
• 5.2 Manually keyboard-navigate the admin settings page (Tab only, no mouse) through: opening

---

Synced from openspec/changes/admin-panel-keyboard-accessibility by OpenSpec workflow
App: thematiq