Staging Review finding: Tab order for buttons flipped on appointment page

shiragoodman commented 2 weeks ago

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: Modernized Check-in Product: eCheck-in Feature: Mileage-only Travel Claim Submissions for VA Facilities that use Oracle Health EHR Software

Findings details

VA.gov Experience Standard - issue: User encounters content that doesn't match other content on VA.gov. VA.gov Experience Standard - category: Consistency Launch-blocking: No Design System review: No Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

On appointment-travel-claim/travel-mileage when viewing on desktop, the Back button appears to the left of the Continue button. But when tabbing through the page, the Continue button receives focus before the Back button. The Continue button does appear before the Back button in the DOM, it's just styled to appear second on desktop.

Typically, you would expect the tab order to match the visual order of the page --- top to bottom, left to right. This is the order of elements on subsequent pages of this flow (Yes/No buttons), and it's the order for similar Back/Continue buttons in the forms library. When the focus order does something unexpected, it takes an extra moment for a user to identify where they are on the page.

Link, screenshot or steps to recreate

![File a mileage only claim for today's appointment page, with the Back and Continue buttons at the bottom of the main content. A focus indicator is visible around the Back button.](https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/platform/working-with-vsp/vsp-collaboration-cycle/staging-review-images/Brian-75013-1.png?raw=true)

Recommended action

I see that on mobile the Continue button appears above the Back button, so the tab order and the visual presentation match there. But I think the ordering here may not make sense. While there's value in giving prominence to the Continue button, I think there's more value in a consistent behavior for keyboard users.

I'd be fine with either:

flipping Back and Continue in the DOM so that the visual order and the tab order align on all devices (and Continue comes second on mobile)
displaying Continue/Back stacked on desktop so that you don't have to style desktop specially to get the visual order right.

References

Accessibility Defect Severity: 3: Medium. Should be fixed in 1-3 sprints post-launch.
WCAG Success Criteria: WCAG 3.2.3 Consistent Navigation - Level AA
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.

loripusey commented 2 weeks ago

Hey team! Please add your planning poker estimate with Zenhub @brianseek @wullaski

brianseek commented 2 weeks ago

I thought this was going to be trickier but since we aren't using the button pair component on this page, it should be easier

brianseek commented 1 week ago

@benbrasso-agile6 / @zach-park This is merged and ready for validation locally, or with the screenshots in the PR: https://github.com/department-of-veterans-affairs/vets-website/pull/31815

zach-park commented 1 week ago

LGTM. Thank you!

brianseek commented 1 week ago

Thanks @zach-park! Closing

department-of-veterans-affairs / va.gov-team