chore(liveness): add a11y error label to alert icon (#4888)

* adding error label to alert icon * Create rich-keys-retire.md * updating props and snapshot * adding display text for error * defining label outside of switch statement * updating props * update props
aws-amplify · Jan 9, 2024 · da41cca · da41cca
1 parent 067e2b1
commit da41cca
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 7 deletions.
diff --git a/.changeset/rich-keys-retire.md b/.changeset/rich-keys-retire.md
@@ -0,0 +1,6 @@
+---
+"@aws-amplify/ui-react-liveness": patch
+"@aws-amplify/ui-react": patch
+---
+
+chore(liveness): adding a11y error label to alert icon in timeout message
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/displayText.ts b/packages/react-liveness/src/components/FaceLivenessDetector/displayText.ts
@@ -47,6 +47,7 @@ export type StreamDisplayText = {
 };
 
 export const defaultErrorDisplayText = {
+  errorLabelText: 'Error',
   timeoutHeaderText: 'Time out',
   timeoutMessageText:
     "Face didn't fit inside oval in time limit. Try again and completely fill the oval with face in it.",

diff --git a/...ages/react-liveness/src/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.tsx b/...ages/react-liveness/src/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.tsx
@@ -27,6 +27,7 @@ const renderToastErrorModal = (props: {
   const { error: errorState, displayText } = props;
 
   const {
+    errorLabelText,
     timeoutHeaderText,
     timeoutMessageText,
     faceDistanceHeaderText,
@@ -68,7 +69,7 @@ const renderToastErrorModal = (props: {
   return (
     <>
       <Flex className={LivenessClassNames.ErrorModal}>
-        <AlertIcon ariaHidden variation="error" />
+        <AlertIcon ariaLabel={errorLabelText} role="img" variation="error" />
         <Text
           className={LivenessClassNames.ErrorModalHeading}
           id="amplify-liveness-error-heading"

diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/utils/getDisplayText.ts b/packages/react-liveness/src/components/FaceLivenessDetector/utils/getDisplayText.ts
@@ -40,6 +40,7 @@ export function getDisplayText(
     cancelLivenessCheckText,
     clientHeaderText,
     clientMessageText,
+    errorLabelText,
     hintCanNotIdentifyText,
     hintCenterFaceText,
     hintConnectingText,
@@ -131,6 +132,7 @@ export function getDisplayText(
   };
 
   const errorDisplayText: Required<ErrorDisplayText> = {
+    errorLabelText,
     timeoutHeaderText,
     timeoutMessageText,
     faceDistanceHeaderText,

diff --git a/packages/react/src/primitives/Alert/AlertIcon.tsx b/packages/react/src/primitives/Alert/AlertIcon.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { ComponentClassName } from '@aws-amplify/ui';
-import { AlertVariations } from '../types';
+import { AlertVariations, ViewProps } from '../types';
 
 import {
   IconInfo,
@@ -11,7 +11,7 @@ import {
   useIcons,
 } from '../Icon';
 
-interface AlertIconProps {
+interface AlertIconProps extends Pick<ViewProps, 'role' | 'ariaLabel'> {
   variation?: AlertVariations;
   ariaHidden?: boolean;
 }
@@ -22,21 +22,43 @@ interface AlertIconProps {
 export const AlertIcon = ({
   variation,
   ariaHidden,
+  ariaLabel,
+  role,
 }: AlertIconProps): JSX.Element | null => {
   const icons = useIcons('alert');
   let icon;
   switch (variation) {
     case 'info':
-      icon = icons?.info ?? <IconInfo aria-hidden={ariaHidden} />;
+      icon = icons?.info ?? (
+        <IconInfo aria-hidden={ariaHidden} aria-label={ariaLabel} role={role} />
+      );
       break;
     case 'error':
-      icon = icons?.error ?? <IconError aria-hidden={ariaHidden} />;
+      icon = icons?.error ?? (
+        <IconError
+          aria-hidden={ariaHidden}
+          aria-label={ariaLabel}
+          role={role}
+        />
+      );
       break;
     case 'warning':
-      icon = icons?.warning ?? <IconWarning aria-hidden={ariaHidden} />;
+      icon = icons?.warning ?? (
+        <IconWarning
+          aria-hidden={ariaHidden}
+          aria-label={ariaLabel}
+          role={role}
+        />
+      );
       break;
     case 'success':
-      icon = icons?.success ?? <IconCheckCircle aria-hidden={ariaHidden} />;
+      icon = icons?.success ?? (
+        <IconCheckCircle
+          aria-hidden={ariaHidden}
+          aria-label={ariaLabel}
+          role={role}
+        />
+      );
       break;
   }