[COGNITION]: VAOS Scheduler - Edit links would benefit from aria-labels

[1Copenut]

Description

A number of pages have Edit links that do not provide full context for assistive tech. Users must listen to nearby text/headings to understand what they are editing. We can improve this by adding aria-labels to each edit link.

I've bundled this as a single issue ticket because it's more expedient to fix all instances than have several tickets that are closely related, but could drift if fixed at different times.

Point of Contact

VFS Point of Contact: Trevor

Acceptance Criteria

• As a screen reader user, I want to hear explicit labels like "Edit phone number" when Edit buttons have keyboard or virtual cursor focus.
• As a screen reader user, I want to hear these longer labels read aloud when I queue them up in my Links menu (available in all major screen readers)
• As a visual user, I do not want to see any difference in the page layout

Environment

Listing all page URLs affected:

• /vaos/new-appointment/community-care-provider
• /vaos/new-appointment/review
• /vaos/appointments/confirmed
• /vaos/appointments/pending

Possible Fixes (optional)

I've specced an aria-label for a pending appointment. This is the format to add an aria-label regardless of button or link.

<a
  aria-label="View details of Audiology (hearing support)
  class="vads-u-font-weight--bold vads-u-text-decoration--none" 
  href="/vaos/appointments/pending/8a48dea06c84a667016c867b1ac00011"
>
  View details
  <i aria-hidden="true" class="fas fa-angle-right"></i>
</a>

WCAG or Vendor Guidance (optional)

• Info and Relationships: Understanding SC 1.3.1

Screenshots or Trace Logs

---

---

[jbalboni]

Based on some design changes, I think we only have this issue on the review page now.