[a11y-defect-1] [WICKED]: Review answers page has multiple focus defects and error messaging issues

[joshkimux]

Point of contact

joshkimux

Severity level

1, Launchblocking

Details

The review answers page has several major focus management and error messaging issues which is consequence to its complex design. This includes, but isn't limited to:

• When editing contact information
  • invisible va-alerts announce updates within the shadow dom
  • the page scrolls to the top, and not to the h3 or first edit link (we need to discuss this in more detail)
• When Veteran information needs to be updated (e.g. a missing email address)
  • Multiple assertive alerts conflict with one another
  • The user can't hear or access group level error messaging
• When errors persist and the user attempts to submit
  • It's unclear where focus should go
  • The new "we're sorry" alert conflicts with other assertive alerts on the page
  • Sometimes the submit button no longer works
• When editing an issue
  • focus is sent to the h2 step x of y instead of the unique h3
  • upon confirming or cancelling a change, focus is lost and the page autoscrolls to the top

https://github.com/department-of-veterans-affairs/va.gov-team/assets/14154792/c80fc1f0-3228-4ec0-a797-570457af9e7a

Reproduction steps

1. Log in to NoD as user 236
2. Complete the form
3. On the review answers page, turn on your screen reader
4. For each interactive element, test for focus management
5. Confirm focus management is not consistent
6. With a missing email address, attempt to submit the form
7. Confirm the submit button is no longer responsive

Proposed solution or next steps

I'm not confident this is a problem worth attempting to solve downstream. This likely deserves more attention and review from accessibility specialists, designers, and engineers-- particularly to explore upstream solutions like a check answers page.

Several of these issues are sitewide, and should be escalated to the DST team (if they have not already).

Next steps

• [x] @joshkimux to document sitewide issues with the review answers page and share with a11y specialists
• [ ] @joshkimux to reach out to DST team to get confirmation on transition to new pattern

We could potentially look into fixes we can control and make now, but I would recommend against anything that requires too many resources / is too complicated if it won't fix more upstream problems at scale.

When I return from vacation I'll prioritize this as an issue to break apart with other specialists sitewide.

Update

@laflannery 's team is already using a new version of the check answers page that references the gov.uk pattern. It has undergone testing as a prototype, and exists as a sketch file recommended by the Design System team. They received design intent feedback to use this in the collaboration cycle.

Type of issue

• [X] Screenreader
• [X] Keyboard
• [X] Focus
• [ ] Headings
• [ ] Color
• [ ] Zoom
• [ ] Semantics
• [ ] Axe-core
• [ ] Something else

[saderagsdale]

@joshkimux @eileen-coforma @Mottie to huddle on this one

[eileen-coforma]

I had a discussion about this with @joshkimux, and he suggests moving it to blocked for now. Two reasons:

1. Josh is working on a list of wicked a11y issues that exist for all forms that have to do with platform requirements (this page being one of them)
2. There is another team (forms team) working on getting the another version of the review & submit to be published and documented, which we can then adopt, and that could resolve this issue.

[davidakennedy]

I did some more testing here this sprint to see how things have changed. Here are some notes:

• We'll have to wait to fix this. But some things have been fixed.
• The focus management issues aren't present any longer, thanks to work from @Mottie.
• However, the multiple assertive alerts still exist.
• The product forms team has work in the backlog to improve the review and submit page, but it's not a high priority currently.