Add ARIA roles to govTabs for screen reader accessibility#217
Add ARIA roles to govTabs for screen reader accessibility#217
Conversation
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>
…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>
|
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:
Note: The bundled 🤖 Generated with Claude Code |
Summary
Fixes #187
role="tablist",role="presentation",role="tab", androle="tabpanel"ARIA roles to thegovTabscomponent, matching the GOV.UK Frontend tabs specificationaria-selected,aria-controls, andaria-labelledbyattributes so screen readers correctly identify and navigate tabsgovTab.jsto togglearia-selectedwhen switching tabsThis 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 warningsshinyGovstyle::run_example()— verify tabs render and switch correctly🤖 Generated with Claude Code