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' form focus must be set properly when users edit their address #96332

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 Benefits Letters form (1 of 2) has an inline form to edit users' address. The first checkbox is not receiving keyboard focus on first render when users press the "Edit" button. This can be confusing to screen reader users because they're dropped into the middle of a form and might inadvertently create errors for themselves. Screenshot attached below.

Image

Reproduction steps

  1. Log into https://staging.va.gov/records/download-va-letters/letters/confirm-address with a test user. I used 54.
  2. Turn on the screen reader of your choosing
  3. Click the "Edit" link to switch the text address into the form
  4. Verify focus lands on one of the address fields on first run
  5. Canceling and editing the form again causes focus to be set properly. That's what makes this issue so tricky. ...

Proposed solution or next steps

Focus needs to be set on the first checkbox reliably. This may be a timing issue or in how the form is being rendered. We might be able to look at an autofocus attribute for the checkbox. Normally I'm not in favor of this, but we need a reliable, reproducible way to set focus when users enter the form.

References, articles, or WCAG support

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

Type of issue