adobe / adobe/react-spectrum

TextField validationState change to valid should cause an announcement to screen reader

Open
#4,083 0 comments 0 reactions 0 assignees View on GitHub
accessibility TextField
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

# 🐛 Bug Report

When validationState changes to valid the icon changes from the error to a the checkmark. There should be a corresponding screen reader announcement for this change in order to support 4.1.3- https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html

## 🤔 Expected Behavior

An announcement should occur (perhaps simply valid - or more likely something custom created by the developer such as "Password rule met" or "passwords match") when the state changes from invalid to valid.
## 😯 Current Behavior

Nothing happens

## 💁 Possible Solution

## 🔦 Context

## 💻 Code Sample

https://react-spectrum.adobe.com/react-spectrum/TextField.html#validation

Turn on screen reader - navigate to the field. Make the email address invalid then correct it. There is no announcement when corrected.
In this example there is also no announcement when it becomes invalid but if there were an errorMessage defined there would be - and an error message is required for https://www.w3.org/WAI/WCAG21/Understanding/error-identification

## 🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| react-spectrum | 3
| Browser | all
| Operating System | all

## 🧢 Your Company/Team

## 🕷 Tracking Issue (optional)

Contributor guide

Open the contributing guide

Research direction

Start with the TextField validation example in the linked documentation and reproduce the transition from invalid to valid with a screen reader. Trace the TextField validation behavior and its existing error announcement path. Done means a custom or default announcement occurs when validationState changes to valid, without regressing invalid-state announcements.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.