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".
[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.
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
Next Steps for the VFS Team
@platform-governance-team-members
with any questions or to get help validating the issue.@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.