Send Message A11Y Audit - Make Scheduling SMS more accessible

Issue: Redesign SMS Scheduling Section for Improved Accessibility and Usability

Problem:
The current SMS scheduling interface is difficult to use and inaccessible for some users:

The "Now" and "Later" options are radio buttons, with "Later" showing 4 separate buttons for "Later Today," "Tomorrow," and the next two days.
If a user selects a "Later" option, radio buttons for every hour of the selected day appear, creating a cluttered and overwhelming interface.
Screen reader users must navigate through an excessive number of elements, which is cumbersome and inefficient.
The design is not scalable for users scheduling farther into the future or with more granular timing requirements.

Proposed Solution:

Redesign the SMS scheduling section to use a more streamlined and accessible approach:

Replace the "Now" and "Later" radio buttons with a single toggle or radio group:
- Now: Sends the message immediately.
- Later: Displays dropdowns for date and time selection.
Use dropdown menus to replace the buttons for date and time selection:
- Dropdown 1: Select a date (e.g., "Today," "Tomorrow," or a Later than that).
- Dropdown 2: Select a time (e.g., hours of the day, since that is when the service runs).

Implementation Details:

1. Simplify the Radio Group

Replace the "Now" and multiple "Later" buttons with a single radio group or toggle:

 <fieldset>
   <legend>When should Notify send these messages?</legend>
   <label>
     <input type="radio" name="schedule" value="now" checked>
     Now
   </label>
   <label>
     <input type="radio" name="schedule" value="later">
     Later
   </label>
 </fieldset>

2. Add Accessible Dropdowns for Date and Time

If "Later" is selected, display dropdowns:

 <div id="schedule-later-options" hidden>
   <label for="schedule-date">Select a date:</label>
   <select id="schedule-date" name="schedule-date">
     <option value="today">Today</option>
     <option value="tomorrow">Tomorrow</option>
     <option value="next-day">The Next Day</option>
     <option value="next-next-day">The Next Next Day</option>
     <!-- Additional days til one week from today -->
   </select>

   <label for="schedule-time">Select a time:</label>
   <select id="schedule-time" name="schedule-time">
     <option value="08:00">8:00am America/New York</option>
     <option value="09:00">9:00am America/New York</option>
     <option value="10:00">10:00am America/New York</option>
     <!-- Additional times -->
   </select>
 </div>

3. Manage Focus and Visibility

When "Later" is selected, dynamically display the dropdowns and move focus to the first dropdown (#schedule-date).
Use aria-live="polite" to announce changes in the interface to screen readers.

4. Test for Accessibility

Ensure dropdowns are fully navigable by keyboard.
Validate that screen readers announce all options correctly.

Steps to Implement:

Replace the current radio buttons and buttons with a simplified "Now" or "Later" radio group.
Add conditional dropdowns for selecting a date and time when "Later" is chosen.
Manage focus and visibility dynamically using JavaScript.
Test the redesign for usability and accessibility with screen readers and keyboard navigation.

Acceptance Criteria:

[ ] The "Now" and "Later" radio group replaces the current scheduling buttons.
[ ] If "Later" is selected, dropdowns for date and time are displayed dynamically.
[ ] Dropdowns are accessible via keyboard and screen readers.
[ ] Focus moves appropriately when interacting with the "Later" option.
[ ] The entire interface adheres to WCAG 2.1 Level AA standards.
[ ] Usability is validated with internal testing or user feedback.
[ ] Tests are written and pass for Javascript and Python

References:

This redesign will create a more intuitive and accessible scheduling interface, reducing clutter and improving the user experience for all users.

GSA / notifications-admin

Send Message A11Y Audit - Make Scheduling SMS more accessible #2139