adobe / adobe/react-spectrum

Announce Field error message for a focused field more reliably on Form submission

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

Description

### Provide a general summary of the feature here

Screen readers do not reliably announce changes to the `textContent` of elements referenced with `aria-describedby`. This means that when a user submits a focused Field containing an error using the Enter key to submit the Form, the error message that appears in HelpText does not announce reliably, which is a violation of [WCAG Success Criterion 4.1.3](https://www.w3.org/WAI/WCAG21/Understanding/status-messages).

I suggest using `LiveAnnouncer` to announce the `errorMessageString` politely when the Field contains focus.

### 🤔 Expected Behavior?

When a Field has focus, and Form validation updates its errorMessageString and/or validation state to be invalid, the screen reader should announce the Error message politely.

### 😯 Current Behavior

1. Open https://react-spectrum.adobe.com/react-spectrum/forms.html?#validation with a screen reader running.
2. Navigate to input field for one of the required Email field examples below.
3. Press Enter to try to submit an empty value.
4. Since it is the only invalid field in the form, focus stays on the input, the "Please fill out this field." error message displays, yet it is not announced.
5. Now enter an invalid value, like `someone@`, and press Enter to submit the form.
6. The error message, "Please enter a part following '@'. 'someone@' is incomplete." appears, but is not announced by the screen reader.

### 💁 Possible Solution

Use LiveAnnouncer to announce the errorMessage politely when a Field contains focus.

Something like:

```ts
React.useEffect(() => {
if (hasErrorMessage &&
(ref as RefObject)?.current?.contains(getActiveElement()) &&
typeof errorMessageString === 'string' &&
errorMessageString.length > 0) {
announce(errorMessageString, 'polite');
}
}, [errorMessageString, hasErrorMessage, ref]);
```

### 🔦 Context

Relates to Sev 1 issues raised in context of an audit to meet EAA requirements.

### 💻 Examples

_No response_

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.