fix(react): fix TextField not reporting validation errors to Screen R…

…eaders
wwnorton · Dec 15, 2023 · 3ee88fd · 3ee88fd
1 parent ce7e93d
commit 3ee88fd
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/packages/react/src/components/Field/FieldFeedback.tsx b/packages/react/src/components/Field/FieldFeedback.tsx
@@ -3,7 +3,7 @@ import { FieldFeedbackProps } from './types';
 
 /** A container for field feedback. Use to display content based on field input. */
 export const FieldFeedback: React.FunctionComponent<FieldFeedbackProps> = ({
-	errors,
+	errors = [],
 	liveErrors = true,
 	baseName = 'nds-field',
 	errorsClass = `${baseName}__errors`,
@@ -13,14 +13,15 @@ export const FieldFeedback: React.FunctionComponent<FieldFeedbackProps> = ({
 	id,
 }: FieldFeedbackProps) => {
 	const Errors = React.useMemo(() => {
-		if (!errors || !errors.length) return null;
+		const hidden = !errors.length;
 		return (
 			<ul
 				className={errorsClass}
 				id={errorsId}
 				aria-label="Errors"
 				aria-live={(liveErrors) ? 'assertive' : undefined}
 				aria-atomic={(liveErrors) ? 'true' : undefined}
+				aria-hidden={hidden}
 			>
 				{ errors.map((err) => <li key={err}>{ err }</li>) }
 			</ul>

diff --git a/packages/react/src/components/TextField/index.test.tsx b/packages/react/src/components/TextField/index.test.tsx
@@ -5,7 +5,7 @@ import {
 } from '@testing-library/react';
 import { TextField, TextFieldUncontrolled } from '.';
 
-test.afterEach(cleanup);
+test.afterEach.always(cleanup);
 
 const noop = () => {};	// eslint-disable-line @typescript-eslint/no-empty-function
 const defaultLabel = 'Text field';