Fix numbers not showing in Voice Access mode when in 'Dynamic' view (#6022)

* Add aria-hidden attribute to LayerHost so that Voice Access can find elements behind it

* Change files

* Add aria-hidden attribute to LayerHost in focus content layout and speaker video layout for improved Voice Access compatibility

Author: mgamis-msft

change/@azure-communication-react-15870276-acc1-4e7d-8056-102ccd587b16.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "fix",
+  "workstream": "A11y",
+  "comment": "Add aria-hidden attribute to LayerHost so that Voice Access can find elements behind it",
+  "packageName": "@azure/communication-react",
+  "email": "miguelgamis@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx

@@ -229,7 +229,7 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
         )}
         {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}
       </Stack>
-      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />
+      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} aria-hidden="true" />
       {wrappedLocalVideoComponent}
     </Stack>
   );

packages/react-components/src/components/VideoGallery/FocusContentLayout.tsx

@@ -34,7 +34,7 @@ export const FocusedContentLayout = (props: FocusedContentLayoutProps): JSX.Elem
 
   return (
     <Stack styles={rootLayoutStyle}>
-      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />
+      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} aria-hidden="true" />
       <Stack styles={innerLayoutStyle} tokens={videoGalleryLayoutGap}>
         {screenShareComponent ? screenShareComponent : <></>}
       </Stack>

packages/react-components/src/components/VideoGallery/SpeakerVideoLayout.tsx

@@ -197,7 +197,7 @@ export const SpeakerVideoLayout = (props: SpeakerVideoLayoutProps): JSX.Element
         )}
         {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}
       </Stack>
-      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />
+      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} aria-hidden="true" />
       {wrappedLocalVideoComponent}
     </Stack>
   );