Skip to content

Add ARIA roles to govTabs for screen reader accessibility#217

Draft
cjrace wants to merge 2 commits intomainfrom
fix/187-govtabs-aria-roles
Draft

Add ARIA roles to govTabs for screen reader accessibility#217
cjrace wants to merge 2 commits intomainfrom
fix/187-govtabs-aria-roles

Conversation

@cjrace
Copy link
Copy Markdown
Collaborator

@cjrace cjrace commented Mar 30, 2026

Summary

Fixes #187

  • Adds role="tablist", role="presentation", role="tab", and role="tabpanel" ARIA roles to the govTabs component, matching the GOV.UK Frontend tabs specification
  • Adds aria-selected, aria-controls, and aria-labelledby attributes so screen readers correctly identify and navigate tabs
  • Updates govTab.js to toggle aria-selected when switching tabs
  • Adds tests verifying all ARIA roles and attributes are correctly applied

This resolves the accessibility audit finding (page 23, Sept 2025 report) where JAWS identified tabs as links rather than tabs.

Test plan

  • devtools::test() — all 11 govTabs tests pass (including 4 new ARIA tests)
  • devtools::check() — 0 errors, 0 warnings
  • Manual test with shinyGovstyle::run_example() — verify tabs render and switch correctly
  • Screen reader test — verify tabs are announced as "tab" role, not "link"

🤖 Generated with Claude Code

Add tablist, tab, presentation, and tabpanel ARIA roles to the govTabs
component to match the GOV.UK Frontend tabs specification. Screen readers
now correctly identify tabs instead of announcing them as links.

Changes:
- Add role="tablist" to the tab list ul element
- Add role="presentation" to each tab li element
- Add role="tab", aria-selected, and aria-controls to each tab link
- Add role="tabpanel" and aria-labelledby to each tab panel div
- Update govTab.js to toggle aria-selected on tab switch
- Add tests for ARIA role attributes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@cjrace cjrace self-assigned this Mar 30, 2026
@cjrace cjrace added bug Something isn't working accessibility Issues raised during accessibility testing labels Mar 30, 2026
…attern

Keyboard users previously had to Tab through every tab before reaching
the panel content. Per the WAI-ARIA tabs pattern (followed by the
GOV.UK Design System), only the active tab should be in the tab order
and arrow keys should navigate between tabs.

- Add tabindex management (active="0", inactive="-1") in R and JS
- Add ArrowLeft/ArrowRight keydown handler matching GOV.UK behaviour
- Extract switchTab() to share logic between click and keyboard handlers
- Add tabindex assertions to tests

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@cjrace
Copy link
Copy Markdown
Collaborator Author

cjrace commented Mar 30, 2026

This additional commit fixes keyboard navigation for the tabs component.

The ARIA roles added in the previous commit improved screen reader semantics, but the tabs still required keyboard users to press Tab through every tab in the list before reaching the panel content. Per the WAI-ARIA tabs pattern (which the GOV.UK Design System follows), only the active tab should be in the keyboard tab order, with arrow keys used to navigate between tabs.

Changes:

  • Added tabindex management — active tab gets tabindex="0", inactive tabs get tabindex="-1", so Tab/Shift+Tab skips unselected tabs
  • Added ArrowLeft/ArrowRight keydown handler to move between tabs (matching GOV.UK's own implementation)
  • Extracted a shared switchTab() function used by both click and keyboard handlers
  • Added test assertions for tabindex values

Note: The bundled govuk-frontend-6.1.0.min.js does include a native Tabs class with this behaviour built in, but it's exported as an ES module which doesn't integrate with Shiny's htmlDependency system. This fix stays consistent with the existing pattern of custom jQuery handlers used elsewhere in the package (e.g. accordion.js).

🤖 Generated with Claude Code

@cjrace cjrace marked this pull request as ready for review March 30, 2026 16:33
@cjrace cjrace requested a review from sarahmwong as a code owner March 30, 2026 16:33
@cjrace cjrace marked this pull request as draft April 9, 2026 15:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility Issues raised during accessibility testing bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: govTabs missing tabset ARIA role

1 participant