fix(accessibility): Field announce error message for focused field #8329

majornista · 2025-05-30T21:05:27Z

Closes #8328

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue #8328.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

Accessibility/SUSI/Adobe

Copilot

Pull Request Overview

This PR fixes the error message announcement behavior for focused fields by updating the logic in the Field component to announce errors via the live announcer. Key changes include:

Adding a useEffect in Field.tsx to announce error messages when the field is focused.
Renaming the help text flag to hasErrorMessage for clarity.
Adding the @react-aria/live-announcer dependency in package.json.
Extending InlineAlert stories with a new DynamicWithAriaLivePolite variant.

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
packages/@react-spectrum/label/src/Field.tsx	Updates error message announcement logic and variable naming
packages/@react-spectrum/label/package.json	Adds dependency for live announcer
packages/@react-spectrum/inlinealert/stories/InlineAlert.stories.tsx	Adds a new story variant showcasing aria-live behavior

packages/@react-spectrum/label/src/Field.tsx

rspbot · 2025-05-30T22:12:58Z

Build successful! 🎉

Copilot

Pull Request Overview

This PR improves accessibility by ensuring that error messages are announced when the associated field is focused.

Introduces an effect in Field.tsx to announce error messages when the field is active.
Adds a dependency on @react-aria/live-announcer in package.json.
Updates stories and tests to better handle error message rendering.

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

File	Description
packages/@react-spectrum/label/src/Field.tsx	Implements useEffect to announce error messages for focused fields.
packages/@react-spectrum/label/package.json	Adds the live announcer dependency to support new accessibility logic.
packages/@react-spectrum/inlinealert/stories/InlineAlert.stories.tsx	Introduces a new story variant with aria-live explicitly set.
packages/@react-spectrum/datepicker/test/DateField.test.js	Modifies test to access the first instance of the error message element.

Comments suppressed due to low confidence (2)

packages/@react-spectrum/datepicker/test/DateField.test.js:239

Verify that multiple occurrences of the 'Date unavailable.' text are expected. If only one error message should appear, consider updating this to use a more specific selector to avoid masking potential duplication issues.

expect(tree.getAllByText('Date unavailable.')[0]).toBeInTheDocument();

packages/@react-spectrum/label/src/Field.tsx:71

Ensure that the ref passed to Field is always a RefObject. The current cast to RefObject assumes a stable object ref; if callback refs are used, this might lead to unexpected behavior when announcing error messages.

React.useEffect(() => {

rspbot · 2025-06-03T00:17:15Z

Build successful! 🎉

rspbot · 2025-06-03T15:19:18Z

Build successful! 🎉

rspbot · 2025-06-03T15:23:20Z

Build successful! 🎉

rspbot · 2025-06-04T13:55:31Z

Build successful! 🎉

rspbot · 2025-06-04T19:12:28Z

Build successful! 🎉

Copilot

Pull Request Overview

This PR enhances error message announcements to improve accessibility by ensuring that error messages for focused fields are announced appropriately. Key changes include:

Removing an extraneous newline in Field.tsx.
Adding dependencies on @react-aria/live-announcer in both label and form packages to enable live announcements.
Updating tests and stories to reflect improved error announcement logic and ARIA live behaviors.
Refactoring useFormValidation in the form package to delay and trigger error message announcements on blur.

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/@react-spectrum/label/src/Field.tsx	Removed an unnecessary blank line.
packages/@react-spectrum/label/package.json	Added @react-aria/live-announcer dependency.
packages/@react-spectrum/inlinealert/stories/InlineAlert.stories.tsx	Introduced a new story variant with aria-live="polite".
packages/@react-spectrum/datepicker/test/DateField.test.js	Updated error message test to use getAllByText instead of getByText.
packages/@react-aria/form/src/useFormValidation.ts	Implemented delayed error announcement logic and adjusted event listeners.
packages/@react-aria/form/package.json	Added @react-aria/live-announcer dependency.

Copilot · 2025-06-04T20:24:10Z

packages/@react-aria/form/src/useFormValidation.ts

+        justBlurredRef.current
+      )
+    ) {
+      timeoutIdRef.current = setTimeout(() => announce(errorMessage, 'polite'), 250);


Consider extracting the hardcoded 250ms delay into a named constant to improve clarity and ease future adjustments.

Copilot · 2025-06-04T20:24:11Z

packages/@react-aria/form/src/useFormValidation.ts

      input!.removeEventListener('invalid', onInvalid);
      input!.removeEventListener('change', onChange);
      form?.removeEventListener('reset', onReset);
    };
-  }, [ref, onInvalid, onChange, onReset, validationBehavior]);
+  }, [justBlurredRef, onBlur, onChange, onInvalid, onReset, ref, validationBehavior]);


[nitpick] Since ref objects are stable, including justBlurredRef and ref in the dependency array may be unnecessary; consider removing them to simplify the dependencies.

Suggested change

}, [justBlurredRef, onBlur, onChange, onInvalid, onReset, ref, validationBehavior]);

}, [onBlur, onChange, onInvalid, onReset, validationBehavior]);

rspbot · 2025-06-04T20:32:39Z

Build successful! 🎉

rspbot · 2025-06-06T15:35:08Z

Build successful! 🎉

rspbot · 2025-06-06T16:11:50Z

Build successful! 🎉

rspbot · 2025-06-06T18:23:05Z

Build successful! 🎉

Co-authored-by: Copilot <[email protected]>

…red field

…blurred field 1. Improves announcement of validation error for just blurred field, by including accessible name in announcement for context. 2. Forgo announcement when the field receiving focus already has a validation error. It can be too much information. 3. Add alt text, "(valid)," to validationIcon, and include it in the `aria-describedby` for input for TextFieldBase. 4. fix tests after adding alt text to validationIcon

rspbot · 2025-06-10T16:00:38Z

Build successful! 🎉

…e fields when validationState is 'valid'

rspbot · 2025-06-10T22:53:28Z

Build successful! 🎉

majornista requested review from devongovett, reidbarber and Copilot May 30, 2025 21:05

majornista added enhancement New feature or request accessibility labels May 30, 2025

majornista force-pushed the Issue-8328-field-error-announcement branch from db1dec4 to 71e40dc Compare May 30, 2025 21:05

Copilot AI reviewed May 30, 2025

View reviewed changes

packages/@react-spectrum/label/src/Field.tsx Outdated Show resolved Hide resolved

majornista force-pushed the Issue-8328-field-error-announcement branch from 71e40dc to 3484b2f Compare May 30, 2025 21:20

majornista changed the title ~~fix(#8328): Field announce error message for focused field~~ fix(accessibility): Field announce error message for focused field May 30, 2025

majornista force-pushed the Issue-8328-field-error-announcement branch 3 times, most recently from fee6570 to af43a05 Compare May 30, 2025 22:04

majornista requested a review from Copilot May 30, 2025 22:18

Copilot AI reviewed May 30, 2025

View reviewed changes

majornista requested a review from Copilot June 3, 2025 15:08

This comment was marked as outdated.

Sign in to view

majornista force-pushed the Issue-8328-field-error-announcement branch from fd00b91 to fbd7356 Compare June 3, 2025 15:09

majornista requested a review from Copilot June 4, 2025 13:45

This comment was marked as outdated.

Sign in to view

majornista force-pushed the Issue-8328-field-error-announcement branch from 3573692 to bd37367 Compare June 4, 2025 13:45

majornista force-pushed the Issue-8328-field-error-announcement branch from f862c17 to 72b183c Compare June 4, 2025 20:23

majornista requested a review from Copilot June 4, 2025 20:23

Copilot AI reviewed Jun 4, 2025

View reviewed changes

majornista force-pushed the Issue-8328-field-error-announcement branch from 85261b4 to b495793 Compare June 6, 2025 16:02

majornista force-pushed the Issue-8328-field-error-announcement branch from b495793 to 2fb28d7 Compare June 6, 2025 18:14

majornista and others added 5 commits June 10, 2025 15:51

fix(accessibility): Field announce error message for focused field

3289789

fix(accessibility): refactor announcement into useFormValidation

bf1384c

Update packages/@react-aria/form/src/useFormValidation.ts

66a35b9

Co-authored-by: Copilot <[email protected]>

fix(accessibility): add announcement of error message for a just blur…

9462223

…red field

majornista force-pushed the Issue-8328-field-error-announcement branch from 2fb28d7 to 4acca66 Compare June 10, 2025 15:51

majornista added 2 commits June 10, 2025 18:39

fix(accessibility): add aria-describedby to first segment in Date/Tim…

a235045

…e fields when validationState is 'valid'

Merge branch 'main' into Issue-8328-field-error-announcement

c0ac217

	}, [justBlurredRef, onBlur, onChange, onInvalid, onReset, ref, validationBehavior]);
	}, [onBlur, onChange, onInvalid, onReset, validationBehavior]);

fix(accessibility): Field announce error message for focused field #8329

Are you sure you want to change the base?

fix(accessibility): Field announce error message for focused field #8329

Conversation

majornista commented May 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

rspbot commented May 30, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

rspbot commented Jun 3, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

rspbot commented Jun 3, 2025

Uh oh!

rspbot commented Jun 3, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

rspbot commented Jun 4, 2025

Uh oh!

rspbot commented Jun 4, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jun 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jun 4, 2025

Choose a reason for hiding this comment

Uh oh!

rspbot commented Jun 4, 2025

Uh oh!

rspbot commented Jun 6, 2025

Uh oh!

rspbot commented Jun 6, 2025

Uh oh!

rspbot commented Jun 6, 2025

Uh oh!

rspbot commented Jun 10, 2025

Uh oh!

rspbot commented Jun 10, 2025

Uh oh!

Uh oh!

majornista commented May 30, 2025 •

edited

Loading