From 24b380bbcde802441ea356e55d141525117bc4d1 Mon Sep 17 00:00:00 2001
From: Roy Fang <rofang@microsoft.com>
Date: Tue, 2 Sep 2025 13:39:43 -0700
Subject: [PATCH 1/4] Fix some accessibility issues in the fluent tester
 contextual menu section

---
 .../ContextualMenu/ContextualMenuTest.tsx     | 31 +++++--------------
 1 file changed, 8 insertions(+), 23 deletions(-)

diff --git a/apps/fluent-tester/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx b/apps/fluent-tester/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx
index 8c74f69d15..4f3750f591 100644
--- a/apps/fluent-tester/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx
+++ b/apps/fluent-tester/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx
@@ -1,17 +1,9 @@
 import * as React from 'react';
 import { Text, View, Switch } from 'react-native';
 
-import {
-  Text as FURNText,
-  ButtonV1 as Button,
-  ContextualMenu,
-  ContextualMenuItem,
-  Submenu,
-  SubmenuItem,
-  Separator,
-  Checkbox,
-} from '@fluentui/react-native';
+import { Text as FURNText, ContextualMenu, ContextualMenuItem, Submenu, SubmenuItem, Separator, Checkbox } from '@fluentui/react-native';
 import { CONTEXTUALMENU_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import { MenuButton } from '@fluentui-react-native/experimental-menu-button';
 
 import { E2EContextualMenuTest } from './E2EContextualMenuTest';
 import { svgProps, fontProps, testImage } from '../Common/iconExamples';
@@ -89,9 +81,7 @@ const ContextualMenuMainTest: React.FunctionComponent = () => {
               <Text style={{ color: 'blue' }}>none</Text>
             )}
           </Text>
-          <Button onClick={toggleShowContextualMenu} componentRef={stdBtnRef}>
-            Press for ContextualMenu
-          </Button>
+          <MenuButton content="Press for ContextualMenu" onClick={toggleShowContextualMenu} componentRef={stdBtnRef} />
         </View>
       </View>
 
@@ -193,9 +183,7 @@ const NestedContextualMenu: React.FunctionComponent = () => {
             <Text>Submenu Visibility: </Text>
             {isSubmenuVisible ? <Text style={{ color: 'green' }}>Visible</Text> : <Text style={{ color: 'red' }}>Not Visible</Text>}
           </Text>
-          <Button onClick={toggleShowContextualMenu} componentRef={stdBtnRef}>
-            Press for ContextualMenu
-          </Button>
+          <MenuButton content="Press for ContextualMenu" onClick={toggleShowContextualMenu} componentRef={stdBtnRef} />
         </View>
       </View>
 
@@ -290,13 +278,12 @@ const IconContextualMenu: React.FunctionComponent = () => {
             <Text>Menu Visibility: </Text>
             {isContextualMenuVisible ? <Text style={{ color: 'green' }}>Visible</Text> : <Text style={{ color: 'red' }}>Not Visible</Text>}
           </Text>
-          <Button
+          <MenuButton
             componentRef={stdBtnRef}
-            style={{ borderWidth: 0 }}
-            icon={{ svgSource: svgProps, width: 12, height: 12 }}
+            icon={{ svgSource: svgProps, height: 12, width: 12 }}
             onClick={toggleShowContextualMenu}
             accessibilityLabel="Wheelchair icon button"
-            tooltip="Toggle menu"
+            tooltip="Toggles the wheelchair icon button's contextual menu"
           />
         </View>
       </View>
@@ -421,9 +408,7 @@ const ScrollViewContextualMenu: React.FunctionComponent = () => {
           <Text>
             <Text>Menu and Submenu max height set to 200</Text>
           </Text>
-          <Button onClick={toggleShowContextualMenu} componentRef={stdBtnRef}>
-            Press for ContextualMenu
-          </Button>
+          <MenuButton content="Press for ContextualMenu" onClick={toggleShowContextualMenu} componentRef={stdBtnRef} />
         </View>
       </View>
 

From 7b135e9ef47dbed3bfaef0d4f6269d3a63254d7e Mon Sep 17 00:00:00 2001
From: Roy Fang <rofang@microsoft.com>
Date: Tue, 2 Sep 2025 13:45:44 -0700
Subject: [PATCH 2/4] Change files

---
 ...native-tester-3d10d2f0-4d31-4298-a14b-defecf48f2ce.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-native-tester-3d10d2f0-4d31-4298-a14b-defecf48f2ce.json

diff --git a/change/@fluentui-react-native-tester-3d10d2f0-4d31-4298-a14b-defecf48f2ce.json b/change/@fluentui-react-native-tester-3d10d2f0-4d31-4298-a14b-defecf48f2ce.json
new file mode 100644
index 0000000000..c53a0bbdba
--- /dev/null
+++ b/change/@fluentui-react-native-tester-3d10d2f0-4d31-4298-a14b-defecf48f2ce.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix some accessibility issues in the fluent tester contextual menu section",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "rofang@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 67f0a5b60f563cee5b8942db6582008f47884537 Mon Sep 17 00:00:00 2001
From: Roy Fang <rofang@microsoft.com>
Date: Thu, 11 Sep 2025 11:19:56 -0700
Subject: [PATCH 3/4] Changes per comments

---
 .../ContextualMenu/ContextualMenuTest.tsx          | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/fluent-tester/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx b/apps/fluent-tester/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx
index 4f3750f591..bd63e2e2b9 100644
--- a/apps/fluent-tester/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx
+++ b/apps/fluent-tester/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx
@@ -1,9 +1,17 @@
 import * as React from 'react';
 import { Text, View, Switch } from 'react-native';
 
-import { Text as FURNText, ContextualMenu, ContextualMenuItem, Submenu, SubmenuItem, Separator, Checkbox } from '@fluentui/react-native';
+import {
+  Text as FURNText,
+  ContextualMenu,
+  ContextualMenuItem,
+  MenuButton,
+  Submenu,
+  SubmenuItem,
+  Separator,
+  Checkbox,
+} from '@fluentui/react-native';
 import { CONTEXTUALMENU_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import { MenuButton } from '@fluentui-react-native/experimental-menu-button';
 
 import { E2EContextualMenuTest } from './E2EContextualMenuTest';
 import { svgProps, fontProps, testImage } from '../Common/iconExamples';
@@ -280,7 +288,7 @@ const IconContextualMenu: React.FunctionComponent = () => {
           </Text>
           <MenuButton
             componentRef={stdBtnRef}
-            icon={{ svgSource: svgProps, height: 12, width: 12 }}
+            startIcon={{ svgSource: svgProps, height: 12, width: 12 }}
             onClick={toggleShowContextualMenu}
             accessibilityLabel="Wheelchair icon button"
             tooltip="Toggles the wheelchair icon button's contextual menu"

From 9e42e296e6d6e439f91a009c458c9162842b0093 Mon Sep 17 00:00:00 2001
From: Roy Fang <rofang@microsoft.com>
Date: Thu, 11 Sep 2025 14:40:45 -0700
Subject: [PATCH 4/4] Reverting to experimental menu button to test automation
 failure

---
 .../ContextualMenu/ContextualMenuTest.tsx          | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/apps/fluent-tester/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx b/apps/fluent-tester/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx
index bd63e2e2b9..4f3750f591 100644
--- a/apps/fluent-tester/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx
+++ b/apps/fluent-tester/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx
@@ -1,17 +1,9 @@
 import * as React from 'react';
 import { Text, View, Switch } from 'react-native';
 
-import {
-  Text as FURNText,
-  ContextualMenu,
-  ContextualMenuItem,
-  MenuButton,
-  Submenu,
-  SubmenuItem,
-  Separator,
-  Checkbox,
-} from '@fluentui/react-native';
+import { Text as FURNText, ContextualMenu, ContextualMenuItem, Submenu, SubmenuItem, Separator, Checkbox } from '@fluentui/react-native';
 import { CONTEXTUALMENU_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import { MenuButton } from '@fluentui-react-native/experimental-menu-button';
 
 import { E2EContextualMenuTest } from './E2EContextualMenuTest';
 import { svgProps, fontProps, testImage } from '../Common/iconExamples';
@@ -288,7 +280,7 @@ const IconContextualMenu: React.FunctionComponent = () => {
           </Text>
           <MenuButton
             componentRef={stdBtnRef}
-            startIcon={{ svgSource: svgProps, height: 12, width: 12 }}
+            icon={{ svgSource: svgProps, height: 12, width: 12 }}
             onClick={toggleShowContextualMenu}
             accessibilityLabel="Wheelchair icon button"
             tooltip="Toggles the wheelchair icon button's contextual menu"