From da41cca8c62fb2c77c1f251ebc5071b947416959 Mon Sep 17 00:00:00 2001
From: Emma Sauerborn <70536670+esauerbo@users.noreply.github.com>
Date: Tue, 9 Jan 2024 13:41:53 -0500
Subject: [PATCH] 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
---
 .changeset/rich-keys-retire.md                |  6 ++++
 .../FaceLivenessDetector/displayText.ts       |  1 +
 .../shared/FaceLivenessErrorModal.tsx         |  3 +-
 .../utils/getDisplayText.ts                   |  2 ++
 .../react/src/primitives/Alert/AlertIcon.tsx  | 34 +++++++++++++++----
 5 files changed, 39 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/rich-keys-retire.md

diff --git a/.changeset/rich-keys-retire.md b/.changeset/rich-keys-retire.md
new file mode 100644
index 00000000000..8d7ac58d610
--- /dev/null
+++ 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
index b94e760dd99..3e1622a228a 100644
--- 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/packages/react-liveness/src/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.tsx
index 2f12a5d7ecb..650205911f6 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.tsx
+++ b/packages/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
index 6504550e494..7369736a931 100644
--- 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
index 76681aa4ea6..9628d049a74 100644
--- 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;
   }