Fix call readiness modal being not dismissable by keyboard (#5421)

Author: JamesBurnside

change-beta/@azure-communication-react-21a2f2fe-2e42-46c8-affe-8b73b311abeb.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Fix call readiness modal being not dismissable by keyboard",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/DevicePermissions/SitePermissionsScaffolding.tsx

@@ -121,6 +121,8 @@ export const SitePermissionsContainer = (props: SitePermissionsContainerProps):
   const { appName, onTroubleshootingClick, onPrimaryButtonClick, strings } = props;
   const theme = useTheme();
 
+  const showPrimaryButton = onPrimaryButtonClick && isValidString(strings?.primaryButtonText);
+
   return (
     <Stack style={{ padding: '2rem', maxWidth: '25.375rem', alignSelf: 'center' }} aria-label={strings?.ariaLabel}>
       <Stack styles={iconBannerContainerStyles} horizontal horizontalAlign={'center'} verticalFill tokens={tokens}>
@@ -142,25 +144,27 @@ export const SitePermissionsContainer = (props: SitePermissionsContainerProps):
       </Stack>
       <Stack styles={textContainerStyles}>
         {strings && isValidString(strings?.primaryText) && (
-          <Text styles={primaryTextStyles}>
+          <Text styles={primaryTextStyles} role="alert" aria-live="assertive">
             {appName ? _formatString(strings.primaryText, { appName: appName }) : strings.primaryText}
           </Text>
         )}
         {strings && isValidString(strings?.secondaryText) && (
           <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>
         )}
 
-        {onPrimaryButtonClick && isValidString(strings?.primaryButtonText) && (
+        {showPrimaryButton && (
           <PrimaryButton
             styles={mergeStyleSets(primaryButtonStyles, props.styles?.primaryButton)}
             text={strings?.primaryButtonText}
             onClick={onPrimaryButtonClick}
+            autoFocus
           />
         )}
         {onTroubleshootingClick && isValidString(strings?.linkText) && (
           <Link
             styles={mergeStyleSets(linkTextStyles, props.styles?.troubleshootingLink)}
             onClick={onTroubleshootingClick}
+            autoFocus={!showPrimaryButton}
           >
             {strings?.linkText}
           </Link>

packages/react-components/src/components/ModalClone/ModalClone.tsx

@@ -448,6 +448,7 @@ const ModalBase: React.FunctionComponent<_ExtendedIModalProps> = React.forwardRe
         onBlur={internalState.isInKeyboardMoveMode ? handleExitKeyboardMoveMode : undefined}
         data-ui-id={dataUiId}
         // enableAriaHiddenSiblings is handled by the Popup
+        {...(props.focusTrapZoneProps ?? {})}
       >
         {dragOptions && internalState.isInKeyboardMoveMode && (
           <div className={classNames.keyboardMoveIconContainer}>

packages/react-composites/src/composites/CallComposite/components/CallReadinessModal.tsx

@@ -214,6 +214,15 @@ export const CallReadinessModal = (props: {
           setIsPermissionsModalDismissed(false);
         }}
         overlay={{ styles: { root: { background: 'rgba(0,0,0,0.4)' } } }}
+        forceFocusInsideTrap={true}
+        focusTrapZoneProps={{
+          disabled: false,
+          onKeyDown: (ev: React.KeyboardEvent<HTMLElement>) => {
+            if (ev.key === 'Escape') {
+              setIsPermissionsModalDismissed(false);
+            }
+          }
+        }}
       >
         {modal()}
       </_ModalClone>