ContextualMenu A11y Narrator Bug Fix (#3905)

* fix narrator bug

* remove comment

* remove unused expanded prop

* Change files

* gate to win32

Author: gulnazsayed

apps/fluent-tester/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx

@@ -219,6 +219,7 @@ const NestedContextualMenu: React.FunctionComponent = () => {
             itemKey="4"
             onHoverIn={toggleShowSubmenu}
             componentRef={stdMenuItemRef}
+            expanded={showSubmenu}
           />
           {showSubmenu && (
             <Submenu target={stdMenuItemRef} onDismiss={onDismissSubmenu} onShow={onShowSubmenu} setShowMenu={toggleShowSubmenu}>
@@ -446,6 +447,7 @@ const ScrollViewContextualMenu: React.FunctionComponent = () => {
             itemKey="3"
             onHoverIn={toggleShowSubmenu}
             componentRef={stdMenuItemRef}
+            expanded={showSubmenu}
           />
           {showSubmenu && (
             <Submenu

change/@fluentui-react-native-contextual-menu-afedfcb6-aa33-44d3-b8b8-34fdac7c6aac.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix narrator bug",
+  "packageName": "@fluentui-react-native/contextual-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tester-2eaad448-2e52-45c1-a3ad-4fca74c313a5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix narrator bug",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/components/ContextualMenu/src/ContextualMenuItem.types.ts

@@ -2,8 +2,7 @@ import type * as React from 'react';
 
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import type { IconProps } from '@fluentui-react-native/icon';
-import type { IFocusable, IPressableState } from '@fluentui-react-native/interactive-hooks';
-import type { IPressableProps } from '@fluentui-react-native/pressable';
+import type { IFocusable, IPressableState, PressablePropsExtended } from '@fluentui-react-native/interactive-hooks';
 import type { ITextProps } from '@fluentui-react-native/text';
 import type { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
 import type { IRenderData } from '@uifabricshared/foundation-composable';
@@ -48,7 +47,7 @@ export interface ContextualMenuItemTokens extends FontTokens, IForegroundColorTo
   iconWeight?: number;
 }
 
-export interface ContextualMenuItemProps extends Omit<IPressableProps, 'onPress'> {
+export interface ContextualMenuItemProps extends Omit<PressablePropsExtended, 'onPress'> {
   /*
    ** A unique key-identifier for each menu item
    */

packages/components/ContextualMenu/src/SubmenuItem.tsx

@@ -27,6 +27,7 @@ export const SubmenuItem = compose<SubmenuItemType>({
     const defaultComponentRef = React.useRef(null);
     const {
       disabled,
+      expanded,
       itemKey,
       icon,
       text,
@@ -147,23 +148,44 @@ export const SubmenuItem = compose<SubmenuItemType>({
     const onKeyDownProps = useKeyDownProps(showSubmenuOnKeyDown, ' ', 'Enter', 'ArrowLeft', 'ArrowRight');
     const onAccTap = onAccessibilityTap ?? onItemPress;
 
-    // grab the styling information, referencing the state as well as the props
+    // Default accessibility actions to help screen readers announce expanded/collapsed state
+    // Only provide on win32 to follow platform-specific accessibility patterns
+    const defaultAccessibilityActions = React.useMemo(() => {
+      if (Platform.OS === ('win32' as any)) {
+        return [
+          { name: 'Expand', label: 'Expand submenu' },
+          { name: 'Collapse', label: 'Collapse submenu' },
+        ];
+      }
+      return [];
+    }, []);
+
+    // Merge user accessibility actions with defaults
+    const finalAccessibilityActions = React.useMemo(() => {
+      const userActions = userProps.accessibilityActions;
+      if (userActions && userActions.length > 0) {
+        return [...defaultAccessibilityActions, ...userActions];
+      }
+      return defaultAccessibilityActions;
+    }, [userProps.accessibilityActions, defaultAccessibilityActions]);
+
     const styleProps = useStyling(userProps, (override: string) => state[override] || userProps[override]);
     // create the merged slot props
     const slotProps = mergeSettings<SubmenuItemSlotProps>(styleProps, {
       root: {
         ref: cmRef,
         ...pressablePropsModified,
         ...onKeyDownProps,
+        ...rest,
         accessible: true,
         accessibilityLabel: accessibilityLabel,
         accessibilityRole: 'menuitem',
-        accessibilityState: { disabled: state.disabled ?? false, selected: state.selected },
+        accessibilityState: { disabled: state.disabled ?? false, expanded: expanded ?? false, selected: state.selected },
         accessibilityValue: { text: itemKey },
+        accessibilityActions: finalAccessibilityActions,
         disabled,
         focusable: !disabled,
         onAccessibilityTap: onAccTap,
-        ...rest,
       },
       content: {
         accessible: false,

packages/components/ContextualMenu/src/SubmenuItem.types.ts

@@ -11,7 +11,12 @@ export const submenuItemName = 'SubmenuItem';
 export interface SubmenuItemTokens extends ContextualMenuItemTokens {
   chevronColor?: string;
 }
-export type SubmenuItemProps = ContextualMenuItemProps;
+export interface SubmenuItemProps extends ContextualMenuItemProps {
+  /**
+   * Whether the submenu is currently expanded/visible
+   */
+  expanded?: boolean;
+}
 
 export type SubmenuItemState = ContextualMenuItemState;