[a11y] Add screen reader indicator for invalid input (#1621)

* Add screen reader indicator for invalid input field * Update snapshot
curology · Jun 23, 2022 · a724a83 · a724a83
1 parent f150250
commit a724a83
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 30 deletions.
diff --git a/src/shared-components/field/__snapshots__/test.tsx.snap b/src/shared-components/field/__snapshots__/test.tsx.snap
@@ -264,6 +264,7 @@ exports[`<Field /> UI snapshots renders with errorMessage, hintMessage and hideM
     class="emotion-2 emotion-3"
   >
     <input
+      aria-invalid="true"
       class="emotion-4 emotion-5"
     />
     <div
@@ -279,10 +280,14 @@ exports[`<Field /> UI snapshots renders with errorMessage, hintMessage and hideM
         style="opacity: 1; max-height: 48px; transition-duration: 350ms; transition-property: max-height, opacity; transition-timing-function: ease-in-out;"
         type="error"
       >
-        <strong>
-          Uh Oh!
-        </strong>
-         Type again
+        <output
+          role="alert"
+        >
+          <strong>
+            Uh Oh!
+          </strong>
+           Type again
+        </output>
       </li>
     </ul>
   </div>

diff --git a/src/shared-components/field/index.tsx b/src/shared-components/field/index.tsx
@@ -79,6 +79,9 @@ export const Field: Field = ({
       />
     );
 
+  const { id } = inputChild.props as Record<'id', string | undefined>;
+  const isInvalid = showMessages && messagesType === 'error';
+
   return (
     <Style.FieldContainer>
       {!!label && (
@@ -95,11 +98,16 @@ export const Field: Field = ({
 
         {React.cloneElement(inputChild, {
           disabled,
+          'aria-invalid': isInvalid || undefined,
         })}
 
         {!!hintMessage && <Style.HintItem>{hintMessage}</Style.HintItem>}
 
-        <VerificationMessages messages={messages} type={messagesType} />
+        <VerificationMessages
+          messages={messages}
+          type={messagesType}
+          inputId={id}
+        />
       </Style.InputContainer>
     </Style.FieldContainer>
   );

diff --git a/src/shared-components/verificationMessages/__snapshots__/test.tsx.snap b/src/shared-components/verificationMessages/__snapshots__/test.tsx.snap
@@ -26,44 +26,60 @@ exports[`<VerificationMessages /> UI snapshot renders with default props and som
     style="opacity: 1; max-height: 48px; transition-duration: 350ms; transition-property: max-height, opacity; transition-timing-function: ease-in-out;"
     type="error"
   >
-    <strong>
-      Uh oh!
-    </strong>
-     This field is required
+    <output
+      role="alert"
+    >
+      <strong>
+        Uh oh!
+      </strong>
+       This field is required
+    </output>
   </li>
   <li
     class="emotion-2 emotion-3"
     style="opacity: 1; max-height: 48px; transition-duration: 350ms; transition-property: max-height, opacity; transition-timing-function: ease-in-out;"
     type="error"
   >
-    <strong>
-      Uh oh!
-    </strong>
-     Must be at least 3 characters
+    <output
+      role="alert"
+    >
+      <strong>
+        Uh oh!
+      </strong>
+       Must be at least 3 characters
+    </output>
   </li>
   <li
     class="emotion-2 emotion-3"
     style="opacity: 1; max-height: 48px; transition-duration: 350ms; transition-property: max-height, opacity; transition-timing-function: ease-in-out;"
     type="error"
   >
-    Must contain 1 number
-    , 
-    Must contain 1 symbol
+    <output
+      role="alert"
+    >
+      Must contain 1 number
+      , 
+      Must contain 1 symbol
+    </output>
   </li>
   <li
     class="emotion-2 emotion-3"
     style="opacity: 1; max-height: 48px; transition-duration: 350ms; transition-property: max-height, opacity; transition-timing-function: ease-in-out;"
     type="error"
   >
-    <strong>
-      1
-    </strong>
-     one
-    , 
-    <strong>
-      2
-    </strong>
-     two
+    <output
+      role="alert"
+    >
+      <strong>
+        1
+      </strong>
+       one
+      , 
+      <strong>
+        2
+      </strong>
+       two
+    </output>
   </li>
 </ul>
 `;
@@ -95,10 +111,14 @@ exports[`<VerificationMessages /> UI snapshot renders with non-default props 1`]
     style="opacity: 1; max-height: 48px; transition-duration: 350ms; transition-property: max-height, opacity; transition-timing-function: ease-in-out;"
     type="success"
   >
-    <strong>
-      Congrats!
-    </strong>
-     Your app was approved
+    <output
+      role="alert"
+    >
+      <strong>
+        Congrats!
+      </strong>
+       Your app was approved
+    </output>
   </li>
 </ul>
 `;
diff --git a/src/shared-components/verificationMessages/index.tsx b/src/shared-components/verificationMessages/index.tsx
@@ -14,6 +14,7 @@ export interface VerificationMessagesProps {
    * Centers the messages
    */
   centered?: boolean;
+  inputId?: string;
   /**
    * Object of key and React Node message pair. It also accepts an array of React Node as value
    */
@@ -32,6 +33,7 @@ export interface VerificationMessagesProps {
  */
 export const VerificationMessages: React.FC<VerificationMessagesProps> = ({
   centered = false,
+  inputId,
   messages = {},
   type = 'error',
 }) => {
@@ -54,7 +56,9 @@ export const VerificationMessages: React.FC<VerificationMessagesProps> = ({
           .map((key) => (
             <HelperTransition key={key}>
               <Style.MessageItem type={type}>
-                {formatMessage(messages[key])}
+                <output htmlFor={inputId} role="alert">
+                  {formatMessage(messages[key])}
+                </output>
               </Style.MessageItem>
             </HelperTransition>
           ))