fix tests

src/useCallViewKeyboardShortcuts.test.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { render } from "@testing-library/react";
-import { type FC, useRef, useState } from "react";
+import { type FC, useState } from "react";
 import { expect, test, vi } from "vitest";
 import { Button } from "@vector-im/compound-web";
 import userEvent from "@testing-library/user-event";
@@ -39,9 +39,7 @@ const TestComponent: FC<TestComponentProps> = ({
   initialModalOpen = false,
 }) => {
   const [modalOpen, setModalOpen] = useState(initialModalOpen);
-  const ref = useRef<HTMLDivElement | null>(null);
   useCallViewKeyboardShortcuts(
-    ref,
     () => {},
     () => {},
     setAudioEnabled,
@@ -49,8 +47,11 @@ const TestComponent: FC<TestComponentProps> = ({
     toggleHandRaised,
   );
   return (
-    <div ref={ref}>
+    <>
-      <Button onClick={onButtonClick}>TEST</Button>
+      <div id={initialModalOpen ? "root" : undefined}>
+        <Button onClick={onButtonClick}>TEST</Button>
+      </div>
+      {/*// modal lives outside of the root*/}
       {modalOpen && (
         <dialog
           open
@@ -64,7 +65,7 @@ const TestComponent: FC<TestComponentProps> = ({
           <button>InModalButton</button>
         </dialog>
       )}
-    </div>
+    </>
   );
 };
 
@@ -164,12 +165,13 @@ test("unmuting happens in place of the default action", async () => {
   // container element that can be interactive and receive focus / keydown
   // events. <video> is kind of a weird choice, but it'll do the job.
   render(
-    <video
+    <div id="root">
-      tabIndex={0}
+      <video
-      onKeyDown={(e) => defaultPrevented(e.isDefaultPrevented())}
+        tabIndex={0}
-    >
+        onKeyDown={(e) => defaultPrevented(e.isDefaultPrevented())}
-      <TestComponent setAudioEnabled={() => {}} />
+      />
-    </video>,
+      <TestComponent setAudioEnabled={() => {}} />,
+    </div>,
   );
 
   await user.tab(); // Focus the <video>

src/useCallViewKeyboardShortcuts.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type RefObject, useCallback, useMemo, useRef } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import { logger } from "matrix-js-sdk/lib/logger";
 
 import { useEventTarget } from "./useEvents";
@@ -37,6 +37,15 @@ const mayReceiveKeyEvents = (): boolean => {
   return noPrimaryFocus;
 };
 
+/**
+ * Only do push to talk behavior if the active element is not a button or button like.
+ */
+const mayReceiveSpaceKeyEvents = (): boolean => {
+  const activeElement = document.activeElement;
+  if (activeElement === null) return true;
+  return activeElement.tagName.toLowerCase() !== "button";
+};
+
 const KeyToReactionMap: Record<string, ReactionOption> = Object.fromEntries(
   ReactionSet.slice(0, ReactionsRowSize).map((r, i) => [(i + 1).toString(), r]),
 );
@@ -81,7 +90,7 @@ export function useCallViewKeyboardShortcuts(
         } else if (event.key === "v") {
           event.preventDefault();
           toggleVideo?.();
-        } else if (event.key === " ") {
+        } else if (event.key === " " && mayReceiveSpaceKeyEvents()) {
           event.preventDefault();
           if (!spacebarHeld.current) {
             spacebarHeld.current = true;
@@ -116,7 +125,7 @@ export function useCallViewKeyboardShortcuts(
     "keyup",
     useCallback(
       (event: KeyboardEvent) => {
-        if (!mayReceiveKeyEvents()) return;
+        if (!mayReceiveKeyEvents() || !mayReceiveSpaceKeyEvents()) return;
         if (event.key === " ") {
           spacebarHeld.current = false;
           setAudioEnabled?.(false);