refactor: migrate accessibility props to aria props

Author: lukewalczak

example/src/Examples/FABExample.tsx

@@ -123,7 +123,7 @@ const FABExample = () => {
           <FAB.Group
             open={open}
             icon={open ? 'calendar-today' : 'plus'}
-            accessibilityLabel="Calendar FAB"
+            aria-label="Calendar FAB"
             toggleStackOnLongPress={toggleStackOnLongPress}
             actions={[
               { icon: 'plus', onPress: () => {} },

src/components/ActivityIndicator.tsx

@@ -153,8 +153,8 @@ const ActivityIndicator = ({
       style={[styles.container, style]}
       {...rest}
       accessible
-      accessibilityRole="progressbar"
-      accessibilityState={{ busy: animating }}
+      role="progressbar"
+      aria-busy={animating}
     >
       <Animated.View
         style={[{ width: size, height: size, opacity: fade }]}

src/components/Appbar/AppbarAction.tsx

@@ -112,7 +112,7 @@ const AppbarAction = forwardRef<View, Props>(
         iconColor={actionIconColor}
         icon={icon}
         disabled={disabled}
-        accessibilityLabel={accessibilityLabel}
+        aria-label={accessibilityLabel}
         animated
         ref={ref}
         rippleColor={rippleColor}

src/components/Appbar/AppbarBackAction.tsx

@@ -60,7 +60,7 @@ export type Props = $Omit<
 const AppbarBackAction = forwardRef<View, Props>(
   ({ accessibilityLabel = 'Back', ...rest }: Props, ref) => (
     <AppbarAction
-      accessibilityLabel={accessibilityLabel}
+      aria-label={accessibilityLabel}
       {...rest}
       icon={AppbarBackIcon}
       isLeading

src/components/Appbar/AppbarContent.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import {
-  AccessibilityRole,
   GestureResponderEvent,
-  Platform,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -148,16 +146,7 @@ const AppbarContent = ({
             titleStyle,
           ]}
           numberOfLines={1}
-          accessible
-          accessibilityRole={
-            onPress
-              ? 'none'
-              : Platform.OS === 'web'
-              ? ('heading' as 'header')
-              : 'header'
-          }
-          // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
-          accessibilityTraits="header"
+          role={onPress ? 'none' : 'heading'}
           testID={`${testID}-title-text`}
           maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
         >
@@ -171,13 +160,9 @@ const AppbarContent = ({
 
   if (onPress) {
     return (
-      // eslint-disable-next-line react-native-a11y/has-accessibility-props
       <Pressable
-        accessibilityRole={touchableRole}
-        // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
-        accessibilityTraits={touchableRole}
-        accessibilityComponentType="button"
-        accessbilityState={disabled ? 'disabled' : null}
+        role="button"
+        aria-disabled={disabled}
         onPress={onPress}
         disabled={disabled}
         {...contentWrapperProps}
@@ -213,8 +198,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const touchableRole: AccessibilityRole = 'button';
-
 export default AppbarContent;
 
 // @component-docs ignore-next-line

src/components/Banner.tsx

@@ -231,8 +231,8 @@ const Banner = ({
                   color: onSurface,
                 },
               ]}
-              accessibilityLiveRegion={visible ? 'polite' : 'none'}
-              accessibilityRole="alert"
+              aria-live={visible ? 'polite' : 'off'}
+              role="alert"
               maxFontSizeMultiplier={maxFontSizeMultiplier}
             >
               {children}

src/components/BottomNavigation/BottomNavigationBar.tsx

@@ -543,7 +543,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
               maxWidth: maxTabBarWidth,
             },
           ]}
-          accessibilityRole={'tablist'}
+          role={'tablist'}
           testID={`${testID}-content-wrapper`}
         >
           {routes.map((route, index) => {
@@ -622,9 +622,9 @@ const BottomNavigationBar = <Route extends BaseRoute>({
               onPress: () => onTabPress(eventForIndex(index)),
               onLongPress: () => onTabLongPress?.(eventForIndex(index)),
               testID: getTestID({ route }),
-              accessibilityLabel: getAccessibilityLabel({ route }),
-              accessibilityRole: Platform.OS === 'ios' ? 'button' : 'tab',
-              accessibilityState: { selected: focused },
+              'aria-label': getAccessibilityLabel({ route }),
+              role: Platform.OS === 'ios' ? 'button' : 'tab',
+              'aria-selected': focused,
               style: [styles.item],
               children: (
                 <View

src/components/Button/Button.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import {
-  AccessibilityRole,
   Animated,
   ColorValue,
   GestureResponderEvent,
   Platform,
   PressableAndroidRippleConfig,
+  Role,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -106,7 +106,7 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
   /**
    * Accessibility role for the button. The "button" role is set by default.
    */
-  accessibilityRole?: AccessibilityRole;
+  accessibilityRole?: Role;
   /**
    * Function to execute on press.
    */
@@ -357,10 +357,10 @@ const Button = (
         onPressIn={hasPassedTouchHandler ? handlePressIn : undefined}
         onPressOut={hasPassedTouchHandler ? handlePressOut : undefined}
         delayLongPress={delayLongPress}
-        accessibilityLabel={accessibilityLabel}
+        aria-label={accessibilityLabel}
         accessibilityHint={accessibilityHint}
-        accessibilityRole={accessibilityRole}
-        accessibilityState={{ disabled }}
+        role={accessibilityRole}
+        aria-disabled={disabled}
         accessible={accessible}
         hitSlop={hitSlop}
         disabled={disabled}

src/components/Checkbox/CheckboxAndroid.tsx

@@ -126,9 +126,9 @@ const CheckboxAndroid = ({
       rippleColor={rippleColor}
       onPress={onPress}
       disabled={disabled}
-      accessibilityRole="checkbox"
-      accessibilityState={{ disabled, checked }}
-      accessibilityLiveRegion="polite"
+      role="checkbox"
+      aria-checked={checked}
+      aria-disabled={disabled}
       style={styles.container}
       testID={testID}
       theme={theme}

src/components/Checkbox/CheckboxIOS.tsx

@@ -69,9 +69,9 @@ const CheckboxIOS = ({
       rippleColor={rippleColor}
       onPress={onPress}
       disabled={disabled}
-      accessibilityRole="checkbox"
-      accessibilityState={{ disabled, checked }}
-      accessibilityLiveRegion="polite"
+      role="checkbox"
+      aria-checked={checked}
+      aria-disabled={disabled}
       style={styles.container}
       testID={testID}
       theme={theme}