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! 🎉

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

…red field

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! 🎉

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 and others added 4 commits June 4, 2025 20:23

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

b220aac

fix(accessibility): refactor announcement into useFormValidation

37f4597

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

680f81f

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

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

72b183c

…red field

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

majornista commented May 30, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

rspbot commented May 30, 2025

Uh oh!

Copilot AI left a comment

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

Uh oh!

Copilot AI Jun 4, 2025

Uh oh!

Copilot AI Jun 4, 2025

Uh oh!

rspbot commented Jun 4, 2025

Uh oh!

Uh oh!

	}, [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

Uh oh!

Conversation

majornista commented May 30, 2025

✅ 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!

Uh oh!