fix: allow pass-through of accessibilityRole prop on Button.tsx (#4092)

callstack · Jan 8, 2024 · 220ae16 · 220ae16
1 parent 4d57fe2
commit 220ae16
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/scripts/typescript-output-lint.js b/scripts/typescript-output-lint.js
@@ -15,7 +15,6 @@ const output = path.join(root, 'lib', 'typescript');
 const unusedViewProps = [
   'nativeID',
   'accessibilityActions',
-  'accessibilityRole',
   'accessibilityValue',
   'onAccessibilityAction',
   'accessibilityLabelledBy',

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  AccessibilityRole,
   Animated,
   ColorValue,
   GestureResponderEvent,
@@ -90,6 +91,10 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Accessibility hint for the button. This is read by the screen reader when the user taps the button.
    */
   accessibilityHint?: string;
+  /**
+   * Accessibility role for the button. The "button" role is set by default.
+   */
+  accessibilityRole?: AccessibilityRole;
   /**
    * Function to execute on press.
    */
@@ -165,6 +170,7 @@ const Button = (
     children,
     accessibilityLabel,
     accessibilityHint,
+    accessibilityRole = 'button',
     onPress,
     onPressIn,
     onPressOut,
@@ -326,7 +332,7 @@ const Button = (
         delayLongPress={delayLongPress}
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
-        accessibilityRole="button"
+        accessibilityRole={accessibilityRole}
         accessibilityState={{ disabled }}
         accessible={accessible}
         disabled={disabled}