fix(react-menu): remove unwanted aria attributes on context menu

microsoft · Nov 10, 2022 · 98ec8dd · 98ec8dd
1 parent d1228a1
commit 98ec8dd
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/change/@fluentui-react-menu-18f45b88-3199-463a-8745-635943d6bccb.json b/change/@fluentui-react-menu-18f45b88-3199-463a-8745-635943d6bccb.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: remove unwanted aria attributes on context menu",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.types.ts b/packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.types.ts
@@ -16,7 +16,7 @@ export type MenuTriggerProps = TriggerProps<MenuTriggerChildProps> & {
 export type MenuTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<
   Type,
   Props & {
-    'aria-haspopup': 'menu';
+    'aria-haspopup'?: 'menu';
     'aria-expanded'?: boolean;
     id: string;
     ref: React.Ref<never>;

diff --git a/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts b/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts
@@ -122,22 +122,22 @@ export const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerSta
   };
 
   const contextMenuProps = {
-    'aria-haspopup': 'menu',
-    'aria-expanded': !open && !isSubmenu ? undefined : open,
     id: triggerId,
     ...child?.props,
     ref: useMergedRefs(triggerRef, child?.ref),
     onMouseEnter: useEventCallback(mergeCallbacks(child?.props.onMouseEnter, onMouseEnter)),
     onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),
     onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),
     onMouseMove: useEventCallback(mergeCallbacks(child?.props.onMouseMove, onMouseMove)),
-  } as const;
+  };
 
   const triggerChildProps = {
+    'aria-haspopup': 'menu',
+    'aria-expanded': !open && !isSubmenu ? undefined : open,
     ...contextMenuProps,
     onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),
     onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),
-  };
+  } as const;
 
   const ariaButtonTriggerChildProps = useARIAButtonProps(
     child?.type === 'button' || child?.type === 'a' ? child.type : 'div',