Skip to content

fix(frontend): expose active settings section to assistive tech (#1231)#1277

Merged
ogazboiz merged 2 commits into
LabsCrypt:mainfrom
kingbitnation:fix/1231-settings-nav-a11y
Jun 28, 2026
Merged

fix(frontend): expose active settings section to assistive tech (#1231)#1277
ogazboiz merged 2 commits into
LabsCrypt:mainfrom
kingbitnation:fix/1231-settings-nav-a11y

Conversation

@kingbitnation

Copy link
Copy Markdown
Contributor

Summary

  • Add tablist/tab/tabpanel semantics to the Settings section nav with aria-selected, aria-controls, and roving tabIndex
  • Keep keyboard focus on the active tab when switching sections; arrow keys move between tabs
  • Add unit tests that assert accessible state (not CSS classes)

Closes #1231

Test plan

  • Unit tests: npm test -- --testPathPattern=settings/page.test
  • Manual: open /settings, Tab to section nav, verify screen reader announces selected tab
  • Manual: click Wallet tab and confirm focus + aria-selected update

Add tablist/tab/tabpanel semantics with aria-selected and aria-controls so screen readers can identify the active panel. Keyboard focus stays on the active tab when switching sections, with arrow-key navigation between tabs. Assert active state via accessible attributes in unit tests. Closes LabsCrypt#1231
@ogazboiz ogazboiz merged commit b054792 into LabsCrypt:main Jun 28, 2026
5 of 9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Frontend] Settings section nav conveys the active panel by styling only - no aria-current or tab semantics

2 participants