Send Message A11Y Audit - Cancel button for CSV upload not announced to screen reader

[jonathanbobel]

Issue: Button Text Update for Upload Process Not Announced to Screen Readers

Problem:
During the SMS sending process, when uploading a CSV of phone numbers, the "Upload" button dynamically changes to "Cancel" immediately after clicking. This change:

1. Lasts for only 1–3 seconds during the upload process.
2. Not announced to screen readers, leaving assistive technology users unaware of the updated state.
3. May confuse users because the action is available for such a brief window, making it difficult to act upon.

This design limits the experience for screen reader users and may create confusion for all users, especially if they miss the temporary "Cancel" state.

---

Proposed Solution:

Replace the "Cancel" button for short upload processes (1–3 seconds) with a non-interactive status message, such as "Uploading...". For longer uploads, ensure the "Cancel" option is accessible and actionable.

---

Implementation Details:

1. For Short Upload Durations (1–3 Seconds)

• Replace the "Cancel" button with a non-interactive status message:

  <button aria-live="polite" aria-atomic="true" disabled>Uploading...</button>

• Use aria-live="polite" to announce the status change to screen readers.

2. For Longer Upload Durations

• Retain the "Cancel" button, but ensure it is accessible:
  • Add aria-live="polite" and aria-atomic="true" to announce the button's text change.
  • Use more descriptive text, such as "Cancel Upload," for clarity.

  <button aria-live="polite" aria-atomic="true">Cancel Upload</button>

3. Maintain Accessibility

• Ensure screen readers announce the updated button text or status message.
• Provide sufficient time for users to perceive and act on the "Cancel" option during longer uploads.
• Test with multiple assistive technologies (e.g., VoiceOver, NVDA, JAWS).

4. Focus Management

• Prevent unnecessary focus shifts during the upload process.
• Focus should remain on the button or automatically shift to the next logical element after the upload completes.

---

Steps to Implement:

1. Update the button text for the upload process:
   • Replace "Cancel" with "Uploading..." for short uploads.
   • Use "Cancel Upload" for longer uploads.
2. Add aria-live and aria-atomic attributes to dynamically update and announce the button's state.
3. Implement a timer to distinguish short uploads (1–3 seconds) from longer ones, applying the appropriate behavior.
4. Test thoroughly for usability and accessibility.

---

Acceptance Criteria:

• For short uploads (1–3 seconds), the button text changes to a non-interactive "Uploading..." status.
• For longer uploads, the button text changes to "Cancel Upload" and remains actionable for a meaningful amount of time.
• Screen readers announce all dynamic text changes (e.g., "Uploading..." or "Cancel Upload").
• Focus remains logical and intuitive throughout the upload process.
• The upload process is tested for accessibility with tools like VoiceOver, NVDA, and JAWS.
• Users understand the upload state clearly, regardless of interaction method.

---

References:

• WAI-ARIA Authoring Practices for Status Updates
• ARIA Live Regions Documentation
• WCAG 2.1 Success Criterion 4.1.3: Status Messages

---

This solution ensures the upload process is accessible and user-friendly, providing clear feedback and meaningful actions for all users.