added aria-invalid

cerner · Nov 30, 2023 · d7ec175 · d7ec175
1 parent b4468b1
commit d7ec175
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/packages/terra-form-field/CHANGELOG.md b/packages/terra-form-field/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added `aria-invalid` for invalid entry.
+
 ## 4.31.0 - (November 13, 2023)
 
 * Changed

diff --git a/packages/terra-form-field/src/Field.jsx b/packages/terra-form-field/src/Field.jsx
@@ -170,7 +170,7 @@ const Field = (props) => {
     if ((required || isInvalid) && child && (child.type.isInput || child.type.isSelect || child.type.isTextarea)) {
       return React.cloneElement(child, {
         ...required && { required: true },
-        ...isInvalid && { isInvalid: true },
+        ...isInvalid && { isInvalid: true, 'aria-invalid': true },
       });
     }
     return child;

diff --git a/packages/terra-form-field/tests/jest/__snapshots__/Field.test.jsx.snap b/packages/terra-form-field/tests/jest/__snapshots__/Field.test.jsx.snap
@@ -1562,11 +1562,13 @@ exports[`should render an invalid and required field with a Select 1`] = `
       </label>
     </div>
     <Select
+      aria-invalid={true}
       isInvalid={true}
       key=".0"
       required={true}
     >
       <select
+        aria-invalid={true}
         invalid="true"
         required={true}
       />
@@ -1707,11 +1709,13 @@ exports[`should render an invalid and required field with a Textarea 1`] = `
       </label>
     </div>
     <Textarea
+      aria-invalid={true}
       isInvalid={true}
       key=".0"
       required={true}
     >
       <textarea
+        aria-invalid={true}
         invalid="true"
         required={true}
       />
@@ -1852,11 +1856,13 @@ exports[`should render an invalid and required field with an Input 1`] = `
       </label>
     </div>
     <Input
+      aria-invalid={true}
       isInvalid={true}
       key=".0"
       required={true}
     >
       <input
+        aria-invalid={true}
         invalid="true"
         required={true}
       />
@@ -1991,10 +1997,12 @@ exports[`should render an invalid field with a Select 1`] = `
       </label>
     </div>
     <Select
+      aria-invalid={true}
       isInvalid={true}
       key=".0"
     >
       <select
+        aria-invalid={true}
         invalid="true"
       />
     </Select>
@@ -2128,10 +2136,12 @@ exports[`should render an invalid field with an Input 1`] = `
       </label>
     </div>
     <Input
+      aria-invalid={true}
       isInvalid={true}
       key=".0"
     >
       <input
+        aria-invalid={true}
         invalid="true"
       />
     </Input>
@@ -2265,10 +2275,12 @@ exports[`should render an invalid field with an Textarea 1`] = `
       </label>
     </div>
     <Textarea
+      aria-invalid={true}
       isInvalid={true}
       key=".0"
     >
       <textarea
+        aria-invalid={true}
         invalid="true"
       />
     </Textarea>