Staging Review finding: Keyboard focus goes to different places when following each link

[shiragoodman]

Need help? Please review how to read a Staging Review ticket. Tag @platform-governance-team-members on Slack if you need further assistance.

Product Information

Team: Cartographers Product: MHV on VA.gov Feature: MHV Secondary Nav

Findings details

VA.gov Experience Standard - issue: User encounters design components that are inconsistent or confusing. VA.gov Experience Standard - category: Consistency Launch-blocking: No Design System review: No Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

When navigating the secondary navigation using keyboard, there's inconsistent behavior in where keyboard focus lands as you move to each page.

• Following the Appointments, Messages, and Medications links, focus goes to the H1
• Following the My HealtheVet and Records links, focus goes to the top of the page

Focus management on VA.gov is a little inconsistent across the board, but within a single context like this that inconsistency is more exposed.

This issue could be frustrating for keyboard-only users. From the user's perspective, there's not any reason why these pages should be different and there's not a clear pattern for when to expect one behavior versus the other. Sometimes you've got to navigate past all the stuff in the header, sometimes you don't, luck of the draw.

For screen reader users, the issue becomes a little more significant. You get dropped in different places on the page but you may not have the same visual context to recognize where you've been dropped and how to get where you want to go.

Link, screenshot or steps to recreate

Steps to reproduce: 1. Log in with test user and navigate to [/my-health/](https://staging.va.gov/my-health/). 2. Press [tab] to move focus to the Appointments link. 3. Press [enter] to follow the link. 4. Note that a focus indicator is visible around the H1 on the Appointments page. 5. Press [tab] to move to the next focusable element. It will be in the main content of the page. 6. Press [shift] + [tab] to move focus back to the Records link. 7. Press [enter] to follow the link. 8. Note that no visible focus indicator is present. 9. Press [tab] to move to the next focusable element. It will be in the sitewide header.

Recommended action

Recommend matching the focus management in place on Appointments, Messages, and Medications. When following the nav links to My HealtheVet and Records, focus should be set to the H1 using tabindex="-1".

References

• Accessibility Defect Severity: 2: High. Should be fixed in 1-2 sprints post-launch.
• WCAG Success Criteria: N/A
• Modality: Keyboard
• Design System Component: N/A
• Design System Pattern or Template: N/A
• Design System Foundation: N/A
• Content Style Guide: N/A
• Context: N/A

---

Next Steps for the VFS Team

• [ ] Questions? For the most timely response, comment on Slack in your team channel tagging @platform-governance-team-members with any questions or to get help validating the issue.
• [ ] Ticket ownership: If you believe that this issue is out of scope, not your team's responsibility, or a Design System issue, comment and tag @platform-governance-team-members on your team channel in Slack to provide an explanation and who you believe is responsible. The Governance team will follow up.
• [ ] Close this ticket when the issue has been resolved or validated by your Product Owner.

Cartographers ACs

• After navigating using the MHV Home link, focus lands on H1 of MHV Home page
• After navigating using the Records link, focus lands on H1 of temporary Records page
• QA review
• a11y review

[brea11y]

I agree with the recommended updates and would move forward with these changes.

[radavis]

Example of how to set focus: https://github.com/department-of-veterans-affairs/vets-website/blob/16f26e0/src/applications/personalization/profile/components/personal-health-care-contacts/PersonalHealthCareContacts.jsx#L32-L40

[allanto-ah]

Cartographer QA reviewed completed. No issues