@fluentui-react-native/menu 0.11.0 → 0.13.0

package/src/MenuPopover/MenuPopover.types.ts

@@ -1,11 +1,12 @@
-import type { IViewProps } from '@fluentui-react-native/adapters';
-import { DirectionalHint, DismissBehaviors } from '@fluentui-react-native/callout';
+import { DirectionalHint, DismissBehaviors, ICalloutProps } from '@fluentui-react-native/callout';
+import { AccessibilityRole } from 'react-native';
 
 export const menuPopoverName = 'MenuPopover';
 
-export interface MenuPopoverProps extends Omit<IViewProps, 'onPress'> {}
+export type MenuPopoverProps = ICalloutProps;
 
 export interface MenuPopoverState {
+  accessibilityRole: AccessibilityRole;
   directionalHint?: DirectionalHint;
   dismissBehaviors: DismissBehaviors[];
   doNotTakePointerCapture: boolean;

package/src/MenuPopover/useMenuPopover.ts

@@ -19,8 +19,9 @@ export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
   // automatically onto first element of Callout
   const setInitialFocus = Platform.OS === ('win32' as any) || Platform.OS === 'windows';
   const doNotTakePointerCapture = context.openOnHover;
+  const accessibilityRole = 'menu';
 
-  return { triggerRef, onDismiss, directionalHint, dismissBehaviors, doNotTakePointerCapture, setInitialFocus };
+  return { accessibilityRole, triggerRef, onDismiss, directionalHint, dismissBehaviors, doNotTakePointerCapture, setInitialFocus };
 };
 
 const getDirectionalHint = (isSubmenu: boolean, isRtl: boolean): DirectionalHint | undefined => {

package/src/MenuTrigger/MenuTrigger.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { stagedComponent } from '@fluentui-react-native/framework';
-import { menuTriggerName, MenuTriggerProps } from './MenuTrigger.types';
+import { memoize, stagedComponent } from '@fluentui-react-native/framework';
+import { menuTriggerName, MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
 import { useMenuTrigger } from './useMenuTrigger';
+import { AccessibilityActionEvent } from 'react-native';
 import { MenuTriggerProvider } from '../context/menuTriggerContext';
 
 export const MenuTrigger = stagedComponent((props: MenuTriggerProps) => {
@@ -16,12 +17,37 @@ export const MenuTrigger = stagedComponent((props: MenuTriggerProps) => {
       }
     }
 
+    // In order to properly support accessibility without erasing props set on the
+    // child component which may affect accessibility, we need to modify the
+    // state in the inner render so we can access the child component and its props.
     const child = childrenArray[0];
-    const revised = React.cloneElement(child, menuTrigger.props);
+    const revisedState = getRevisedState(menuTrigger, child.props);
+    const revised = React.cloneElement(child, revisedState);
 
     return <MenuTriggerProvider value={menuTrigger.hasSubmenu}>{revised}</MenuTriggerProvider>;
   };
 });
 MenuTrigger.displayName = menuTriggerName;
 
+const getRevisedState = memoize(getRevisedStateWorker);
+function getRevisedStateWorker(state: MenuTriggerState, props: any): MenuTriggerState {
+  const revisedState = { ...state };
+  if (props.accessibilityState) {
+    revisedState.props.accessibilityState = { ...state.props.accessibilityState, ...props.accessibilityState };
+  }
+
+  if (props.accessibilityActions) {
+    revisedState.props.accessibilityActions = { ...state.props.accessibilityActions, ...props.accessibilityActions };
+  }
+
+  if (props.onAccessibilityAction) {
+    revisedState.props.onAccessibilityAction = (e: AccessibilityActionEvent) => {
+      state.props.onAccessibilityAction(e);
+      props.onAccessibilityAction(e);
+    };
+  }
+
+  return revisedState;
+}
+
 export default MenuTrigger;

package/src/MenuTrigger/MenuTrigger.types.ts

@@ -9,6 +9,9 @@ export interface MenuTriggerProps extends Omit<IWithPressableOptions<ViewProps>,
    */
   componentRef?: React.RefObject<React.Component>;
 
+  /**
+   * A callback to call on button click event
+   */
   onClick?: (e: InteractionEvent) => void;
 }
 

package/src/MenuTrigger/useMenuTrigger.ts

@@ -1,7 +1,11 @@
 import { useMenuContext } from '../context/menuContext';
 import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 import { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
-import { Platform } from 'react-native';
+import { AccessibilityActionEvent, AccessibilityActionName, Platform } from 'react-native';
+import React from 'react';
+
+const accessibilityActions =
+  Platform.OS === ('win32' as any) ? [{ name: 'Expand' as AccessibilityActionName }, { name: 'Collapse' as AccessibilityActionName }] : [];
 
 export const useMenuTrigger = (_props: MenuTriggerProps): MenuTriggerState => {
   const context = useMenuContext();
@@ -10,6 +14,23 @@ export const useMenuTrigger = (_props: MenuTriggerProps): MenuTriggerState => {
   const open = context.open;
   const openOnHover = context.openOnHover;
   const triggerRef = context.triggerRef;
+  const accessibilityState = context.open ? { expanded: true } : { expanded: false };
+  const onAccessibilityAction = React.useCallback(
+    (e: AccessibilityActionEvent) => {
+      if (Platform.OS === ('win32' as any)) {
+        switch (e.nativeEvent.actionName) {
+          case 'Expand':
+            setOpen(e, true /* isOpen */);
+            break;
+
+          case 'Collapse':
+            setOpen(e, false /* isOpen */);
+            break;
+        }
+      }
+    },
+    [setOpen],
+  );
 
   const delayHover = Platform.select({
     macos: 100,
@@ -33,7 +54,17 @@ export const useMenuTrigger = (_props: MenuTriggerProps): MenuTriggerState => {
   };
 
   return {
-    props: { onClick, onHoverIn, onHoverOut, componentRef: triggerRef, delayHoverIn: delayHover, delayHoverOut: delayHover },
+    props: {
+      onClick,
+      onHoverIn,
+      onHoverOut: Platform.OS === ('win32' as any) && onHoverOut,
+      componentRef: triggerRef,
+      delayHoverIn: delayHover,
+      delayHoverOut: Platform.OS === ('win32' as any) && delayHover,
+      accessibilityState,
+      accessibilityActions,
+      onAccessibilityAction,
+    },
     hasSubmenu: context.isSubmenu,
   };
 };