[COGNITION] 508-defect-3: Cancel appointment buttons SHOULD have an accessible label

[1Copenut]

508-defect-3

Feedback framework

• ❗️ Must for if the feedback must be applied
• ⚠️ Should if the feedback is best practice
• ✔️ Consider for suggestions/enhancements

Point of Contact

VFS Point of Contact: Trevor

User Story or Problem Statement

As a screen reader user, I want to hear a cancel appointment, button announcement that explains clearly what appointment I am canceling. I may be navigating by form elements or buttons and hearing "Cancel appointment, button" over and over requires me to check headings for each appointment so I don't cancel the wrong one.

/cc @peggygannon because there's a content component that she's best suited to advise on.

Details

The upcoming and express care Cancel appointment buttons have incomplete aria-labels. We should improve the aria-label value for upcoming appointments and add a meaningful aria-label for Express Care appointments.

Acceptance Criteria

• [ ] All Cancel appointment buttons have an aria-label
• [ ] aria-label text clearly answers the question "Which appointment am I canceling"
• [ ] Zero axe browser scan violations are detected

Definition of done

1. Review and acknowledge feedback.
2. Fix and/or document decisions made.
3. Accessibility specialist will close ticket after reviewing documented decisions / validating fix.

Environment

• https://staging.va.gov/health-care/schedule-view-va-appointments/appointments/
• https://staging.va.gov/health-care/schedule-view-va-appointments/appointments/express-care

Code Fix (if known)

! Upcoming Appointments

<button
- aria-label="Cancel appointment"
+ aria-label="Cancel appointment on Monday, November 2, 2020"
  class="vaos-appts__cancel-btn va-button-link vads-u-margin--0 vads-u-flex--0"
>
  Cancel appointment
  <span class="sr-only"> on November 2, 2020</span>
</button>

! Express Care Appointments

<button
- aria-label="Cancel appointment"
+ aria-label="Cancel appointment for Express Care medication or prescription question"
  class="vaos-appts__cancel-btn va-button-link vads-u-margin--0 vads-u-flex--0"
>Cancel appointment</button>

WCAG or Vendor Guidance (optional)

• Info and Relationships: Understanding SC 1.3.1

Screenshots or Trace Logs

[peggygannon]

@jbalboni here's what I recommend use for the Cancel links for the different type of "appts). (So aria label for Express Care would be something like "Cancel Express Care request for neck pain")

cc @rtwell @outerpress, any concerns?

for Appt requests: [Cancel appointment request] for Direct schedule: [Cancel appointment] for Express care: [Cancel Express Care request]

[outerpress]

Those all seem clear to me @peggygannon

[jbalboni]

@1Copenut This should be up on staging now

[1Copenut]

@jbalboni I spot checked this on staging, and the accessible labels are 💯 Moving to close.