refactor: use aria properties instead of accessibilityX

packages/bottom-tabs/src/views/BottomTabBar.tsx

@@ -331,7 +331,7 @@ export function BottomTabBar({
         {tabBarBackgroundElement}
       </View>
       <View
-        accessibilityRole="tablist"
+        role="tablist"
         style={tabBarIsHorizontal ? styles.bottomContent : styles.sideContent}
       >
         {routes.map((route, index) => {
@@ -368,7 +368,7 @@ export function BottomTabBar({
                   route.name
                 );
 
-          const accessibilityLabel =
+          const ariaLabel =
             options.tabBarAccessibilityLabel !== undefined
               ? options.tabBarAccessibilityLabel
               : typeof label === 'string' && Platform.OS === 'ios'
@@ -389,7 +389,7 @@ export function BottomTabBar({
                   horizontal={hasHorizontalLabels}
                   onPress={onPress}
                   onLongPress={onLongPress}
-                  accessibilityLabel={accessibilityLabel}
+                  aria-label={ariaLabel}
                   testID={options.tabBarButtonTestID}
                   allowFontScaling={options.tabBarAllowFontScaling}
                   activeTintColor={tabBarActiveTintColor}

packages/bottom-tabs/src/views/BottomTabItem.tsx

@@ -22,23 +22,23 @@ type Props = {
   /**
    * The route object which should be specified by the tab.
    */
-  route: Route<string>;
+  'route': Route<string>;
   /**
    * The `href` to use for the anchor tag on web
    */
-  href?: string;
+  'href'?: string;
   /**
    * Whether the tab is focused.
    */
-  focused: boolean;
+  'focused': boolean;
   /**
    * The descriptor object for the route.
    */
-  descriptor: BottomTabDescriptor;
+  'descriptor': BottomTabDescriptor;
   /**
    * The label text of the tab.
    */
-  label:
+  'label':
     | string
     | ((props: {
         focused: boolean;
@@ -49,82 +49,82 @@ type Props = {
   /**
    * Icon to display for the tab.
    */
-  icon: (props: {
+  'icon': (props: {
     focused: boolean;
     size: number;
     color: string;
   }) => React.ReactNode;
   /**
    * Text to show in a badge on the tab icon.
    */
-  badge?: number | string;
+  'badge'?: number | string;
   /**
    * Custom style for the badge.
    */
-  badgeStyle?: StyleProp<TextStyle>;
+  'badgeStyle'?: StyleProp<TextStyle>;
   /**
    * The button for the tab. Uses a `Pressable` by default.
    */
-  button?: (props: BottomTabBarButtonProps) => React.ReactNode;
+  'button'?: (props: BottomTabBarButtonProps) => React.ReactNode;
   /**
    * The accessibility label for the tab.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * An unique ID for testing for the tab.
    */
-  testID?: string;
+  'testID'?: string;
   /**
    * Function to execute on press in React Native.
    * On the web, this will use onClick.
    */
-  onPress: (
+  'onPress': (
     e: React.MouseEvent<HTMLElement, MouseEvent> | GestureResponderEvent
   ) => void;
   /**
    * Function to execute on long press.
    */
-  onLongPress: (e: GestureResponderEvent) => void;
+  'onLongPress': (e: GestureResponderEvent) => void;
   /**
    * Whether the label should be aligned with the icon horizontally.
    */
-  horizontal: boolean;
+  'horizontal': boolean;
   /**
    * Color for the icon and label when the item is active.
    */
-  activeTintColor?: string;
+  'activeTintColor'?: string;
   /**
    * Color for the icon and label when the item is inactive.
    */
-  inactiveTintColor?: string;
+  'inactiveTintColor'?: string;
   /**
    * Background color for item when its active.
    */
-  activeBackgroundColor?: string;
+  'activeBackgroundColor'?: string;
   /**
    * Background color for item when its inactive.
    */
-  inactiveBackgroundColor?: string;
+  'inactiveBackgroundColor'?: string;
   /**
    * Whether to show the label text for the tab.
    */
-  showLabel?: boolean;
+  'showLabel'?: boolean;
   /**
    * Whether to allow scaling the font for the label for accessibility purposes.
    */
-  allowFontScaling?: boolean;
+  'allowFontScaling'?: boolean;
   /**
    * Style object for the label element.
    */
-  labelStyle?: StyleProp<TextStyle>;
+  'labelStyle'?: StyleProp<TextStyle>;
   /**
    * Style object for the icon element.
    */
-  iconStyle?: StyleProp<ViewStyle>;
+  'iconStyle'?: StyleProp<ViewStyle>;
   /**
    * Style object for the wrapper element.
    */
-  style?: StyleProp<ViewStyle>;
+  'style'?: StyleProp<ViewStyle>;
 };
 
 export function BottomTabItem({
@@ -141,7 +141,7 @@ export function BottomTabItem({
     children,
     style,
     onPress,
-    accessibilityRole,
+    role,
     ...rest
   }: BottomTabBarButtonProps) => {
     return (
@@ -150,21 +150,21 @@ export function BottomTabItem({
         android_ripple={{ borderless: true }}
         pressOpacity={1}
         href={href}
-        accessibilityRole={accessibilityRole}
+        role={role}
         onPress={onPress}
         style={style}
       >
         {children}
       </PlatformPressable>
     );
   },
-  accessibilityLabel,
+  'aria-label': ariaLabel,
   testID,
   onPress,
   onLongPress,
   horizontal,
-  activeTintColor: customActiveTintColor,
-  inactiveTintColor: customInactiveTintColor,
+  'activeTintColor': customActiveTintColor,
+  'inactiveTintColor': customInactiveTintColor,
   activeBackgroundColor = 'transparent',
   inactiveBackgroundColor = 'transparent',
   showLabel = true,
@@ -262,19 +262,17 @@ export function BottomTabItem({
     onPress,
     onLongPress,
     testID,
-    accessibilityLabel,
-    // FIXME: accessibilityRole: 'tab' doesn't seem to work as expected on iOS
-    accessibilityRole: Platform.select({ ios: 'button', default: 'tab' }),
-    accessibilityState: { selected: focused },
-    // @ts-expect-error: keep for compatibility with older React Native versions
-    accessibilityStates: focused ? ['selected'] : [],
-    style: [
+    'aria-label': ariaLabel,
+    // FIXME: role: 'tab' doesn't seem to work as expected on iOS
+    'role': Platform.select({ ios: 'button', default: 'tab' }),
+    'aria-selected': focused,
+    'style': [
       styles.tab,
       { backgroundColor },
       horizontal ? styles.tabLandscape : styles.tabPortrait,
       style,
     ],
-    children: (
+    'children': (
       <React.Fragment>
         {renderIcon(scene)}
         {renderLabel(scene)}

packages/drawer/src/views/DrawerItem.tsx

@@ -14,84 +14,84 @@ type Props = {
   /**
    * The route object which should be specified by the drawer item.
    */
-  route: Route<string>;
+  'route': Route<string>;
   /**
    * The `href` to use for the anchor tag on web
    */
-  href?: string;
+  'href'?: string;
   /**
    * The label text of the item.
    */
-  label:
+  'label':
     | string
     | ((props: { focused: boolean; color: string }) => React.ReactNode);
   /**
    * Icon to display for the `DrawerItem`.
    */
-  icon?: (props: {
+  'icon'?: (props: {
     focused: boolean;
     size: number;
     color: string;
   }) => React.ReactNode;
   /**
    * Whether to highlight the drawer item as active.
    */
-  focused?: boolean;
+  'focused'?: boolean;
   /**
    * Function to execute on press.
    */
-  onPress: () => void;
+  'onPress': () => void;
   /**
    * Color for the icon and label when the item is active.
    */
-  activeTintColor?: string;
+  'activeTintColor'?: string;
   /**
    * Color for the icon and label when the item is inactive.
    */
-  inactiveTintColor?: string;
+  'inactiveTintColor'?: string;
   /**
    * Background color for item when its active.
    */
-  activeBackgroundColor?: string;
+  'activeBackgroundColor'?: string;
   /**
    * Background color for item when its inactive.
    */
-  inactiveBackgroundColor?: string;
+  'inactiveBackgroundColor'?: string;
   /**
    * Color of the touchable effect on press.
    * Only supported on Android.
    *
    * @platform android
    */
-  pressColor?: string;
+  'pressColor'?: string;
   /**
    * Opacity of the touchable effect on press.
    * Only supported on iOS.
    *
    * @platform ios
    */
-  pressOpacity?: number;
+  'pressOpacity'?: number;
   /**
    * Style object for the label element.
    */
-  labelStyle?: StyleProp<TextStyle>;
+  'labelStyle'?: StyleProp<TextStyle>;
   /**
    * Style object for the wrapper element.
    */
-  style?: StyleProp<ViewStyle>;
+  'style'?: StyleProp<ViewStyle>;
   /**
    * Whether label font should scale to respect Text Size accessibility settings.
    */
-  allowFontScaling?: boolean;
+  'allowFontScaling'?: boolean;
 
   /**
    * Accessibility label for drawer item.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * ID to locate this drawer item in tests.
    */
-  testID?: string;
+  'testID'?: string;
 };
 
 /**
@@ -116,7 +116,7 @@ export function DrawerItem(props: Props) {
     pressColor,
     pressOpacity,
     testID,
-    accessibilityLabel,
+    'aria-label': ariaLabel,
     ...rest
   } = props;
 
@@ -137,9 +137,9 @@ export function DrawerItem(props: Props) {
       <PlatformPressable
         testID={testID}
         onPress={onPress}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityRole="button"
-        accessibilityState={{ selected: focused }}
+        role="button"
+        aria-label={ariaLabel}
+        aria-selected={focused}
         pressColor={pressColor}
         pressOpacity={pressOpacity}
         href={href}

packages/drawer/src/views/DrawerToggleButton.tsx

@@ -10,10 +10,10 @@ import { Image, Platform, StyleSheet } from 'react-native';
 import type { DrawerNavigationProp } from '../types';
 
 type Props = {
-  accessibilityLabel?: string;
-  pressColor?: string;
-  pressOpacity?: number;
-  tintColor?: string;
+  'aria-label'?: string;
+  'pressColor'?: string;
+  'pressOpacity'?: number;
+  'tintColor'?: string;
 };
 
 export function DrawerToggleButton({ tintColor, ...rest }: Props) {

packages/elements/src/Header/HeaderBackButton.tsx

@@ -25,10 +25,12 @@ export function HeaderBackButton({
   pressColor,
   pressOpacity,
   screenLayout,
-  tintColor: customTintColor,
+  'tintColor': customTintColor,
   titleLayout,
   truncatedLabel = 'Back',
-  accessibilityLabel = label && label !== 'Back' ? `${label}, back` : 'Go back',
+  'aria-label': ariaLabel = label && label !== 'Back'
+    ? `${label}, back`
+    : 'Go back',
   testID,
   style,
   href,
@@ -160,7 +162,7 @@ export function HeaderBackButton({
     <HeaderButton
       disabled={disabled}
       href={href}
-      accessibilityLabel={accessibilityLabel}
+      aria-label={ariaLabel}
       testID={testID}
       onPress={handlePress}
       pressColor={pressColor}

packages/elements/src/Header/HeaderButton.tsx

@@ -9,7 +9,7 @@ export function HeaderButton({
   onPress,
   pressColor,
   pressOpacity,
-  accessibilityLabel,
+  'aria-label': ariaLabel,
   testID,
   style,
   href,
@@ -19,7 +19,7 @@ export function HeaderButton({
     <PlatformPressable
       disabled={disabled}
       href={href}
-      accessibilityLabel={accessibilityLabel}
+      aria-label={ariaLabel}
       testID={testID}
       onPress={onPress}
       pressColor={pressColor}