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.
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
- Open https://react-spectrum.adobe.com/react-spectrum/forms.html?#validation with a screen reader running.
- Navigate to input field for one of the required Email field examples below.
- Press Enter to try to submit an empty value.
- 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.
- Now enter an invalid value, like
someone@
, and press Enter to submit the form. - 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:
React.useEffect(() => {
if (hasErrorMessage &&
(ref as RefObject<HTMLElement>)?.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