MenuButton Narrator A11y Bug Fix (#3920)

* expand collapse

* Change files

* fix prettier

* update snapshot

Author: gulnazsayed

change/@fluentui-react-native-experimental-menu-button-c9b218b6-9745-435f-bf0c-2aa3325fafd7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "expand collapse",
+  "packageName": "@fluentui-react-native/experimental-menu-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/experimental/MenuButton/src/MenuButton.tsx

@@ -1,6 +1,7 @@
 /** @jsxRuntime classic */
 /** @jsx withSlots */
-import React, { useRef, useState, useCallback } from 'react';
+import React, { useRef, useState, useCallback, useMemo } from 'react';
+import { Platform } from 'react-native';
 
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import type { UseSlots } from '@fluentui-react-native/framework';
@@ -37,6 +38,38 @@ export const MenuButton = compose<MenuButtonType>({
       setShowContextualMenu(!showContextualMenu);
     }, [showContextualMenu, setShowContextualMenu]);
 
+    // Default accessibility actions to help screen readers announce expanded/collapsed state
+    // Only provide on win32 to follow platform-specific accessibility patterns
+    const defaultAccessibilityActions = useMemo(() => {
+      if (Platform.OS === ('win32' as any)) {
+        return [
+          { name: 'Expand', label: 'Expand menu' },
+          { name: 'Collapse', label: 'Collapse menu' },
+        ];
+      }
+      return [];
+    }, []);
+
+    const onAccessibilityAction = useCallback(
+      (event) => {
+        if (Platform.OS === ('win32' as any)) {
+          switch (event.nativeEvent.actionName) {
+            case 'Expand':
+              if (!showContextualMenu) {
+                setShowContextualMenu(true);
+              }
+              break;
+            case 'Collapse':
+              if (showContextualMenu) {
+                setShowContextualMenu(false);
+              }
+              break;
+          }
+        }
+      },
+      [showContextualMenu],
+    );
+
     const buttonProps = {
       disabled,
       appearance,
@@ -45,6 +78,9 @@ export const MenuButton = compose<MenuButtonType>({
       componentRef: stdBtnRef,
       onClick: toggleShowContextualMenu,
       iconOnly: content ? false : true,
+      accessibilityState: { expanded: showContextualMenu },
+      accessibilityActions: defaultAccessibilityActions,
+      onAccessibilityAction,
       ...rest,
     };
 

packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap

@@ -2,14 +2,26 @@
 
 exports[`ContextualMenu default 1`] = `
 <View
+  accessibilityActions={
+    [
+      {
+        "label": "Expand menu",
+        "name": "Expand",
+      },
+      {
+        "label": "Collapse menu",
+        "name": "Collapse",
+      },
+    ]
+  }
   accessibilityLabel="Press for Nested MenuButton"
   accessibilityRole="button"
   accessibilityState={
     {
       "busy": undefined,
       "checked": undefined,
       "disabled": false,
-      "expanded": undefined,
+      "expanded": false,
       "multiselectable": undefined,
       "required": undefined,
       "selected": undefined,
@@ -36,6 +48,7 @@ exports[`ContextualMenu default 1`] = `
       },
     ]
   }
+  onAccessibilityAction={[Function]}
   onAccessibilityTap={[Function]}
   onBlur={[Function]}
   onClick={[Function]}