Fix 508 accessibility issues on the website#18924
Open
tinogutierrez wants to merge 3 commits intomainfrom
Open
Fix 508 accessibility issues on the website#18924tinogutierrez wants to merge 3 commits intomainfrom
tinogutierrez wants to merge 3 commits intomainfrom
Conversation
added 3 commits
March 9, 2026 11:52
Without tabIndex={-1} on <main>, activating the skip nav link scrolled
to #main-content but left focus on BODY, breaking keyboard navigation.
Explicitly setting tabIndex={-1} ensures focus moves to <main> on
activation while keeping it out of the natural tab order.
The hero used <header> as a styling wrapper inside <main>, which browsers expose as a top-level banner landmark to assistive technologies — causing the ARC toolkit "multiple header landmarks" violation. Replaced with <section>, which carries no landmark role and is the correct semantic element for a thematic content grouping. Reduces top-level <header> elements from 3 to 2.
Collaborator
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR fixes all 6 acceptance criteria from #18031 (WAVE and ARC toolkit findings), addressing 508/WCAG accessibility violations on the ReportStream website.
Test Steps:
<main>aria-controlson "About" and "Getting started" nav buttons matches theidof their dropdown menus<header>elements — confirm only 2 exist and neither is inside<main>aria-label="ReportStream home"header[aria-label="Primary navigation"]is present in the DOMChanges
aria-controls/idmismatch on nav dropdown buttons — both now derive frommenuName.toLowerCase().replace(/\s+/g, "-") + "-dropdown"(ARC issue 1)aria-label="Primary navigation"to primary<Header>landmark (ARC issue 2)aria-label="Secondary navigation"to auth<Header>landmark (ARC issue 2)aria-label="Home"→aria-label="ReportStream home"to satisfy WCAG 2.5.3 Label in Name (ARC issue 4)<a class="usa-skipnav">) before the header (ARC issue 3)tabIndex={-1}to<main id="main-content">so skip nav correctly moves keyboard focus (ARC issue 3)<header>with<section>in the hero to remove a spurious banner landmark inside<main>(ARC issue 2)Checklist
Testing
./prime testor./gradlew testSmokeagainst local Docker ReportStream container?npm run lint:write?Process
Linked Issues
To Be Done
No remaining work in this PR.
Specific Security-related subjects a reviewer should pay specific attention to