fix(input): add aria-invalid when an input has an error (#379)

freenowtech · Sep 29, 2023 · ec26782 · ec26782
1 parent 17dbbda
commit ec26782
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/src/components/Input/InnerInput.tsx b/src/components/Input/InnerInput.tsx
@@ -44,6 +44,7 @@ const InnerInput = forwardRef<HTMLDivElement, InputWrapperProps & InputProps>(
                         size={size}
                         hasValue={hasValue || hasUncontrolledValue}
                         onChange={handleChange}
+                        aria-invalid={rest.error}
                     />
                     {label && (
                         <BoxedInputLabel htmlFor={id} size={size}>
@@ -64,6 +65,7 @@ const InnerInput = forwardRef<HTMLDivElement, InputWrapperProps & InputProps>(
                         size={size}
                         hasValue={hasValue || hasUncontrolledValue}
                         onChange={handleChange}
+                        aria-invalid={rest.error}
                     />
                     {label && (
                         <BottomLinedInputLabel htmlFor={id} size={size}>

diff --git a/src/components/Input/__snapshots__/Input.spec.tsx.snap b/src/components/Input/__snapshots__/Input.spec.tsx.snap
@@ -193,6 +193,7 @@ exports[`Input variant "bottom-lined" renders the error state 1`] = `
   class="c0"
 >
   <input
+    aria-invalid="true"
     class="c1 c2"
     id="random"
     type="text"
@@ -347,6 +348,7 @@ exports[`Input variant "bottom-lined" renders the error state with label and pla
   class="c0"
 >
   <input
+    aria-invalid="true"
     class="c1 c2"
     id="random"
     placeholder="FREE NOW"
@@ -1054,6 +1056,7 @@ exports[`Input variant "boxed" renders the error state 1`] = `
   class="c0"
 >
   <input
+    aria-invalid="true"
     class="c1 c2"
     id="random"
     type="text"
@@ -1208,6 +1211,7 @@ exports[`Input variant "boxed" renders the error state with label and placeholde
   class="c0"
 >
   <input
+    aria-invalid="true"
     class="c1 c2"
     id="random"
     placeholder="FREE NOW"