refactor: migrate accessibility props

package.json

@@ -65,8 +65,8 @@
     "@react-native/babel-preset": "^0.79.2",
     "@react-navigation/native": "^6.1.2",
     "@release-it/conventional-changelog": "^1.1.0",
-    "@testing-library/jest-native": "^5.4.1",
-    "@testing-library/react-native": "11.5.0",
+    "@testing-library/jest-native": "^5.4.3",
+    "@testing-library/react-native": "13.2.0",
     "@types/color": "^3.0.0",
     "@types/jest": "^29.2.1",
     "@types/node": "^13.1.0",

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}

src/components/Checkbox/CheckboxItem.tsx

@@ -177,12 +177,10 @@ const CheckboxItem = ({
 
   return (
     <TouchableRipple
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="checkbox"
-      accessibilityState={{
-        checked: status === 'checked',
-        disabled,
-      }}
+      aria-label={accessibilityLabel}
+      role="checkbox"
+      aria-checked={status === 'checked'}
+      aria-disabled={disabled}
       onPress={onPress}
       onLongPress={onLongPress}
       testID={testID}

src/components/Chip/Chip.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  AccessibilityState,
   Animated,
   ColorValue,
   GestureResponderEvent,
@@ -12,6 +11,7 @@ import {
   Pressable,
   View,
   ViewStyle,
+  Role,
 } from 'react-native';
 
 import useLatestCallback from 'use-latest-callback';
@@ -86,6 +86,10 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;
+  /**
+   * Accessibility role for the chip.
+   */
+  accessibilityRole?: Role;
   /**
    * Accessibility label for the chip. This is read by the screen reader when the user taps the chip.
    */
@@ -188,7 +192,7 @@ const Chip = ({
   background,
   accessibilityLabel,
   accessibilityRole = 'button',
-  closeIconAccessibilityLabel = 'Close',
+  closeIconAccessibilityLabel,
   onPress,
   onLongPress,
   onPressOut,
@@ -279,11 +283,6 @@ const Chip = ({
     customRippleColor,
   });
 
-  const accessibilityState: AccessibilityState = {
-    selected,
-    disabled,
-  };
-
   const elevationStyle = Platform.OS === 'android' ? elevation : 0;
   const multiplier = compact ? 1.5 : 2;
   const labelSpacings = {
@@ -328,9 +327,10 @@ const Chip = ({
         delayLongPress={delayLongPress}
         rippleColor={rippleColor}
         disabled={disabled}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityRole={accessibilityRole}
-        accessibilityState={accessibilityState}
+        aria-label={accessibilityLabel}
+        role={accessibilityRole}
+        aria-disabled={disabled}
+        aria-selected={selected}
         testID={testID}
         theme={theme}
         hitSlop={hitSlop}
@@ -394,8 +394,8 @@ const Chip = ({
           <Pressable
             onPress={onClose}
             disabled={disabled}
-            accessibilityRole="button"
-            accessibilityLabel={closeIconAccessibilityLabel}
+            role="button"
+            aria-label={closeIconAccessibilityLabel}
           >
             <View style={[styles.icon, styles.closeIcon]}>
               {closeIcon ? (

src/components/DataTable/DataTablePagination.tsx

@@ -127,7 +127,7 @@ const PaginationControls = ({
           rippleColor={paginationControlRippleColor}
           disabled={page === 0}
           onPress={() => onPageChange(0)}
-          accessibilityLabel="page-first"
+          aria-label="page-first"
           theme={theme}
         />
       ) : null}
@@ -144,7 +144,7 @@ const PaginationControls = ({
         rippleColor={paginationControlRippleColor}
         disabled={page === 0}
         onPress={() => onPageChange(page - 1)}
-        accessibilityLabel="chevron-left"
+        aria-label="chevron-left"
         theme={theme}
       />
       <IconButton
@@ -160,7 +160,7 @@ const PaginationControls = ({
         rippleColor={paginationControlRippleColor}
         disabled={numberOfPages === 0 || page === numberOfPages - 1}
         onPress={() => onPageChange(page + 1)}
-        accessibilityLabel="chevron-right"
+        aria-label="chevron-right"
         theme={theme}
       />
       {showFastPaginationControls ? (
@@ -177,7 +177,7 @@ const PaginationControls = ({
           rippleColor={paginationControlRippleColor}
           disabled={numberOfPages === 0 || page === numberOfPages - 1}
           onPress={() => onPageChange(numberOfPages - 1)}
-          accessibilityLabel="page-last"
+          aria-label="page-last"
           theme={theme}
         />
       ) : null}
@@ -320,19 +320,16 @@ const DataTablePagination = ({
     <View
       {...rest}
       style={[styles.container, style]}
-      accessibilityLabel="pagination-container"
+      aria-label="pagination-container"
     >
       {numberOfItemsPerPageList &&
         numberOfItemsPerPage &&
         onItemsPerPageChange && (
-          <View
-            accessibilityLabel="Options Select"
-            style={styles.optionsContainer}
-          >
+          <View aria-label="Options Select" style={styles.optionsContainer}>
             <Text
               style={[styles.label, { color: labelColor }]}
               numberOfLines={3}
-              accessibilityLabel={
+              aria-label={
                 selectPageDropdownAccessibilityLabel ||
                 'selectPageDropdownLabel'
               }
@@ -352,7 +349,7 @@ const DataTablePagination = ({
       <Text
         style={[styles.label, { color: labelColor }]}
         numberOfLines={3}
-        accessibilityLabel={accessibilityLabel || 'label'}
+        aria-label={accessibilityLabel || 'label'}
       >
         {label}
       </Text>

src/components/Dialog/DialogTitle.tsx

@@ -64,7 +64,7 @@ const DialogTitle = ({
   return (
     <Text
       variant="headlineSmall"
-      accessibilityRole="header"
+      role="heading"
       style={[styles.text, headerTextStyle, style]}
       {...rest}
     >

src/components/Drawer/DrawerCollapsedItem.tsx

@@ -169,17 +169,13 @@ const DrawerCollapsedItem = ({
 
   return (
     <View {...rest}>
-      {/* eslint-disable-next-line react-native-a11y/has-accessibility-props */}
       <Pressable
         onPress={onPress}
         onPressOut={onPress ? handlePressOut : undefined}
         disabled={disabled}
-        // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
-        accessibilityTraits={active ? ['button', 'selected'] : 'button'}
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityState={{ selected: active }}
-        accessibilityLabel={accessibilityLabel}
+        role="button"
+        aria-selected={active}
+        aria-label={accessibilityLabel}
         testID={testID}
       >
         <View style={styles.wrapper}>

src/components/Drawer/DrawerItem.tsx

@@ -129,9 +129,9 @@ const DrawerItem = ({
         background={background}
         onPress={onPress}
         style={[styles.container, { backgroundColor, borderRadius }, style]}
-        accessibilityRole="button"
-        accessibilityState={{ selected: active }}
-        accessibilityLabel={accessibilityLabel}
+        role="button"
+        aria-selected={active}
+        aria-label={accessibilityLabel}
         rippleColor={customRippleColor || rippleColor}
         theme={theme}
         hitSlop={hitSlop}