Staging Review finding: Buttons with opposite purposes have the same `aria-label`

[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 can't perceive an element. VA.gov Experience Standard - category: Comprehension Launch-blocking: Yes Design System review: No Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

When cancelling a pending appointment, two buttons appear on the page: "Yes, cancel request" and "No, do not cancel." Both of these buttons have the same aria-label, "Cancel appointment," meaning both will be announced to screen reader users as "Cancel appointment." Screen reader users won't be able to distinguish between them, meaning:

1. If they do want to cancel their appointment, they have to get lucky and pick the correct button.
2. If they don't want to cancel their appointment, they don't have a perceivable route to do that.

Link, screenshot or steps to recreate

This is on the page that's displayed when you select a pending appointment and then click "Cancel request." The two buttons are coded as: ``` Yes, cancel request ``` and ``` No, do not cancel ```

Recommended action

I'm guessing this is a copy/paste error. For these two buttons, the visible text label is fine --- no need for an aria-label at all. My recommendation would be to remove the aria-label entirely on both.

References

• Accessibility Defect Severity: 1: Critical. Must be fixed before launch.
• WCAG Success Criteria: WCAG 4.1.2 Name, Role, Value - Level A
• Modality: Screen reader
• 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 I'm good with Brian's rec to remove the aria labels from the buttons he noted.

[ldelacosta]

Appointments FE ticket for reference #88523

[ldelacosta]

@shiragoodman - We addressed the ticket in 88523. Let me know if you find additional issues. Thanks!

[shiragoodman]

@briandeconinck FYI

@ldelacosta do you want our help validating the fix?

[ldelacosta]

@shiragoodman - we have validated on our end. If you want to double check, feel free.

[outerpress]

This one is complete, we removed the aria labels. Closing (please reopen if I missed anything!)