fix(accessibility): refactor announcement into useFormValidation

Author: Michael Jordan

packages/@react-aria/form/package.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@react-aria/interactions": "^3.25.1",
+    "@react-aria/live-announcer": "^3.4.2",
     "@react-aria/utils": "^3.29.0",
     "@react-stately/form": "^3.1.4",
     "@react-types/shared": "^3.29.1",

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

@@ -10,11 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
+import {announce} from '@react-aria/live-announcer';
 import {FormValidationState} from '@react-stately/form';
+import {getActiveElement, getOwnerDocument, useEffectEvent, useLayoutEffect} from '@react-aria/utils';
 import {RefObject, Validation, ValidationResult} from '@react-types/shared';
 import {setInteractionModality} from '@react-aria/interactions';
-import {useEffect} from 'react';
-import {useEffectEvent, useLayoutEffect} from '@react-aria/utils';
+import {useEffect, useRef} from 'react';
 
 type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 
@@ -25,12 +26,24 @@ interface FormValidationProps<T> extends Validation<T> {
 export function useFormValidation<T>(props: FormValidationProps<T>, state: FormValidationState, ref: RefObject<ValidatableElement | null> | undefined): void {
   let {validationBehavior, focus} = props;
 
+  let timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
+  function announceErrorMessage(errorMessage: string = ''): void {
+    clearTimeout(timeoutId.current!);
+    if (ref?.current &&
+      errorMessage !== '' &&
+      ref.current.contains(getActiveElement(getOwnerDocument(ref.current)))) {
+      timeoutId.current = setTimeout(() => announce(errorMessage, 'polite'), 250);
+    }
+  }
+
   // This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
   useLayoutEffect(() => {
     if (validationBehavior === 'native' && ref?.current && !ref.current.disabled) {
       let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(' ') || 'Invalid value.' : '';
       ref.current.setCustomValidity(errorMessage);
 
+      announceErrorMessage(errorMessage);
+
       // Prevent default tooltip for validation message.
       // https://bugzilla.mozilla.org/show_bug.cgi?id=605277
       if (!ref.current.hasAttribute('title')) {
@@ -56,11 +69,14 @@ export function useFormValidation<T>(props: FormValidationProps<T>, state: FormV
 
     // Auto focus the first invalid input in a form, unless the error already had its default prevented.
     let form = ref?.current?.form;
-    if (!e.defaultPrevented && ref && form && getFirstInvalidInput(form) === ref.current) {
-      if (focus) {
-        focus();
-      } else {
-        ref.current?.focus();
+    if (!e.defaultPrevented && ref && form) {
+      announceErrorMessage(ref?.current?.validationMessage || '');
+      if (getFirstInvalidInput(form) === ref.current) {
+        if (focus) {
+          focus();
+        } else {
+          ref.current?.focus();
+        }
       }
 
       // Always show focus ring.
@@ -86,6 +102,7 @@ export function useFormValidation<T>(props: FormValidationProps<T>, state: FormV
     input.addEventListener('change', onChange);
     form?.addEventListener('reset', onReset);
     return () => {
+      clearTimeout(timeoutId.current!);
       input!.removeEventListener('invalid', onInvalid);
       input!.removeEventListener('change', onChange);
       form?.removeEventListener('reset', onReset);

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

@@ -9,14 +9,13 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {announce} from '@react-aria/live-announcer';
 import {classNames, SlotProvider, useStyleProps} from '@react-spectrum/utils';
 import {Flex} from '@react-spectrum/layout';
-import {getActiveElement, mergeProps, useId} from '@react-aria/utils';
 import {HelpText} from './HelpText';
 import {Label} from './Label';
 import {LabelPosition, RefObject} from '@react-types/shared';
 import labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';
+import {mergeProps, useId} from '@react-aria/utils';
 import React, {ReactNode, Ref} from 'react';
 import {SpectrumFieldProps} from '@react-types/label';
 import {useFormProps} from '@react-spectrum/form';
@@ -64,19 +63,9 @@ export const Field = React.forwardRef(function Field(props: SpectrumFieldProps,
   } else {
     errorMessageString = errorMessage;
   }
-  let hasErrorMessage = !!errorMessageString && (isInvalid || validationState === 'invalid');
-  let hasHelpText = !!description || hasErrorMessage;
+  let hasHelpText = !!description || errorMessageString && (isInvalid || validationState === 'invalid');
   let contextualHelpId = useId();
 
-  React.useEffect(() => {
-    if (hasErrorMessage &&
-      (ref as RefObject<HTMLElement>)?.current?.contains(getActiveElement()) &&
-      typeof errorMessageString === 'string' &&
-      errorMessageString.length > 0) {
-      announce(errorMessageString, 'polite');
-    }
-  }, [errorMessageString, hasErrorMessage, ref]);
-
   let fallbackLabelPropsId = useId();
   if (label && contextualHelp && !labelProps.id) {
     labelProps.id = fallbackLabelPropsId;

yarn.lock

@@ -6245,6 +6245,7 @@ __metadata:
   resolution: "@react-aria/form@workspace:packages/@react-aria/form"
   dependencies:
     "@react-aria/interactions": "npm:^3.25.1"
+    "@react-aria/live-announcer": "npm:^3.4.2"
     "@react-aria/utils": "npm:^3.29.0"
     "@react-stately/form": "npm:^3.1.4"
     "@react-types/shared": "npm:^3.29.1"