[Chat] Remove unnecessary FocusTrapZone for ImageGallery (#3569)

* Remove FocusTrapZone from ImageGallery

* Change files

* Duplicate change files for beta release

* Remove unnecessary imports

Author: Leah-Xia-Microsoft

change-beta/@azure-communication-react-afd869d4-6f4c-43da-b711-7bde96de7829.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "fix",
+  "workstream": "ImageGallery",
+  "comment": "Remove FocusTrapZone from ImageGallery",
+  "packageName": "@azure/communication-react",
+  "email": "107075081+Leah-Xia-Microsoft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@azure-communication-react-afd869d4-6f4c-43da-b711-7bde96de7829.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "fix",
+  "workstream": "ImageGallery",
+  "comment": "Remove FocusTrapZone from ImageGallery",
+  "packageName": "@azure/communication-react",
+  "email": "107075081+Leah-Xia-Microsoft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

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

@@ -2,13 +2,12 @@
 // Licensed under the MIT License.
 
 /* @conditional-compile-remove(image-gallery) */
-import { DefaultButton, FocusTrapZone, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';
+import { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';
 /* @conditional-compile-remove(image-gallery) */
 import React, { SyntheticEvent, useState } from 'react';
 /* @conditional-compile-remove(image-gallery) */
 import {
   bodyContainer,
-  bodyFocusZone,
   brokenImageStyle,
   cancelIcon,
   closeButtonStyles,
@@ -158,35 +157,23 @@ export const ImageGallery = (props: ImageGalleryProps): JSX.Element => {
   const renderBodyWithLightDismiss = (): JSX.Element => {
     return (
       <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>
-        <FocusTrapZone
-          onKeyDown={(e) => {
-            if (e.key === 'Escape' || e.key === 'Esc') {
-              onDismiss();
-            }
-          }}
-          // Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.
-          // Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.
-          isClickableOutsideFocusTrap={true}
-          className={mergeStyles(bodyFocusZone)}
-        >
-          {images.length > startIndex && (
-            <img
-              src={image?.imageUrl}
-              className={mergeStyles(imageStyle)}
-              alt={image?.altText || 'image'}
-              aria-label={'image-gallery-main-image'}
-              aria-live={'polite'}
-              onError={(event) => {
-                setIsImageLoaded(false);
-                onError && onError(event);
-              }}
-              onClick={(event) => event.stopPropagation()}
-              onDoubleClick={(event) => {
-                event.persist();
-              }}
-            />
-          )}
-        </FocusTrapZone>
+        {images.length > startIndex && (
+          <img
+            src={image?.imageUrl}
+            className={mergeStyles(imageStyle)}
+            alt={image?.altText || 'image'}
+            aria-label={'image-gallery-main-image'}
+            aria-live={'polite'}
+            onError={(event) => {
+              setIsImageLoaded(false);
+              onError && onError(event);
+            }}
+            onClick={(event) => event.stopPropagation()}
+            onDoubleClick={(event) => {
+              event.persist();
+            }}
+          />
+        )}
       </Stack>
     );
   };

packages/react-components/src/components/styles/ImageGallery.style.ts

@@ -132,17 +132,6 @@ export const bodyContainer: IStyle = {
   }
 };
 
-/**
- * @private
- */
-export const bodyFocusZone: IStyle = {
-  width: '100%',
-  height: '100%',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-};
-
 /**
  * @private
  */