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,6 +205,7 @@ export const CallingLobby = ({
   }
 
   return (
+    <FocusTrap>
       <div className="module-calling__container">
         {shouldShowLocalVideo ? (
           <video
@@ -282,5 +284,6 @@ export const CallingLobby = ({
           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)}
     >