Make Button respect accessibilityRole passed in props (#2358)

e.g. I'd like to be able to use things like menuitem or similar, which indicates a button-like control in a list of similar controls.

Testing:

* I see the expected role now with tools, e.g. Accessibility Insights.

Author: nakambo

apps/E2E/src/Button/consts.ts

@@ -17,7 +17,7 @@ export const BUTTON_ACCESSIBILITY_LABEL = 'E2E testing Button accessibility labe
 
 /* Test Button 2 */
 export const BUTTON_NO_A11Y_LABEL_COMPONENT = 'Button_No_A11y_label_Component';
-export const BUTTON_TEST_COMPONENT_LABEL = 'Test Button2 - No Accessibility Label'; // A component on each specific test page
+export const BUTTON_TEST_COMPONENT_LABEL = 'Test Button2 - No Accessibility Label + Custom Role'; // A component on each specific test page
 
 /* Test Button 3 */
 export const BUTTON_PRESS_TEST_COMPONENT = 'Button_Press_Test_Component';

apps/fluent-tester/src/TestComponents/Button/E2EButtonTest.tsx

@@ -51,7 +51,7 @@ export const E2EButtonExperimentalTest: React.FunctionComponent = () => {
         <Button testID={BUTTON_TEST_COMPONENT} onClick={onClick} accessibilityLabel={BUTTON_ACCESSIBILITY_LABEL}>
           This is a button for E2E testing
         </Button>
-        <Button testID={BUTTON_NO_A11Y_LABEL_COMPONENT} onClick={onClick}>
+        <Button testID={BUTTON_NO_A11Y_LABEL_COMPONENT} onClick={onClick} accessibilityRole="menuitem">
           {BUTTON_TEST_COMPONENT_LABEL}
         </Button>
         <Button

change/@fluentui-react-native-button-eb705dc6-e53f-439a-a1fc-eb903f51f8b4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Make Button respect accessibilityRole passed in props",
+  "packageName": "@fluentui-react-native/button",
+  "email": "email not defined",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-e2e-testing-45958f83-5a2d-4e8e-9cee-a9925208975a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Rename a test button to reflect new actual usage",
+  "packageName": "@fluentui-react-native/e2e-testing",
+  "email": "email not defined",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tester-0fa1fa74-25c1-419a-bce4-ce04f9d95fd1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Test case for Button with accessibilityRole",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "email not defined",
+  "dependentChangeType": "patch"
+}

packages/components/Button/src/useButton.ts

@@ -4,7 +4,7 @@ import { ButtonProps, ButtonInfo } from './Button.types';
 
 export const useButton = (props: ButtonProps): ButtonInfo => {
   const defaultComponentRef = React.useRef(null);
-  const { onClick, componentRef = defaultComponentRef, disabled, loading, enableFocusRing, focusable, ...rest } = props;
+  const { onClick, accessibilityRole, componentRef = defaultComponentRef, disabled, loading, enableFocusRing, focusable, ...rest } = props;
   const isDisabled = !!disabled || !!loading;
   // GH #1336: Set focusRef to null if button is disabled to prevent getting keyboard focus.
   const focusRef = isDisabled ? null : componentRef;
@@ -24,7 +24,7 @@ export const useButton = (props: ButtonProps): ButtonInfo => {
        */
       ...(isDisabled && { disabled: isDisabled }),
       accessible: true,
-      accessibilityRole: 'button',
+      accessibilityRole: accessibilityRole || 'button',
       onAccessibilityTap: props.onAccessibilityTap || (!hasTogglePattern ? props.onClick : undefined),
       accessibilityLabel: props.accessibilityLabel,
       enableFocusRing: enableFocusRing ?? true,