[SCREENREADER]: VAOS Scheduler - Certain alert messages should be announced to assistive technology

[1Copenut]

Description

I found two places the alert messages are being added to screens dynamically. These are potential stops in the schedule flow, and should be announced to assistive technology users. Screenshots and code recommendations attached below.

Point of Contact

VFS Point of Contact: Trevor

Acceptance Criteria

• As a screen reader user, I want the alert boxes to be announced when I try to select a VA provider that I cannot schedule an appoint with, AND
• I want to hear the alert box announced when I load the detail view for a pending appointment.
• I should hear these messages announced in all major screen readers (JAWS, NVDA, VoiceOver) in their preferred browsers.

Environment

• /vaos/new-appointment/va-facility
• /vaos/appointments/pending/

Possible Fixes (optional)

We could add an empty <div> to the pages listed in the Environment above, and add aria-live and aria-atomic attributes so the alerts will be read aloud. I created a public codepen to show the different behaviors for live regions: https://codepen.io/tpierce_402/pen/JjjXJXp

<div aria-atomic="true" aria-live="assertive">
  <!-- React <Alert /> component
</div>

WCAG or Vendor Guidance (optional)

• Error Identification: Understanding SC 3.3.1
• Info and Relationships: Understanding SC 1.3.1

Screenshots or Trace Logs

---

[jenniemc]

based on design changes, we don't have Pending pages anymore