search

department-of-veterans-affairs / va.gov-team

Public resources for building on and in support of VA.gov. Visit complete Knowledge Hub:
https://depo-platform-documentation.scrollhelp.site/index.html
283 stars 204 forks source link

[a11y-defect-2]: Benefit Letters page must manage keyboard focus on first render (page load) #96329

Open 1Copenut opened 4 days ago

1Copenut commented 4 days ago

Point of contact

Trevor Pierce

Severity level

2, Serious. Should be fixed in 1-2 sprints post-launch.

Details

The logged in Benefits letters confirm address page is not managing focus to the H1 correctly on first page load. This is confusing to screen readers because either no information is being read or too much information is being read. Ideally we want to hear "VA Letters and Documents, heading level one" and nothing else when the page loads. Screenshot attached below.

Image

Reproduction steps

  1. Log into staging with a test user who has benefit letters. I had good luck with user 54.
  2. Turn on the screen reader of your choice
  3. Navigate to https://staging.va.gov/records/download-va-letters/
  4. Click the link to download benefit letters (it's the primary action link with the green arrow next to it)
  5. Verify you do not hear the H1 read aloud
  6. You can also programmatically verify focus by opening dev tools and typing document.activeElement into the console.

Proposed solution or next steps

We should add a React ref and tabindex="-1" to the H1. Using the useEffect hook we can then check for the ref and set focus on the H1 on first render.

References, articles, or WCAG support

  1. Understanding SC 1.3.2: Meaningful Sequence (Level A)

Type of issue