Staging Review finding: Focus management doesn't match other parts of the product

[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: Appointments Product: Appointments Feature: Appointment Details Redesign

Findings details

VA.gov Experience Standard - issue: User encounters design components or patterns 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 starting the flow to cancel a pending appointment but then deciding you don't actually want to cancel it after all ("Cancel request" button, then "No, do not cancel" button), keyboard focus goes to the MHV nav menu rather than the H1 for the next page. This is different from other parts of the product, which consistently send focus to the H1.

For keyboard-only users, that means they have to do some extra tabbing to get back to where they want to be. For screen reader users, focus going to the nav menu means they don't immediately get the context of where they are now.

Link, screenshot or steps to recreate

Steps to reproduce: 1. When logged in with a test user, navigate to [/appointments/pending](https://staging.va.gov/my-health/appointments/pending). 2. Navigate to the details page for a pending appointment. 3. Press [tab] until keyboard focus lands on "Cancel request." 4. Press [enter] to activate the button. 5. Press [tab] until keyboard focus lands on "No, do not cancel." Note that when you started tabbing, your first tab stop was in the content beneath the H1. 6. Press [enter] to activate the button. 7. Press [tab] one time. Note that your first tab stop is the "My HealtheVet" link in the nav menu, rather than in the content beneath the H1.

Recommended action

Match the other interactions for this product --- when going to a new page, focus goes to the H1 using tabindex="-1".

References

• Accessibility Defect Severity: 3: Medium. Should be fixed in 1-3 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

• [x] 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.
• [x] 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.
• [x] Close this ticket when the issue has been resolved or validated by your Product Owner.

[outerpress]

@ldelacosta no issues with this one, I'm fine going to dev with Brian's rec

[ldelacosta]

Appointments Team will address the work in #88817

[outerpress]

@ldelacosta #88817 looks good, you can close this one