@aws-amplify/ui-react-liveness 3.0.5 → 3.0.6

package/dist/esm/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.mjs

@@ -125,9 +125,9 @@ const LivenessCameraModule = (props) => {
             setAspectRatio(videoRef.current.videoWidth / videoRef.current.videoHeight);
         }
     }, [send, videoRef, isCameraReady, isMobileScreen]);
-    const photoSensitivtyWarning = React__default.useMemo(() => {
+    const photoSensitivityWarning = React__default.useMemo(() => {
         return (React__default.createElement(View, { style: { visibility: isStartView ? 'visible' : 'hidden' } },
-            React__default.createElement(PhotosensitiveWarning, { headingText: instructionDisplayText.photosensitivyWarningHeadingText, bodyText: instructionDisplayText.photosensitivyWarningBodyText, infoText: instructionDisplayText.photosensitivyWarningInfoText })));
+            React__default.createElement(PhotosensitiveWarning, { bodyText: instructionDisplayText.photosensitivityWarningBodyText, headingText: instructionDisplayText.photosensitivityWarningHeadingText, infoText: instructionDisplayText.photosensitivityWarningInfoText, labelText: instructionDisplayText.photosensitivityWarningLabelText })));
     }, [PhotosensitiveWarning, instructionDisplayText, isStartView]);
     const handleMediaPlay = () => {
         setIsCameraReady(true);
@@ -161,7 +161,7 @@ const LivenessCameraModule = (props) => {
     }
     const isRecordingOnMobile = isMobileScreen && !isStartView && !isWaitingForCamera && isRecording;
     return (React__default.createElement(React__default.Fragment, null,
-        photoSensitivtyWarning,
+        photoSensitivityWarning,
         React__default.createElement(Flex, { className: classNames(LivenessClassNames.CameraModule, isRecordingOnMobile && `${LivenessClassNames.CameraModule}--mobile`), "data-testid": testId, gap: "zero" },
             !isCameraReady && centeredLoader,
             React__default.createElement(View, { as: "canvas", ref: freshnessColorRef, className: LivenessClassNames.FreshnessCanvas, hidden: true }),

package/dist/esm/components/FaceLivenessDetector/displayText.mjs

@@ -15,24 +15,15 @@ const defaultErrorDisplayText = {
     tryAgainText: 'Try again',
 };
 const defaultLivenessDisplayText = {
-    hintCenterFaceText: 'Center your face',
-    startScreenBeginCheckText: 'Start video check',
-    photosensitivyWarningHeadingText: 'Photosensitivity warning',
-    photosensitivyWarningBodyText: 'This check flashes different colors. Use caution if you are photosensitive.',
-    photosensitivyWarningInfoText: 'Some people may experience may experience epileptic seizures when exposed to colored lights. Use caution if you, or anyone in your family, have an epileptic condition.',
-    goodFitCaptionText: 'Good fit',
-    goodFitAltText: "Ilustration of a person's face, perfectly fitting inside of an oval.",
-    tooFarCaptionText: 'Too far',
-    tooFarAltText: "Illustration of a person's face inside of an oval; there is a gap between the perimeter of the face and the boundaries of the oval.",
     cameraMinSpecificationsHeadingText: 'Camera does not meet minimum specifications',
     cameraMinSpecificationsMessageText: 'Camera must support at least 320*240 resolution and 15 frames per second.',
     cameraNotFoundHeadingText: 'Camera is not accessible.',
     cameraNotFoundMessageText: 'Check that a camera is connected and there is not another application using the camera. You may have to go into settings to grant camera permissions and close out all instances of your browser and retry.',
-    retryCameraPermissionsText: 'Retry',
-    waitingCameraPermissionText: 'Waiting for you to allow camera permission.',
     a11yVideoLabelText: 'Webcam for liveness check',
     cancelLivenessCheckText: 'Cancel Liveness check',
-    recordingIndicatorText: 'Rec',
+    goodFitCaptionText: 'Good fit',
+    goodFitAltText: "Ilustration of a person's face, perfectly fitting inside of an oval.",
+    hintCenterFaceText: 'Center your face',
     hintMoveFaceFrontOfCameraText: 'Move face in front of camera',
     hintTooManyFacesText: 'Ensure only one face is in front of camera',
     hintFaceDetectedText: 'Face detected',
@@ -45,6 +36,20 @@ const defaultLivenessDisplayText = {
     hintIlluminationTooDarkText: 'Move to brighter area',
     hintIlluminationNormalText: 'Lighting conditions normal',
     hintHoldFaceForFreshnessText: 'Hold still',
+    photosensitivityWarningBodyText: 'This check flashes different colors. Use caution if you are photosensitive.',
+    photosensitivityWarningHeadingText: 'Photosensitivity warning',
+    photosensitivityWarningInfoText: 'Some people may experience epileptic seizures when exposed to colored lights. Use caution if you, or anyone in your family, have an epileptic condition.',
+    photosensitivityWarningLabelText: 'More information about photosensitivity',
+    photosensitivyWarningBodyText: 'This check flashes different colors. Use caution if you are photosensitive.',
+    photosensitivyWarningHeadingText: 'Photosensitivity warning',
+    photosensitivyWarningInfoText: 'Some people may experience epileptic seizures when exposed to colored lights. Use caution if you, or anyone in your family, have an epileptic condition.',
+    photosensitivyWarningLabelText: 'More information about photosensitivity',
+    retryCameraPermissionsText: 'Retry',
+    recordingIndicatorText: 'Rec',
+    startScreenBeginCheckText: 'Start video check',
+    tooFarCaptionText: 'Too far',
+    tooFarAltText: "Illustration of a person's face inside of an oval; there is a gap between the perimeter of the face and the boundaries of the oval.",
+    waitingCameraPermissionText: 'Waiting for you to allow camera permission.',
     ...defaultErrorDisplayText,
 };
 

package/dist/esm/components/FaceLivenessDetector/shared/DefaultStartScreenComponents.mjs

@@ -22,12 +22,12 @@ import { LivenessClassNames } from '../types/classNames.mjs';
 import { RecordingIcon } from './RecordingIcon.mjs';
 import { LivenessIconWithPopover } from './LivenessIconWithPopover.mjs';
 
-const DefaultPhotosensitiveWarning = ({ headingText, bodyText, infoText, }) => {
+const DefaultPhotosensitiveWarning = ({ bodyText, headingText, infoText, labelText, }) => {
     return (React__default.createElement(Flex, { className: `${ComponentClassName.Alert} ${LivenessClassNames.StartScreenWarning}`, style: { zIndex: '3' } },
         React__default.createElement(View, { flex: "1" },
             React__default.createElement(View, { className: ComponentClassName.AlertHeading }, headingText),
             React__default.createElement(View, { className: ComponentClassName.AlertBody }, bodyText)),
-        React__default.createElement(LivenessIconWithPopover, null, infoText)));
+        React__default.createElement(LivenessIconWithPopover, { labelText: labelText, headingText: headingText }, infoText)));
 };
 const DefaultRecordingIcon = ({ recordingIndicatorText, }) => {
     return (React__default.createElement(View, { className: LivenessClassNames.RecordingIconContainer },

package/dist/esm/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.mjs

@@ -51,8 +51,8 @@ const renderToastErrorModal = (props) => {
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Flex, { className: LivenessClassNames.ErrorModal },
             React__default.createElement(AlertIcon, { ariaHidden: true, variation: "error" }),
-            React__default.createElement(Text, { className: LivenessClassNames.ErrorModalHeading }, heading)),
-        message));
+            React__default.createElement(Text, { className: LivenessClassNames.ErrorModalHeading, id: "amplify-liveness-error-heading" }, heading)),
+        React__default.createElement(Text, { id: "amplify-liveness-error-message" }, message)));
 };
 const renderErrorModal = ({ errorState, overrideErrorDisplayText, }) => {
     const displayText = {
@@ -79,7 +79,7 @@ const FaceLivenessErrorModal = (props) => {
     };
     const { tryAgainText } = displayText;
     return (React__default.createElement(Overlay, { className: LivenessClassNames.OpaqueOverlay },
-        React__default.createElement(Toast, null,
+        React__default.createElement(Toast, { "aria-labelledby": "amplify-liveness-error-heading", "aria-describedby": "amplify-liveness-error-message", role: "alertdialog" },
             children,
             React__default.createElement(Flex, { justifyContent: "center" },
                 React__default.createElement(Button, { variation: "primary", type: "button", onClick: onRetry }, tryAgainText)))));

package/dist/esm/components/FaceLivenessDetector/shared/Hint.mjs

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Flex, Loader, View } from '@aws-amplify/ui-react';
+import { View } from '@aws-amplify/ui-react';
 import '../service/machine/index.mjs';
 import { FaceMatchState, IlluminationState } from '../service/types/liveness.mjs';
 import '@tensorflow/tfjs-core';
@@ -18,13 +18,17 @@ import { useLivenessActor } from '../hooks/useLivenessActor.mjs';
 import { createLivenessSelector, useLivenessSelector } from '../hooks/useLivenessSelector.mjs';
 import '@aws-amplify/ui';
 import { Toast } from './Toast.mjs';
-import { LivenessClassNames } from '../types/classNames.mjs';
+import { ToastWithLoader } from './ToastWithLoader.mjs';
 
 const selectErrorState = createLivenessSelector((state) => state.context.errorState);
 const selectFaceMatchState = createLivenessSelector((state) => state.context.faceMatchAssociatedParams.faceMatchState);
 const selectIlluminationState = createLivenessSelector((state) => state.context.faceMatchAssociatedParams.illuminationState);
 const selectIsFaceFarEnoughBeforeRecording = createLivenessSelector((state) => state.context.isFaceFarEnoughBeforeRecording);
 const selectFaceMatchStateBeforeStart = createLivenessSelector((state) => state.context.faceMatchStateBeforeStart);
+const defaultToast = (text, isInitial = false) => {
+    return (React.createElement(Toast, { size: "large", variation: "primary", isInitial: isInitial },
+        React.createElement(View, { "aria-live": "polite", "aria-label": text }, text)));
+};
 const Hint = ({ hintDisplayText }) => {
     const [state] = useLivenessActor();
     // NOTE: Do not change order of these selectors as the unit tests depend on this order
@@ -59,7 +63,7 @@ const Hint = ({ hintDisplayText }) => {
     };
     const getInstructionContent = () => {
         if (isStartView) {
-            return (React.createElement(Toast, { size: "large", variation: "primary", isInitial: true }, hintDisplayText.hintCenterFaceText));
+            return defaultToast(hintDisplayText.hintCenterFaceText, true);
         }
         if (errorState ?? (isCheckFailed || isCheckSuccessful)) {
             return;
@@ -67,33 +71,27 @@ const Hint = ({ hintDisplayText }) => {
         if (!isRecording) {
             if (isCheckFaceDetectedBeforeStart) {
                 if (faceMatchStateBeforeStart === FaceMatchState.TOO_MANY) {
-                    return (React.createElement(Toast, { size: "large", variation: "primary" }, FaceMatchStateStringMap[faceMatchStateBeforeStart]));
+                    return defaultToast(FaceMatchStateStringMap[faceMatchStateBeforeStart]);
                 }
-                return (React.createElement(Toast, { size: "large", variation: "primary" }, hintDisplayText.hintMoveFaceFrontOfCameraText));
+                return defaultToast(hintDisplayText.hintMoveFaceFrontOfCameraText);
             }
             // Specifically checking for false here because initially the value is undefined and we do not want to show the instruction
             if (isCheckFaceDistanceBeforeRecording &&
                 isFaceFarEnoughBeforeRecordingState === false) {
-                return (React.createElement(Toast, { size: "large", variation: "primary" }, hintDisplayText.hintTooCloseText));
+                return defaultToast(hintDisplayText.hintTooCloseText);
             }
             if (isNotRecording) {
-                return (React.createElement(Toast, null,
-                    React.createElement(Flex, { className: LivenessClassNames.HintText },
-                        React.createElement(Loader, null),
-                        React.createElement(View, null, hintDisplayText.hintConnectingText))));
+                return (React.createElement(ToastWithLoader, { displayText: hintDisplayText.hintConnectingText }));
             }
             if (isUploading) {
-                return (React.createElement(Toast, null,
-                    React.createElement(Flex, { className: LivenessClassNames.HintText },
-                        React.createElement(Loader, null),
-                        React.createElement(View, null, hintDisplayText.hintVerifyingText))));
+                return (React.createElement(ToastWithLoader, { displayText: hintDisplayText.hintVerifyingText }));
             }
             if (illuminationState && illuminationState !== IlluminationState.NORMAL) {
-                return (React.createElement(Toast, { size: "large", variation: "primary" }, IlluminationStateStringMap[illuminationState]));
+                return defaultToast(IlluminationStateStringMap[illuminationState]);
             }
         }
         if (isFlashingFreshness) {
-            return (React.createElement(Toast, { size: "large", variation: "primary" }, hintDisplayText.hintHoldFaceForFreshnessText));
+            return defaultToast(hintDisplayText.hintHoldFaceForFreshnessText);
         }
         if (isRecording && !isFlashingFreshness) {
             // During face matching, we want to only show the TOO_CLOSE or
@@ -105,7 +103,8 @@ const Hint = ({ hintDisplayText }) => {
                 faceMatchState === FaceMatchState.MATCHED) {
                 resultHintString = FaceMatchStateStringMap[faceMatchState];
             }
-            return (React.createElement(Toast, { size: "large", variation: faceMatchState === FaceMatchState.TOO_CLOSE ? 'error' : 'primary' }, resultHintString));
+            return (React.createElement(Toast, { size: "large", variation: faceMatchState === FaceMatchState.TOO_CLOSE ? 'error' : 'primary' },
+                React.createElement(View, { "aria-live": "polite", "aria-label": resultHintString }, resultHintString)));
         }
         return null;
     };

package/dist/esm/components/FaceLivenessDetector/shared/LivenessIconWithPopover.mjs

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Flex } from '@aws-amplify/ui-react';
+import { Button, Flex } from '@aws-amplify/ui-react';
 import { useThemeBreakpoint, AlertIcon } from '@aws-amplify/ui-react/internal';
 import { LivenessClassNames } from '../types/classNames.mjs';
 
@@ -7,7 +7,7 @@ import { LivenessClassNames } from '../types/classNames.mjs';
  * Copied from src/primitives/Alert/AlertIcon.tsx because we want to re-use the icon but it is not currently expored by AlertIcon.
  * We currently don't want to make a change to the AlertIcon primitive itself and may expose the icon in the future but for now so as not to introduce cross component dependencies we have duplicated it.
  */
-const LivenessIconWithPopover = ({ children }) => {
+const LivenessIconWithPopover = ({ children, headingText, labelText }) => {
     const breakpoint = useThemeBreakpoint();
     const [shouldShowPopover, setShouldShowPopover] = React.useState(false);
     const wrapperRef = React.useRef(null);
@@ -25,12 +25,13 @@ const LivenessIconWithPopover = ({ children }) => {
             document.removeEventListener('mousedown', handleClickOutside);
         };
     }, [wrapperRef, shouldShowPopover]);
-    return (React.createElement(Flex, { className: LivenessClassNames.Popover, onClick: () => setShouldShowPopover(!shouldShowPopover), ref: wrapperRef, testId: "popover-icon" },
-        React.createElement(AlertIcon, { ariaHidden: true, variation: "info" }),
+    return (React.createElement("div", { className: LivenessClassNames.Popover, ref: wrapperRef },
+        React.createElement(Button, { "aria-controls": "photosensitivity-description", "aria-expanded": shouldShowPopover, role: "alertdialog", "aria-label": labelText, "aria-describedby": "photosensitivity-description", colorTheme: "info", id: "popover-button", onClick: () => setShouldShowPopover(!shouldShowPopover), testId: "popover-icon" },
+            React.createElement(AlertIcon, { ariaHidden: true, variation: "info" })),
         shouldShowPopover && (React.createElement(React.Fragment, null,
             React.createElement(Flex, { className: LivenessClassNames.PopoverAnchor }),
             React.createElement(Flex, { className: LivenessClassNames.PopoverAnchorSecondary }),
-            React.createElement(Flex, { className: LivenessClassNames.PopoverContainer, left: isMobileScreen ? -190 : -108, "data-testid": "popover-text" }, children)))));
+            React.createElement(Flex, { "aria-hidden": !shouldShowPopover, "aria-label": headingText, className: LivenessClassNames.PopoverContainer, "data-testid": "popover-text", id: "photosensitivity-description", left: isMobileScreen ? -190 : -108, role: "alertdialog" }, children)))));
 };
 LivenessIconWithPopover.displayName = 'LivenessIconWithPopover';
 

package/dist/esm/components/FaceLivenessDetector/shared/ToastWithLoader.mjs

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Flex, Loader, View } from '@aws-amplify/ui-react';
+import { LivenessClassNames } from '../types/classNames.mjs';
+import { Toast } from './Toast.mjs';
+
+const ToastWithLoader = ({ displayText, labelText, }) => {
+    return (React.createElement(Toast, { "aria-live": "polite", "aria-label": labelText ?? displayText },
+        React.createElement(Flex, { className: LivenessClassNames.HintText },
+            React.createElement(Loader, null),
+            React.createElement(View, null, displayText))));
+};
+
+export { ToastWithLoader };

package/dist/esm/components/FaceLivenessDetector/utils/getDisplayText.mjs

@@ -12,7 +12,7 @@ function getDisplayText(overrideDisplayText) {
         ...defaultLivenessDisplayText,
         ...overrideDisplayText,
     };
-    const { photosensitivyWarningHeadingText, photosensitivyWarningBodyText, photosensitivyWarningInfoText, goodFitCaptionText, goodFitAltText, tooFarCaptionText, tooFarAltText, cameraMinSpecificationsHeadingText, cameraMinSpecificationsMessageText, cameraNotFoundHeadingText, cameraNotFoundMessageText, retryCameraPermissionsText, waitingCameraPermissionText, a11yVideoLabelText, cancelLivenessCheckText, recordingIndicatorText, hintMoveFaceFrontOfCameraText, hintTooManyFacesText, hintFaceDetectedText, hintCanNotIdentifyText, hintTooCloseText, hintTooFarText, hintConnectingText, hintVerifyingText, hintIlluminationTooBrightText, hintIlluminationTooDarkText, hintIlluminationNormalText, hintHoldFaceForFreshnessText, timeoutHeaderText, timeoutMessageText, faceDistanceHeaderText, faceDistanceMessageText, multipleFacesHeaderText, multipleFacesMessageText, clientHeaderText, clientMessageText, serverHeaderText, serverMessageText, landscapeHeaderText, landscapeMessageText, portraitMessageText, tryAgainText, startScreenBeginCheckText, hintCenterFaceText, } = displayText;
+    const { a11yVideoLabelText, cameraMinSpecificationsHeadingText, cameraMinSpecificationsMessageText, cameraNotFoundHeadingText, cameraNotFoundMessageText, cancelLivenessCheckText, clientHeaderText, clientMessageText, hintCanNotIdentifyText, hintCenterFaceText, hintConnectingText, hintFaceDetectedText, hintHoldFaceForFreshnessText, hintIlluminationNormalText, hintIlluminationTooBrightText, hintIlluminationTooDarkText, hintMoveFaceFrontOfCameraText, hintTooManyFacesText, hintTooCloseText, hintTooFarText, hintVerifyingText, faceDistanceHeaderText, faceDistanceMessageText, goodFitCaptionText, goodFitAltText, landscapeHeaderText, landscapeMessageText, multipleFacesHeaderText, multipleFacesMessageText, photosensitivityWarningBodyText, photosensitivityWarningHeadingText, photosensitivityWarningInfoText, photosensitivityWarningLabelText, photosensitivyWarningBodyText, photosensitivyWarningHeadingText, photosensitivyWarningInfoText, photosensitivyWarningLabelText, portraitMessageText, retryCameraPermissionsText, recordingIndicatorText, serverHeaderText, serverMessageText, startScreenBeginCheckText, timeoutHeaderText, timeoutMessageText, tooFarCaptionText, tooFarAltText, tryAgainText, waitingCameraPermissionText, } = displayText;
     const hintDisplayText = {
         hintMoveFaceFrontOfCameraText,
         hintTooManyFacesText,
@@ -38,9 +38,14 @@ function getDisplayText(overrideDisplayText) {
         a11yVideoLabelText,
     };
     const instructionDisplayText = {
-        photosensitivyWarningHeadingText,
+        photosensitivityWarningBodyText,
+        photosensitivityWarningHeadingText,
+        photosensitivityWarningInfoText,
+        photosensitivityWarningLabelText,
         photosensitivyWarningBodyText,
+        photosensitivyWarningHeadingText,
         photosensitivyWarningInfoText,
+        photosensitivyWarningLabelText,
         goodFitCaptionText,
         goodFitAltText,
         tooFarCaptionText,

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '3.0.5';
+const VERSION = '3.0.6';
 
 export { VERSION };

package/dist/index.js

@@ -771,7 +771,7 @@ class VideoRecorder {
     }
 }
 
-const VERSION = '3.0.5';
+const VERSION = '3.0.6';
 
 const BASE_USER_AGENT = `ui-react-liveness/${VERSION}`;
 const getLivenessUserAgent = () => {
@@ -2530,11 +2530,22 @@ const Toast = ({ variation = 'default', size = 'medium', children, isInitial = f
             React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.ToastMessage, ...(isInitial ? { color: tokens.colors.font.primary } : {}) }, children))));
 };
 
+const ToastWithLoader = ({ displayText, labelText, }) => {
+    return (React__namespace.createElement(Toast, { "aria-live": "polite", "aria-label": labelText ?? displayText },
+        React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.HintText },
+            React__namespace.createElement(uiReact.Loader, null),
+            React__namespace.createElement(uiReact.View, null, displayText))));
+};
+
 const selectErrorState = createLivenessSelector((state) => state.context.errorState);
 const selectFaceMatchState$1 = createLivenessSelector((state) => state.context.faceMatchAssociatedParams.faceMatchState);
 const selectIlluminationState = createLivenessSelector((state) => state.context.faceMatchAssociatedParams.illuminationState);
 const selectIsFaceFarEnoughBeforeRecording = createLivenessSelector((state) => state.context.isFaceFarEnoughBeforeRecording);
 const selectFaceMatchStateBeforeStart = createLivenessSelector((state) => state.context.faceMatchStateBeforeStart);
+const defaultToast = (text, isInitial = false) => {
+    return (React__namespace.createElement(Toast, { size: "large", variation: "primary", isInitial: isInitial },
+        React__namespace.createElement(uiReact.View, { "aria-live": "polite", "aria-label": text }, text)));
+};
 const Hint = ({ hintDisplayText }) => {
     const [state] = useLivenessActor();
     // NOTE: Do not change order of these selectors as the unit tests depend on this order
@@ -2569,7 +2580,7 @@ const Hint = ({ hintDisplayText }) => {
     };
     const getInstructionContent = () => {
         if (isStartView) {
-            return (React__namespace.createElement(Toast, { size: "large", variation: "primary", isInitial: true }, hintDisplayText.hintCenterFaceText));
+            return defaultToast(hintDisplayText.hintCenterFaceText, true);
         }
         if (errorState ?? (isCheckFailed || isCheckSuccessful)) {
             return;
@@ -2577,33 +2588,27 @@ const Hint = ({ hintDisplayText }) => {
         if (!isRecording) {
             if (isCheckFaceDetectedBeforeStart) {
                 if (faceMatchStateBeforeStart === FaceMatchState.TOO_MANY) {
-                    return (React__namespace.createElement(Toast, { size: "large", variation: "primary" }, FaceMatchStateStringMap[faceMatchStateBeforeStart]));
+                    return defaultToast(FaceMatchStateStringMap[faceMatchStateBeforeStart]);
                 }
-                return (React__namespace.createElement(Toast, { size: "large", variation: "primary" }, hintDisplayText.hintMoveFaceFrontOfCameraText));
+                return defaultToast(hintDisplayText.hintMoveFaceFrontOfCameraText);
             }
             // Specifically checking for false here because initially the value is undefined and we do not want to show the instruction
             if (isCheckFaceDistanceBeforeRecording &&
                 isFaceFarEnoughBeforeRecordingState === false) {
-                return (React__namespace.createElement(Toast, { size: "large", variation: "primary" }, hintDisplayText.hintTooCloseText));
+                return defaultToast(hintDisplayText.hintTooCloseText);
             }
             if (isNotRecording) {
-                return (React__namespace.createElement(Toast, null,
-                    React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.HintText },
-                        React__namespace.createElement(uiReact.Loader, null),
-                        React__namespace.createElement(uiReact.View, null, hintDisplayText.hintConnectingText))));
+                return (React__namespace.createElement(ToastWithLoader, { displayText: hintDisplayText.hintConnectingText }));
             }
             if (isUploading) {
-                return (React__namespace.createElement(Toast, null,
-                    React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.HintText },
-                        React__namespace.createElement(uiReact.Loader, null),
-                        React__namespace.createElement(uiReact.View, null, hintDisplayText.hintVerifyingText))));
+                return (React__namespace.createElement(ToastWithLoader, { displayText: hintDisplayText.hintVerifyingText }));
             }
             if (illuminationState && illuminationState !== IlluminationState.NORMAL) {
-                return (React__namespace.createElement(Toast, { size: "large", variation: "primary" }, IlluminationStateStringMap[illuminationState]));
+                return defaultToast(IlluminationStateStringMap[illuminationState]);
             }
         }
         if (isFlashingFreshness) {
-            return (React__namespace.createElement(Toast, { size: "large", variation: "primary" }, hintDisplayText.hintHoldFaceForFreshnessText));
+            return defaultToast(hintDisplayText.hintHoldFaceForFreshnessText);
         }
         if (isRecording && !isFlashingFreshness) {
             // During face matching, we want to only show the TOO_CLOSE or
@@ -2615,7 +2620,8 @@ const Hint = ({ hintDisplayText }) => {
                 faceMatchState === FaceMatchState.MATCHED) {
                 resultHintString = FaceMatchStateStringMap[faceMatchState];
             }
-            return (React__namespace.createElement(Toast, { size: "large", variation: faceMatchState === FaceMatchState.TOO_CLOSE ? 'error' : 'primary' }, resultHintString));
+            return (React__namespace.createElement(Toast, { size: "large", variation: faceMatchState === FaceMatchState.TOO_CLOSE ? 'error' : 'primary' },
+                React__namespace.createElement(uiReact.View, { "aria-live": "polite", "aria-label": resultHintString }, resultHintString)));
         }
         return null;
     };
@@ -2672,24 +2678,15 @@ const defaultErrorDisplayText = {
     tryAgainText: 'Try again',
 };
 const defaultLivenessDisplayText = {
-    hintCenterFaceText: 'Center your face',
-    startScreenBeginCheckText: 'Start video check',
-    photosensitivyWarningHeadingText: 'Photosensitivity warning',
-    photosensitivyWarningBodyText: 'This check flashes different colors. Use caution if you are photosensitive.',
-    photosensitivyWarningInfoText: 'Some people may experience may experience epileptic seizures when exposed to colored lights. Use caution if you, or anyone in your family, have an epileptic condition.',
-    goodFitCaptionText: 'Good fit',
-    goodFitAltText: "Ilustration of a person's face, perfectly fitting inside of an oval.",
-    tooFarCaptionText: 'Too far',
-    tooFarAltText: "Illustration of a person's face inside of an oval; there is a gap between the perimeter of the face and the boundaries of the oval.",
     cameraMinSpecificationsHeadingText: 'Camera does not meet minimum specifications',
     cameraMinSpecificationsMessageText: 'Camera must support at least 320*240 resolution and 15 frames per second.',
     cameraNotFoundHeadingText: 'Camera is not accessible.',
     cameraNotFoundMessageText: 'Check that a camera is connected and there is not another application using the camera. You may have to go into settings to grant camera permissions and close out all instances of your browser and retry.',
-    retryCameraPermissionsText: 'Retry',
-    waitingCameraPermissionText: 'Waiting for you to allow camera permission.',
     a11yVideoLabelText: 'Webcam for liveness check',
     cancelLivenessCheckText: 'Cancel Liveness check',
-    recordingIndicatorText: 'Rec',
+    goodFitCaptionText: 'Good fit',
+    goodFitAltText: "Ilustration of a person's face, perfectly fitting inside of an oval.",
+    hintCenterFaceText: 'Center your face',
     hintMoveFaceFrontOfCameraText: 'Move face in front of camera',
     hintTooManyFacesText: 'Ensure only one face is in front of camera',
     hintFaceDetectedText: 'Face detected',
@@ -2702,6 +2699,20 @@ const defaultLivenessDisplayText = {
     hintIlluminationTooDarkText: 'Move to brighter area',
     hintIlluminationNormalText: 'Lighting conditions normal',
     hintHoldFaceForFreshnessText: 'Hold still',
+    photosensitivityWarningBodyText: 'This check flashes different colors. Use caution if you are photosensitive.',
+    photosensitivityWarningHeadingText: 'Photosensitivity warning',
+    photosensitivityWarningInfoText: 'Some people may experience epileptic seizures when exposed to colored lights. Use caution if you, or anyone in your family, have an epileptic condition.',
+    photosensitivityWarningLabelText: 'More information about photosensitivity',
+    photosensitivyWarningBodyText: 'This check flashes different colors. Use caution if you are photosensitive.',
+    photosensitivyWarningHeadingText: 'Photosensitivity warning',
+    photosensitivyWarningInfoText: 'Some people may experience epileptic seizures when exposed to colored lights. Use caution if you, or anyone in your family, have an epileptic condition.',
+    photosensitivyWarningLabelText: 'More information about photosensitivity',
+    retryCameraPermissionsText: 'Retry',
+    recordingIndicatorText: 'Rec',
+    startScreenBeginCheckText: 'Start video check',
+    tooFarCaptionText: 'Too far',
+    tooFarAltText: "Illustration of a person's face inside of an oval; there is a gap between the perimeter of the face and the boundaries of the oval.",
+    waitingCameraPermissionText: 'Waiting for you to allow camera permission.',
     ...defaultErrorDisplayText,
 };
 
@@ -2735,8 +2746,8 @@ const renderToastErrorModal = (props) => {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(uiReact.Flex, { className: LivenessClassNames.ErrorModal },
             React__default["default"].createElement(internal.AlertIcon, { ariaHidden: true, variation: "error" }),
-            React__default["default"].createElement(uiReact.Text, { className: LivenessClassNames.ErrorModalHeading }, heading)),
-        message));
+            React__default["default"].createElement(uiReact.Text, { className: LivenessClassNames.ErrorModalHeading, id: "amplify-liveness-error-heading" }, heading)),
+        React__default["default"].createElement(uiReact.Text, { id: "amplify-liveness-error-message" }, message)));
 };
 const renderErrorModal = ({ errorState, overrideErrorDisplayText, }) => {
     const displayText = {
@@ -2763,7 +2774,7 @@ const FaceLivenessErrorModal = (props) => {
     };
     const { tryAgainText } = displayText;
     return (React__default["default"].createElement(Overlay, { className: LivenessClassNames.OpaqueOverlay },
-        React__default["default"].createElement(Toast, null,
+        React__default["default"].createElement(Toast, { "aria-labelledby": "amplify-liveness-error-heading", "aria-describedby": "amplify-liveness-error-message", role: "alertdialog" },
             children,
             React__default["default"].createElement(uiReact.Flex, { justifyContent: "center" },
                 React__default["default"].createElement(uiReact.Button, { variation: "primary", type: "button", onClick: onRetry }, tryAgainText)))));
@@ -2773,7 +2784,7 @@ const FaceLivenessErrorModal = (props) => {
  * Copied from src/primitives/Alert/AlertIcon.tsx because we want to re-use the icon but it is not currently expored by AlertIcon.
  * We currently don't want to make a change to the AlertIcon primitive itself and may expose the icon in the future but for now so as not to introduce cross component dependencies we have duplicated it.
  */
-const LivenessIconWithPopover = ({ children }) => {
+const LivenessIconWithPopover = ({ children, headingText, labelText }) => {
     const breakpoint = internal.useThemeBreakpoint();
     const [shouldShowPopover, setShouldShowPopover] = React__namespace.useState(false);
     const wrapperRef = React__namespace.useRef(null);
@@ -2791,21 +2802,22 @@ const LivenessIconWithPopover = ({ children }) => {
             document.removeEventListener('mousedown', handleClickOutside);
         };
     }, [wrapperRef, shouldShowPopover]);
-    return (React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.Popover, onClick: () => setShouldShowPopover(!shouldShowPopover), ref: wrapperRef, testId: "popover-icon" },
-        React__namespace.createElement(internal.AlertIcon, { ariaHidden: true, variation: "info" }),
+    return (React__namespace.createElement("div", { className: LivenessClassNames.Popover, ref: wrapperRef },
+        React__namespace.createElement(uiReact.Button, { "aria-controls": "photosensitivity-description", "aria-expanded": shouldShowPopover, role: "alertdialog", "aria-label": labelText, "aria-describedby": "photosensitivity-description", colorTheme: "info", id: "popover-button", onClick: () => setShouldShowPopover(!shouldShowPopover), testId: "popover-icon" },
+            React__namespace.createElement(internal.AlertIcon, { ariaHidden: true, variation: "info" })),
         shouldShowPopover && (React__namespace.createElement(React__namespace.Fragment, null,
             React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.PopoverAnchor }),
             React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.PopoverAnchorSecondary }),
-            React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.PopoverContainer, left: isMobileScreen ? -190 : -108, "data-testid": "popover-text" }, children)))));
+            React__namespace.createElement(uiReact.Flex, { "aria-hidden": !shouldShowPopover, "aria-label": headingText, className: LivenessClassNames.PopoverContainer, "data-testid": "popover-text", id: "photosensitivity-description", left: isMobileScreen ? -190 : -108, role: "alertdialog" }, children)))));
 };
 LivenessIconWithPopover.displayName = 'LivenessIconWithPopover';
 
-const DefaultPhotosensitiveWarning = ({ headingText, bodyText, infoText, }) => {
+const DefaultPhotosensitiveWarning = ({ bodyText, headingText, infoText, labelText, }) => {
     return (React__default["default"].createElement(uiReact.Flex, { className: `${ui.ComponentClassName.Alert} ${LivenessClassNames.StartScreenWarning}`, style: { zIndex: '3' } },
         React__default["default"].createElement(uiReact.View, { flex: "1" },
             React__default["default"].createElement(uiReact.View, { className: ui.ComponentClassName.AlertHeading }, headingText),
             React__default["default"].createElement(uiReact.View, { className: ui.ComponentClassName.AlertBody }, bodyText)),
-        React__default["default"].createElement(LivenessIconWithPopover, null, infoText)));
+        React__default["default"].createElement(LivenessIconWithPopover, { labelText: labelText, headingText: headingText }, infoText)));
 };
 const DefaultRecordingIcon = ({ recordingIndicatorText, }) => {
     return (React__default["default"].createElement(uiReact.View, { className: LivenessClassNames.RecordingIconContainer },
@@ -2914,9 +2926,9 @@ const LivenessCameraModule = (props) => {
             setAspectRatio(videoRef.current.videoWidth / videoRef.current.videoHeight);
         }
     }, [send, videoRef, isCameraReady, isMobileScreen]);
-    const photoSensitivtyWarning = React__default["default"].useMemo(() => {
+    const photoSensitivityWarning = React__default["default"].useMemo(() => {
         return (React__default["default"].createElement(uiReact.View, { style: { visibility: isStartView ? 'visible' : 'hidden' } },
-            React__default["default"].createElement(PhotosensitiveWarning, { headingText: instructionDisplayText.photosensitivyWarningHeadingText, bodyText: instructionDisplayText.photosensitivyWarningBodyText, infoText: instructionDisplayText.photosensitivyWarningInfoText })));
+            React__default["default"].createElement(PhotosensitiveWarning, { bodyText: instructionDisplayText.photosensitivityWarningBodyText, headingText: instructionDisplayText.photosensitivityWarningHeadingText, infoText: instructionDisplayText.photosensitivityWarningInfoText, labelText: instructionDisplayText.photosensitivityWarningLabelText })));
     }, [PhotosensitiveWarning, instructionDisplayText, isStartView]);
     const handleMediaPlay = () => {
         setIsCameraReady(true);
@@ -2950,7 +2962,7 @@ const LivenessCameraModule = (props) => {
     }
     const isRecordingOnMobile = isMobileScreen && !isStartView && !isWaitingForCamera && isRecording;
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        photoSensitivtyWarning,
+        photoSensitivityWarning,
         React__default["default"].createElement(uiReact.Flex, { className: ui.classNames(LivenessClassNames.CameraModule, isRecordingOnMobile && `${LivenessClassNames.CameraModule}--mobile`), "data-testid": testId, gap: "zero" },
             !isCameraReady && centeredLoader,
             React__default["default"].createElement(uiReact.View, { as: "canvas", ref: freshnessColorRef, className: LivenessClassNames.FreshnessCanvas, hidden: true }),
@@ -3111,7 +3123,7 @@ function getDisplayText(overrideDisplayText) {
         ...defaultLivenessDisplayText,
         ...overrideDisplayText,
     };
-    const { photosensitivyWarningHeadingText, photosensitivyWarningBodyText, photosensitivyWarningInfoText, goodFitCaptionText, goodFitAltText, tooFarCaptionText, tooFarAltText, cameraMinSpecificationsHeadingText, cameraMinSpecificationsMessageText, cameraNotFoundHeadingText, cameraNotFoundMessageText, retryCameraPermissionsText, waitingCameraPermissionText, a11yVideoLabelText, cancelLivenessCheckText, recordingIndicatorText, hintMoveFaceFrontOfCameraText, hintTooManyFacesText, hintFaceDetectedText, hintCanNotIdentifyText, hintTooCloseText, hintTooFarText, hintConnectingText, hintVerifyingText, hintIlluminationTooBrightText, hintIlluminationTooDarkText, hintIlluminationNormalText, hintHoldFaceForFreshnessText, timeoutHeaderText, timeoutMessageText, faceDistanceHeaderText, faceDistanceMessageText, multipleFacesHeaderText, multipleFacesMessageText, clientHeaderText, clientMessageText, serverHeaderText, serverMessageText, landscapeHeaderText, landscapeMessageText, portraitMessageText, tryAgainText, startScreenBeginCheckText, hintCenterFaceText, } = displayText;
+    const { a11yVideoLabelText, cameraMinSpecificationsHeadingText, cameraMinSpecificationsMessageText, cameraNotFoundHeadingText, cameraNotFoundMessageText, cancelLivenessCheckText, clientHeaderText, clientMessageText, hintCanNotIdentifyText, hintCenterFaceText, hintConnectingText, hintFaceDetectedText, hintHoldFaceForFreshnessText, hintIlluminationNormalText, hintIlluminationTooBrightText, hintIlluminationTooDarkText, hintMoveFaceFrontOfCameraText, hintTooManyFacesText, hintTooCloseText, hintTooFarText, hintVerifyingText, faceDistanceHeaderText, faceDistanceMessageText, goodFitCaptionText, goodFitAltText, landscapeHeaderText, landscapeMessageText, multipleFacesHeaderText, multipleFacesMessageText, photosensitivityWarningBodyText, photosensitivityWarningHeadingText, photosensitivityWarningInfoText, photosensitivityWarningLabelText, photosensitivyWarningBodyText, photosensitivyWarningHeadingText, photosensitivyWarningInfoText, photosensitivyWarningLabelText, portraitMessageText, retryCameraPermissionsText, recordingIndicatorText, serverHeaderText, serverMessageText, startScreenBeginCheckText, timeoutHeaderText, timeoutMessageText, tooFarCaptionText, tooFarAltText, tryAgainText, waitingCameraPermissionText, } = displayText;
     const hintDisplayText = {
         hintMoveFaceFrontOfCameraText,
         hintTooManyFacesText,
@@ -3137,9 +3149,14 @@ function getDisplayText(overrideDisplayText) {
         a11yVideoLabelText,
     };
     const instructionDisplayText = {
-        photosensitivyWarningHeadingText,
+        photosensitivityWarningBodyText,
+        photosensitivityWarningHeadingText,
+        photosensitivityWarningInfoText,
+        photosensitivityWarningLabelText,
         photosensitivyWarningBodyText,
+        photosensitivyWarningHeadingText,
         photosensitivyWarningInfoText,
+        photosensitivyWarningLabelText,
         goodFitCaptionText,
         goodFitAltText,
         tooFarCaptionText,

package/dist/styles.css

@@ -4213,7 +4213,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
 
 .amplify-liveness-start-screen-warning {
   color: var(--amplify-colors-blue-90);
-  background-color: var(--amplify-colors-blue-20);
+  background-color: var(--amplify-colors-blue-10);
   align-items: center;
   z-index: 3;
 }
@@ -4255,13 +4255,12 @@ html[dir=rtl] .amplify-field-group__inner-start {
 
 .amplify-liveness-popover {
   position: relative;
-  cursor: pointer;
 }
 
 .amplify-liveness-popover__anchor {
   position: absolute;
   top: 26px;
-  left: 3px;
+  left: 20px;
   z-index: 3;
   border-style: solid;
   border-width: 0 9px 9px 9px;
@@ -4271,7 +4270,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-liveness-popover__anchor-secondary {
   position: absolute;
   top: 24px;
-  left: 2px;
+  left: 19px;
   z-index: 2;
   border-style: solid;
   border-width: 0 10px 10px 10px;
@@ -4284,6 +4283,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   color: var(--amplify-colors-font-primary);
   flex-direction: row;
   font-size: var(--amplify-font-sizes-xs);
+  font-weight: var(--amplify-font-weights-normal);
   padding: var(--amplify-space-small);
   top: 33px;
   width: 240px;

package/dist/types/components/FaceLivenessDetector/displayText.d.ts

@@ -23,14 +23,19 @@ export type CameraDisplayText = {
     a11yVideoLabelText?: string;
 };
 export type InstructionDisplayText = {
-    photosensitivyWarningHeadingText?: string;
-    photosensitivyWarningBodyText?: string;
-    photosensitivyWarningInfoText?: string;
     goodFitCaptionText?: string;
     goodFitAltText?: string;
+    photosensitivityWarningBodyText?: string;
+    photosensitivityWarningHeadingText?: string;
+    photosensitivityWarningInfoText?: string;
+    photosensitivityWarningLabelText?: string;
+    photosensitivyWarningBodyText?: string;
+    photosensitivyWarningHeadingText?: string;
+    photosensitivyWarningInfoText?: string;
+    photosensitivyWarningLabelText?: string;
+    startScreenBeginCheckText?: string;
     tooFarCaptionText?: string;
     tooFarAltText?: string;
-    startScreenBeginCheckText?: string;
 };
 export type StreamDisplayText = {
     recordingIndicatorText?: string;

package/dist/types/components/FaceLivenessDetector/shared/DefaultStartScreenComponents.d.ts

@@ -5,11 +5,12 @@ export interface StartScreenComponents {
     PhotosensitiveWarning?: React.ComponentType;
 }
 interface DefaultPhotosensitiveWarningProps {
-    headingText: string;
     bodyText: string;
+    headingText: string;
     infoText: string;
+    labelText: string;
 }
-export declare const DefaultPhotosensitiveWarning: ({ headingText, bodyText, infoText, }: DefaultPhotosensitiveWarningProps) => JSX.Element;
+export declare const DefaultPhotosensitiveWarning: ({ bodyText, headingText, infoText, labelText, }: DefaultPhotosensitiveWarningProps) => JSX.Element;
 interface DefaultRecordingIconProps {
     recordingIndicatorText: string;
 }

package/dist/types/components/FaceLivenessDetector/shared/LivenessIconWithPopover.d.ts

@@ -5,5 +5,7 @@
 import * as React from 'react';
 export interface LivenessIconWithPopoverProps {
     children: string;
+    headingText: string;
+    labelText: string;
 }
 export declare const LivenessIconWithPopover: React.FC<LivenessIconWithPopoverProps>;

package/dist/types/components/FaceLivenessDetector/shared/ToastWithLoader.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface ToastWithLoaderProps {
+    displayText: string;
+    labelText?: string;
+}
+export declare const ToastWithLoader: React.FC<ToastWithLoaderProps>;
+export {};

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.0.5";
+export declare const VERSION = "3.0.6";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-liveness",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -47,8 +47,8 @@
     "react-dom": "^16.14.0 || ^17.0 || ^18.0"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.0.4",
-    "@aws-amplify/ui-react": "6.0.5",
+    "@aws-amplify/ui": "6.0.5",
+    "@aws-amplify/ui-react": "6.0.6",
     "@aws-sdk/client-rekognitionstreaming": "3.398.0",
     "@aws-sdk/util-format-url": "^3.410.0",
     "@smithy/eventstream-serde-browser": "^2.0.4",