Add focus trap to CallingLobby

ts/components/CallingLobby.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
+import FocusTrap from 'focus-trap-react';
 import classNames from 'classnames';
 import type {
   SetLocalAudioType,
@@ -204,83 +205,85 @@ export const CallingLobby = ({
   }
 
   return (
-    <div className="module-calling__container">
-      {shouldShowLocalVideo ? (
-        <video
-          className="module-CallingLobby__local-preview module-CallingLobby__local-preview--camera-is-on"
-          ref={localVideoRef}
-          autoPlay
-        />
-      ) : (
-        <CallBackgroundBlur
-          className="module-CallingLobby__local-preview module-CallingLobby__local-preview--camera-is-off"
-          avatarPath={me.avatarPath}
-          color={me.color}
-        />
-      )}
-
-      <CallingHeader
-        i18n={i18n}
-        isGroupCall={isGroupCall}
-        participantCount={peekedParticipants.length}
-        showParticipantsList={showParticipantsList}
-        toggleParticipants={toggleParticipants}
-        toggleSettings={toggleSettings}
-        onCancel={onCallCanceled}
-      />
-
-      <CallingPreCallInfo
-        conversation={conversation}
-        groupMembers={groupMembers}
-        i18n={i18n}
-        isCallFull={isCallFull}
-        me={me}
-        peekedParticipants={peekedParticipants}
-        ringMode={preCallInfoRingMode}
-      />
-
-      <div
-        className={classNames(
-          'module-CallingLobby__camera-is-off',
-          `module-CallingLobby__camera-is-off--${
-            shouldShowLocalVideo ? 'invisible' : 'visible'
-          }`
+    <FocusTrap>
+      <div className="module-calling__container">
+        {shouldShowLocalVideo ? (
+          <video
+            className="module-CallingLobby__local-preview module-CallingLobby__local-preview--camera-is-on"
+            ref={localVideoRef}
+            autoPlay
+          />
+        ) : (
+          <CallBackgroundBlur
+            className="module-CallingLobby__local-preview module-CallingLobby__local-preview--camera-is-off"
+            avatarPath={me.avatarPath}
+            color={me.color}
+          />
         )}
-      >
-        {i18n('calling__your-video-is-off')}
-      </div>
 
-      <div className="module-calling__buttons module-calling__buttons--inline">
-        <CallingButton
-          buttonType={videoButtonType}
+        <CallingHeader
           i18n={i18n}
-          onClick={toggleVideo}
-          tooltipDirection={TooltipPlacement.Top}
+          isGroupCall={isGroupCall}
+          participantCount={peekedParticipants.length}
+          showParticipantsList={showParticipantsList}
+          toggleParticipants={toggleParticipants}
+          toggleSettings={toggleSettings}
+          onCancel={onCallCanceled}
         />
-        <CallingButton
-          buttonType={audioButtonType}
+
+        <CallingPreCallInfo
+          conversation={conversation}
+          groupMembers={groupMembers}
           i18n={i18n}
-          onClick={toggleAudio}
-          tooltipDirection={TooltipPlacement.Top}
+          isCallFull={isCallFull}
+          me={me}
+          peekedParticipants={peekedParticipants}
+          ringMode={preCallInfoRingMode}
         />
-        <CallingButton
-          buttonType={ringButtonType}
+
+        <div
+          className={classNames(
+            'module-CallingLobby__camera-is-off',
+            `module-CallingLobby__camera-is-off--${
+              shouldShowLocalVideo ? 'invisible' : 'visible'
+            }`
+          )}
+        >
+          {i18n('calling__your-video-is-off')}
+        </div>
+
+        <div className="module-calling__buttons module-calling__buttons--inline">
+          <CallingButton
+            buttonType={videoButtonType}
+            i18n={i18n}
+            onClick={toggleVideo}
+            tooltipDirection={TooltipPlacement.Top}
+          />
+          <CallingButton
+            buttonType={audioButtonType}
+            i18n={i18n}
+            onClick={toggleAudio}
+            tooltipDirection={TooltipPlacement.Top}
+          />
+          <CallingButton
+            buttonType={ringButtonType}
+            i18n={i18n}
+            isVisible={isRingButtonVisible}
+            onClick={toggleOutgoingRing}
+            tooltipDirection={TooltipPlacement.Top}
+          />
+        </div>
+
+        <CallingLobbyJoinButton
+          disabled={!canJoin}
           i18n={i18n}
-          isVisible={isRingButtonVisible}
-          onClick={toggleOutgoingRing}
-          tooltipDirection={TooltipPlacement.Top}
+          onClick={() => {
+            setIsCallConnecting(true);
+            onJoinCall();
+          }}
+          variant={callingLobbyJoinButtonVariant}
         />
       </div>
-
-      <CallingLobbyJoinButton
-        disabled={!canJoin}
-        i18n={i18n}
-        onClick={() => {
-          setIsCallConnecting(true);
-          onJoinCall();
-        }}
-        variant={callingLobbyJoinButtonVariant}
-      />
-    </div>
+    </FocusTrap>
   );
 };

ts/components/Tooltip.tsx

@@ -34,6 +34,12 @@ const TooltipEventWrapper = React.forwardRef<
     onHoverChanged(false);
   }, [onHoverChanged]);
 
+  const onFocus = React.useCallback(() => {
+    if (window.getInteractionMode() === 'keyboard') {
+      on();
+    }
+  }, [on]);
+
   React.useEffect(() => {
     const wrapperEl = wrapperRef.current;
 
@@ -52,7 +58,7 @@ const TooltipEventWrapper = React.forwardRef<
 
   return (
     <span
-      onFocus={on}
+      onFocus={onFocus}
       onBlur={off}
       ref={refMerger<HTMLSpanElement>(ref, wrapperRef)}
     >