fix(react-keytips): reported issues after bug bash vol 2 (#313)

microsoft · Mar 11, 2025 · c37b3e9 · c37b3e9
1 parent 98d5e8f
commit c37b3e9
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 17 deletions.
diff --git a/change/@fluentui-contrib-react-keytips-a4582e5f-6bff-4c22-9227-f3ec97e68845.json b/change/@fluentui-contrib-react-keytips-a4582e5f-6bff-4c22-9227-f3ec97e68845.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: reported issues after bug bash",
+  "packageName": "@fluentui-contrib/react-keytips",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-keytips/src/components/Keytips/renderKeytips.tsx b/packages/react-keytips/src/components/Keytips/renderKeytips.tsx
@@ -21,20 +21,22 @@ export const renderKeytips_unstable = (state: KeytipsState) => {
   const classes = useStyles();
 
   return (
-    <Portal
-      mountNode={{
-        className: classes.portal,
-        ...state.mountNode,
-      }}
-    >
-      <span
-        id={KTP_ROOT_ID}
-        style={VISUALLY_HIDDEN_STYLES}
-        data-start-shortcut={state.content}
+    <div id="keytips-container" aria-hidden="true">
+      <Portal
+        mountNode={{
+          className: classes.portal,
+          ...state.mountNode,
+        }}
       >
-        {state.content}
-      </span>
-      {state.keytips.length > 0 && <state.root>{state.keytips}</state.root>}
-    </Portal>
+        <span
+          id={KTP_ROOT_ID}
+          style={VISUALLY_HIDDEN_STYLES}
+          data-start-shortcut={state.content}
+        >
+          {state.content}
+        </span>
+        {state.keytips.length > 0 && <state.root>{state.keytips}</state.root>}
+      </Portal>
+    </div>
   );
 };
diff --git a/packages/react-keytips/src/hooks/useHotkeys/useHotkeys.ts b/packages/react-keytips/src/hooks/useHotkeys/useHotkeys.ts
@@ -62,10 +62,10 @@ export const useHotkeys = (
       }
     };
 
-    doc?.addEventListener(invokeEvent, handleInvokeEvent);
+    doc?.addEventListener(invokeEvent, handleInvokeEvent, true);
     doc?.addEventListener('keyup', handleKeyUp);
     return () => {
-      doc?.removeEventListener(invokeEvent, handleInvokeEvent);
+      doc?.removeEventListener(invokeEvent, handleInvokeEvent, true);
       doc?.removeEventListener('keyup', handleKeyUp);
       clearDelayTimeout();
     };

diff --git a/packages/react-keytips/stories/Overflow/OverflowMenu.tsx b/packages/react-keytips/stories/Overflow/OverflowMenu.tsx
@@ -72,7 +72,6 @@ export const OverflowMenu = ({
           ref={mergedRefs}
           icon={<MoreHorizontalRegular />}
           aria-label={`${overflowCount} more tabs`}
-          role="tab"
         />
       </MenuTrigger>
       <MenuPopover>