Fix the interactivity of buttons while reconnecting or in earpiece mode (#3486)

* Fix the interactivity of buttons while reconnecting or in earpiece mode

When we're in one of these modes, we need to ensure that everything above the overlay (the header and footer buttons) is interactive, while everything obscured by the overlay (the media tiles) is non-interactive and removed from the accessibility tree. It's not a very easy task to trap focus *outside* an element, so the best solution I could come up with is to set tabindex="-1" manually on all interactive elements belonging to the media tiles.

* Write a Playwright test for reconnecting

* fix lints

Signed-off-by: Timo K <toger5@hotmail.de>

* fix test

Signed-off-by: Timo K <toger5@hotmail.de>

* enable http2 for matrx-rtc host to allow the jwt service to talk to the SFU

* remove rate limit for delayed events

* more time to connect to livekit SFU

* Due to a Firefox issue we set the start anchor for the tab test to the Mute microphone button

* adapt to most recent Element Web version

* Use the "End call" button as proofe for a started call

* Currrenty disabled due to recent Element Web
- not indicating the number of participants
- bypassing Lobby

* linting

* disable 'can only interact with header and footer while reconnecting' for firefox

---------

Signed-off-by: Timo K <toger5@hotmail.de>
Co-authored-by: Timo <16718859+toger5@users.noreply.github.com>
Co-authored-by: Timo K <toger5@hotmail.de>
Co-authored-by: fkwp <github-fkwp@w4ve.de>

src/room/EarpieceOverlay.module.css

@@ -34,7 +34,6 @@
 
 .overlay[data-show="false"] {
   animation: fade-out 130ms forwards;
-  content-visibility: hidden;
   pointer-events: none;
 }
 

src/room/EarpieceOverlay.tsx

@@ -20,7 +20,7 @@ interface Props {
 export const EarpieceOverlay: FC<Props> = ({ show, onBackToVideoPressed }) => {
   const { t } = useTranslation();
   return (
-    <div className={styles.overlay} data-show={show}>
+    <div className={styles.overlay} data-show={show} aria-hidden={!show}>
       <BigIcon className={styles.icon}>
         <VoiceCallIcon aria-hidden />
       </BigIcon>

src/room/InCallView.tsx

@@ -54,7 +54,6 @@ import { type HeaderStyle, useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { ElementWidgetActions, widget } from "../widget";
 import styles from "./InCallView.module.css";
-import overlayStyles from "../Overlay.module.css";
 import { GridTile } from "../tile/GridTile";
 import { type OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
@@ -119,6 +118,7 @@ import { EarpieceOverlay } from "./EarpieceOverlay.tsx";
 import { useAppBarHidden, useAppBarSecondaryButton } from "../AppBar.tsx";
 import { useBehavior } from "../useBehavior.ts";
 import { Toast } from "../Toast.tsx";
+import overlayStyles from "../Overlay.module.css";
 import { Avatar, Size as AvatarSize } from "../Avatar";
 import waitingStyles from "./WaitingForJoin.module.css";
 import { prefetchSounds } from "../soundUtils";
@@ -641,6 +641,38 @@ export const InCallView: FC<InCallViewProps> = ({
     }
   }
 
+  // The reconnecting toast cannot be dismissed
+  const onDismissReconnectingToast = useCallback(() => {}, []);
+  // We need to use a non-modal toast to avoid trapping focus within the toast.
+  // However, a non-modal toast will not render any background overlay on its
+  // own, so we must render one manually.
+  const reconnectingToast = (
+    <>
+      <div
+        className={classNames(overlayStyles.bg, overlayStyles.animate)}
+        data-state={reconnecting ? "open" : "closed"}
+      />
+      <Toast
+        onDismiss={onDismissReconnectingToast}
+        open={reconnecting}
+        modal={false}
+      >
+        {t("common.reconnecting")}
+      </Toast>
+    </>
+  );
+
+  const earpieceOverlay = (
+    <EarpieceOverlay
+      show={earpieceMode && !reconnecting}
+      onBackToVideoPressed={audioOutputSwitcher?.switch}
+    />
+  );
+
+  // If the reconnecting toast or earpiece overlay obscures the media tiles, we
+  // need to remove them from the accessibility tree and block focus.
+  const contentObscured = reconnecting || earpieceMode;
+
   const Tile = useMemo(
     () =>
       function Tile({
@@ -670,6 +702,7 @@ export const InCallView: FC<InCallViewProps> = ({
             className={classNames(className, styles.tile)}
             style={style}
             showSpeakingIndicators={showSpeakingIndicatorsValue}
+            focusable={!contentObscured}
           />
         ) : (
           <SpotlightTile
@@ -680,12 +713,13 @@ export const InCallView: FC<InCallViewProps> = ({
             targetWidth={targetWidth}
             targetHeight={targetHeight}
             showIndicators={showSpotlightIndicatorsValue}
+            focusable={!contentObscured}
             className={classNames(className, styles.tile)}
             style={style}
           />
         );
       },
-    [vm, openProfile],
+    [vm, openProfile, contentObscured],
   );
 
   const layouts = useMemo(() => {
@@ -714,6 +748,8 @@ export const InCallView: FC<InCallViewProps> = ({
           targetWidth={gridBounds.height}
           targetHeight={gridBounds.width}
           showIndicators={false}
+          focusable={!contentObscured}
+          aria-hidden={contentObscured}
         />
       );
     }
@@ -731,6 +767,7 @@ export const InCallView: FC<InCallViewProps> = ({
         model={layout}
         Layout={layers.fixed}
         Tile={Tile}
+        aria-hidden={contentObscured}
       />
     );
     const scrollingGrid = (
@@ -740,6 +777,7 @@ export const InCallView: FC<InCallViewProps> = ({
         model={layout}
         Layout={layers.scrolling}
         Tile={Tile}
+        aria-hidden={contentObscured}
       />
     );
     // The grid tiles go *under* the spotlight in the portrait layout, but
@@ -869,9 +907,6 @@ export const InCallView: FC<InCallViewProps> = ({
     </div>
   );
 
-  // The reconnecting toast cannot be dismissed
-  const onDismissReconnectingToast = useCallback(() => {}, []);
-
   return (
     <div
       className={styles.inRoom}
@@ -899,17 +934,8 @@ export const InCallView: FC<InCallViewProps> = ({
       {renderContent()}
       <CallEventAudioRenderer vm={vm} muted={muteAllAudio} />
       <ReactionsAudioRenderer vm={vm} muted={muteAllAudio} />
-      <Toast
-        onDismiss={onDismissReconnectingToast}
-        open={reconnecting}
-        portal={false}
-      >
-        {t("common.reconnecting")}
-      </Toast>
-      <EarpieceOverlay
-        show={earpieceMode && !reconnecting}
-        onBackToVideoPressed={audioOutputSwitcher?.switch}
-      />
+      {reconnectingToast}
+      {earpieceOverlay}
       <ReactionsOverlay vm={vm} />
       {waitingOverlay}
       {footer}

src/room/__snapshots__/InCallView.test.tsx.snap

@@ -111,6 +111,11 @@ exports[`InCallView > rendering > renders 1`] = `
       <div />
     </div>
     <div
+      class="bg animate"
+      data-state="closed"
+    />
+    <div
+      aria-hidden="true"
       class="overlay"
       data-show="false"
     >