Appointment List Re-design - Update details link text (Accessibility)

[ldelacosta]

Description

Product and Design team are looking to update the appointment list to help the Veteran better understand the details for their appointment

---

Acceptance Criteria

Background: the va_online_scheduling_appointment_list toggle is on

Problem found: The aria-labels that screenreaders use to announce the details links don't contain enough information to identify the appointment. For some users, tabbing will be the main interaction with the list.

Current aria-label text example: Details for appointment on Thursday, February 16 9:00 a.m.

Proposed solution

• [ ] Upcoming and past appointments details link are announced as Details for [canceled] [modality] [type of care] appointment at [date and time]

• See examples here

• [ ] Requests details links are announced as Details for [canceled] request for a [type of care] [modality|community care] appointment

• Examples TBA

Design Assets

All spec copy is FPO. Use copy in copy doc.

Screenreader specs:

• Upcoming
• Past
• Pending

Definition of Done

• [ ] All acceptance criteria are met
• [ ] Documentation is updated

---

[outerpress]

@ldelacosta good to go on this one 👍

[vbahinwillit]

Just and FYI. Everything is now working as expect. The appointment detail information is read when tabbing to the 'Details' link. There is some unexplained behavior when navigating to the columns within the row that may be related to the use of the 'va-link' web component. This behavior should be discussed with the 508 team.

[ldelacosta]

@outerpress @Cieramaddox - ready to be tested in staging. Please reach out if you have any issues. Thanks!

[outerpress]

@ldelacosta this is working perfectly! So much easier to navigate VO with tab now

[ldelacosta]

No new issues reported. Closing out the ticket.