fix(liveness): add accessibility attributes to face liveness error mo…

…dal (#4803) * adding aria-labelledby and role attributes to liveness error modal * make id generic error * updating test * Create plenty-snakes-try.md * updating docs snapshots * restoring sitemap * updating snapshots again * removing sitemap once again * update aria attributes * update snapshots * update test * making ids more descriptive * update test * removing div * move description down a level * change id to say message * fix tests * using Text * Update .changeset/plenty-snakes-try.md Co-authored-by: Scott Rees <[email protected]> --------- Co-authored-by: Scott Rees <[email protected]>
aws-amplify · Dec 12, 2023 · a1b4c54 · a1b4c54
1 parent 38bae5e
commit a1b4c54
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 3 deletions.
diff --git a/.changeset/plenty-snakes-try.md b/.changeset/plenty-snakes-try.md
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react-liveness": patch
+---
+
+fix(liveness): add a11y tags to `FaceLivenessErrorModal`
diff --git a/...ages/react-liveness/src/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.tsx b/...ages/react-liveness/src/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.tsx
@@ -69,9 +69,14 @@ const renderToastErrorModal = (props: {
     <>
       <Flex className={LivenessClassNames.ErrorModal}>
         <AlertIcon ariaHidden variation="error" />
-        <Text className={LivenessClassNames.ErrorModalHeading}>{heading}</Text>
+        <Text
+          className={LivenessClassNames.ErrorModalHeading}
+          id="amplify-liveness-error-heading"
+        >
+          {heading}
+        </Text>
       </Flex>
-      {message}
+      <Text id="amplify-liveness-error-message">{message}</Text>
     </>
   );
 };
@@ -116,7 +121,11 @@ export const FaceLivenessErrorModal: React.FC<FaceLivenessErrorModalProps> = (
 
   return (
     <Overlay className={LivenessClassNames.OpaqueOverlay}>
-      <Toast>
+      <Toast
+        aria-labelledby="amplify-liveness-error-heading"
+        aria-describedby="amplify-liveness-error-message"
+        role="alertdialog"
+      >
         {children}
         <Flex justifyContent="center">
           <Button variation="primary" type="button" onClick={onRetry}>

diff --git a/...ness/src/components/FaceLivenessDetector/shared/__tests__/FaceLivenessErrorModal.test.tsx b/...ness/src/components/FaceLivenessDetector/shared/__tests__/FaceLivenessErrorModal.test.tsx
@@ -43,6 +43,26 @@ describe('FaceLivenessErrorModal', () => {
     expect(screen.getByText(timeoutMessageText)).toBeInTheDocument();
   });
 
+  it('should render the timeout message with proper accessibility attributes', () => {
+    const errorState = LivenessErrorState.TIMEOUT;
+    render(
+      <FaceLivenessErrorModal onRetry={() => {}}>
+        {renderErrorModal({ errorState })}
+      </FaceLivenessErrorModal>
+    );
+
+    const timeoutModal = screen.getByRole('alertdialog');
+    expect(timeoutModal).toBeInTheDocument();
+    expect(timeoutModal).toHaveAttribute(
+      'aria-describedby',
+      'amplify-liveness-error-message'
+    );
+    expect(timeoutModal).toHaveAttribute(
+      'aria-labelledby',
+      'amplify-liveness-error-heading'
+    );
+  });
+
   it('should render the runtime error message appropriately', () => {
     const errorState = LivenessErrorState.RUNTIME_ERROR;
     render(