fix: use aria props instead of accessibilityX (#11848)

satya164 · web-flow · commit 347ca975406e · 2025-05-02T13:17:42.000+02:00
diff --git a/package.json b/package.json
@@ -62,7 +62,7 @@
     "prettierPath": null
   },
   "prettier": {
-    "quoteProps": "consistent",
+    "quoteProps": "as-needed",
     "tabWidth": 2,
     "useTabs": false,
     "singleQuote": true,
diff --git a/packages/bottom-tabs/src/types.tsx b/packages/bottom-tabs/src/types.tsx
@@ -1,4 +1,7 @@
-import type { HeaderOptions } from '@react-navigation/elements';
+import type {
+  HeaderOptions,
+  PlatformPressable,
+} from '@react-navigation/elements';
 import type {
   DefaultNavigatorOptions,
   Descriptor,
@@ -15,7 +18,6 @@ import type * as React from 'react';
 import type {
   Animated,
   GestureResponderEvent,
-  Pressable,
   StyleProp,
   TextStyle,
   ViewStyle,
@@ -431,7 +433,7 @@ export type BottomTabBarProps = {
 };
 
 export type BottomTabBarButtonProps = Omit<
-  React.ComponentProps<typeof Pressable>,
+  React.ComponentProps<typeof PlatformPressable>,
   'style'
 > & {
   href?: string;
diff --git a/packages/bottom-tabs/src/views/BottomTabBar.tsx b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -383,7 +383,7 @@ export function BottomTabBar({
         {tabBarBackgroundElement}
       </View>
       <View
-        accessibilityRole="tablist"
+        role="tablist"
         style={sidebar ? styles.sideContent : styles.bottomContent}
       >
         {routes.map((route, index) => {
diff --git a/packages/bottom-tabs/src/views/BottomTabItem.tsx b/packages/bottom-tabs/src/views/BottomTabItem.tsx
@@ -334,21 +334,19 @@ export function BottomTabItem({
         onPress,
         onLongPress,
         testID,
-        accessibilityLabel,
-        accessibilityLargeContentTitle: labelString,
-        accessibilityShowsLargeContentViewer: true,
-        // 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'] : [],
-        android_ripple: { borderless: true },
-        hoverEffect:
+        'aria-label': accessibilityLabel,
+        'accessibilityLargeContentTitle': labelString,
+        'accessibilityShowsLargeContentViewer': true,
+        // FIXME: role: 'tab' doesn't seem to work as expected on iOS
+        'role': Platform.select({ ios: 'button', default: 'tab' }),
+        'aria-selected': focused,
+        'android_ripple': { borderless: true },
+        'hoverEffect':
           variant === 'material' || (sidebar && horizontal)
             ? { color: colors.text }
             : undefined,
-        pressOpacity: 1,
-        style: [
+        'pressOpacity': 1,
+        'style': [
           styles.tab,
           { flex, backgroundColor, borderRadius },
           sidebar
@@ -365,7 +363,7 @@ export function BottomTabItem({
                 ? styles.tabHorizontalUiKit
                 : styles.tabVerticalUiKit,
         ],
-        children: (
+        'children': (
           <React.Fragment>
             {renderIcon(scene)}
             {renderLabel(scene)}
diff --git a/packages/drawer/src/views/DrawerItem.tsx b/packages/drawer/src/views/DrawerItem.tsx
@@ -139,9 +139,9 @@ export function DrawerItem(props: Props) {
       <PlatformPressable
         testID={testID}
         onPress={onPress}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityRole="button"
-        accessibilityState={{ selected: focused }}
+        role="button"
+        aria-label={accessibilityLabel}
+        aria-selected={focused}
         pressColor={pressColor}
         pressOpacity={pressOpacity}
         hoverEffect={{ color }}
diff --git a/packages/elements/src/Header/HeaderButton.tsx b/packages/elements/src/Header/HeaderButton.tsx
@@ -23,7 +23,7 @@ function HeaderButtonInternal(
       ref={ref}
       disabled={disabled}
       href={href}
-      accessibilityLabel={accessibilityLabel}
+      aria-label={accessibilityLabel}
       testID={testID}
       onPress={onPress}
       pressColor={pressColor}
diff --git a/packages/elements/src/Header/HeaderSearchBar.tsx b/packages/elements/src/Header/HeaderSearchBar.tsx
@@ -157,9 +157,8 @@ function HeaderSearchBarInternal(
   return (
     <Animated.View
       pointerEvents={visible ? 'auto' : 'none'}
-      accessibilityLiveRegion="polite"
-      accessibilityElementsHidden={!visible}
-      importantForAccessibility={visible ? 'auto' : 'no-hide-descendants'}
+      aria-live="polite"
+      aria-hidden={!visible}
       style={[styles.container, { opacity: visibleAnim }, style]}
     >
       <View style={styles.searchbarContainer}>
diff --git a/packages/elements/src/Header/HeaderTitle.tsx b/packages/elements/src/Header/HeaderTitle.tsx
@@ -19,7 +19,7 @@ export function HeaderTitle({ tintColor, style, ...rest }: Props) {
 
   return (
     <Animated.Text
-      accessibilityRole="header"
+      role="heading"
       aria-level="1"
       numberOfLines={1}
       {...rest}
diff --git a/packages/elements/src/PlatformPressable.tsx b/packages/elements/src/PlatformPressable.tsx
@@ -118,9 +118,7 @@ function PlatformPressableInternal(
     <AnimatedPressable
       ref={ref}
       accessible
-      accessibilityRole={
-        Platform.OS === 'web' && rest.href != null ? 'link' : 'button'
-      }
+      role={Platform.OS === 'web' && rest.href != null ? 'link' : 'button'}
       onPress={disabled ? undefined : handlePress}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
diff --git a/packages/elements/src/Screen.tsx b/packages/elements/src/Screen.tsx
@@ -62,8 +62,7 @@ export function Screen(props: Props) {
 
   return (
     <Background
-      accessibilityElementsHidden={!focused}
-      importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
+      aria-hidden={!focused}
       style={[styles.container, style]}
       // On Fabric we need to disable collapsing for the background to ensure
       // that we won't render unnecessary views due to the view flattening.
diff --git a/packages/native-stack/src/views/NativeStackView.native.tsx b/packages/native-stack/src/views/NativeStackView.native.tsx
@@ -288,8 +288,7 @@ const SceneView = ({
           screenId={route.key}
           activityState={isPreloaded ? 0 : 2}
           style={StyleSheet.absoluteFill}
-          accessibilityElementsHidden={!focused}
-          importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
+          aria-hidden={!focused}
           customAnimationOnSwipe={animationMatchesGesture}
           fullScreenSwipeEnabled={fullScreenGestureEnabled}
           fullScreenSwipeShadowEnabled={fullScreenGestureShadowEnabled}
diff --git a/packages/native/src/__tests__/Link.test.tsx b/packages/native/src/__tests__/Link.test.tsx
@@ -49,9 +49,9 @@ test('renders link with href on web', () => {
 
   expect(toJSON()).toMatchInlineSnapshot(`
 <Text
-  accessibilityRole="link"
   href="/bar/42"
   onPress={[Function]}
+  role="link"
   style={
     [
       {
@@ -80,9 +80,9 @@ test('renders link with href on web', () => {
 
   expect(toJSON()).toMatchInlineSnapshot(`
 <Text
-  accessibilityRole="link"
   href="/foo"
   onPress={[Function]}
+  role="link"
   style={
     [
       {
@@ -144,9 +144,9 @@ test("doesn't navigate if default was prevented", () => {
 
   expect(toJSON()).toMatchInlineSnapshot(`
 <Text
-  accessibilityRole="link"
   href="/bar/42"
   onPress={[Function]}
+  role="link"
   style={
     [
       {
@@ -175,9 +175,9 @@ test("doesn't navigate if default was prevented", () => {
 
   expect(toJSON()).toMatchInlineSnapshot(`
 <Text
-  accessibilityRole="link"
   href="/bar/42"
   onPress={[Function]}
+  role="link"
   style={
     [
       {
diff --git a/packages/native/src/useLinkProps.tsx b/packages/native/src/useLinkProps.tsx
@@ -150,7 +150,7 @@ export function useLinkProps<ParamList extends ReactNavigation.RootParamList>({
             options?.config
           )
         : undefined),
-    accessibilityRole: 'link' as const,
+    role: 'link' as const,
     onPress,
   };
 }
diff --git a/packages/react-native-drawer-layout/src/views/Drawer.native.tsx b/packages/react-native-drawer-layout/src/views/Drawer.native.tsx
@@ -435,14 +435,7 @@ export function Drawer({
             >
               <Animated.View style={[styles.content, contentAnimatedStyle]}>
                 <View
-                  accessibilityElementsHidden={
-                    isOpen && drawerType !== 'permanent'
-                  }
-                  importantForAccessibility={
-                    isOpen && drawerType !== 'permanent'
-                      ? 'no-hide-descendants'
-                      : 'auto'
-                  }
+                  aria-hidden={isOpen && drawerType !== 'permanent'}
                   style={styles.content}
                 >
                   {children}
diff --git a/packages/react-native-drawer-layout/src/views/Drawer.tsx b/packages/react-native-drawer-layout/src/views/Drawer.tsx
@@ -121,12 +121,7 @@ export function Drawer({
         >
           <View style={[styles.content, contentAnimatedStyle]}>
             <View
-              accessibilityElementsHidden={isOpen && drawerType !== 'permanent'}
-              importantForAccessibility={
-                isOpen && drawerType !== 'permanent'
-                  ? 'no-hide-descendants'
-                  : 'auto'
-              }
+              aria-hidden={isOpen && drawerType !== 'permanent'}
               style={styles.content}
             >
               {children}
diff --git a/packages/react-native-drawer-layout/src/views/Overlay.native.tsx b/packages/react-native-drawer-layout/src/views/Overlay.native.tsx
@@ -25,9 +25,8 @@ export function Overlay({
     const active = progress.value > PROGRESS_EPSILON;
 
     return {
-      pointerEvents: active ? 'auto' : 'none',
-      accessibilityElementsHidden: !active,
-      importantForAccessibility: active ? 'auto' : 'no-hide-descendants',
+      'pointerEvents': active ? 'auto' : 'none',
+      'aria-hidden': !active,
     } as const;
   }, [progress]);
 
@@ -40,8 +39,8 @@ export function Overlay({
       <Pressable
         onPress={onPress}
         style={styles.pressable}
-        accessibilityRole="button"
-        accessibilityLabel={accessibilityLabel}
+        role="button"
+        aria-label={accessibilityLabel}
       />
     </Animated.View>
   );
diff --git a/packages/react-native-drawer-layout/src/views/Overlay.tsx b/packages/react-native-drawer-layout/src/views/Overlay.tsx
@@ -17,14 +17,13 @@ export function Overlay({
         { opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none' },
         style,
       ]}
-      accessibilityElementsHidden={!open}
-      importantForAccessibility={open ? 'auto' : 'no-hide-descendants'}
+      aria-hidden={!open}
     >
       <Pressable
         onPress={onPress}
         style={[styles.pressable, { pointerEvents: open ? 'auto' : 'none' }]}
-        accessibilityRole="button"
-        accessibilityLabel={accessibilityLabel}
+        role="button"
+        aria-label={accessibilityLabel}
       />
     </View>
   );
diff --git a/packages/react-native-tab-view/src/SceneView.tsx b/packages/react-native-tab-view/src/SceneView.tsx
@@ -75,8 +75,7 @@ export function SceneView<T extends Route>({
 
   return (
     <View
-      accessibilityElementsHidden={!focused}
-      importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
+      aria-hidden={!focused}
       style={[
         styles.route,
         // If we don't have the layout yet, make the focused screen fill the container
diff --git a/packages/react-native-tab-view/src/TabBar.tsx b/packages/react-native-tab-view/src/TabBar.tsx
@@ -667,7 +667,7 @@ export function TabBar<T extends Route>({
           data={routes as Animated.WithAnimatedValue<T>[]}
           keyExtractor={keyExtractor}
           horizontal
-          accessibilityRole="tablist"
+          role="tablist"
           keyboardShouldPersistTaps="handled"
           scrollEnabled={scrollEnabled}
           bounces={bounces}
diff --git a/packages/react-native-tab-view/src/TabBarItem.tsx b/packages/react-native-tab-view/src/TabBarItem.tsx
@@ -208,17 +208,17 @@ const TabBarItemInternal = <T extends Route>({
     ? null
     : { width: defaultTabWidth };
 
-  accessibilityLabel =
+  const ariaLabel =
     typeof accessibilityLabel !== 'undefined' ? accessibilityLabel : labelText;
 
   return (
     <PlatformPressable
       android_ripple={android_ripple}
       testID={testID}
       accessible={accessible}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="tab"
-      accessibilityState={{ selected: isFocused }}
+      role="tab"
+      aria-label={ariaLabel}
+      aria-selected={isFocused}
       pressColor={pressColor}
       pressOpacity={pressOpacity}
       unstable_pressDelay={0}
diff --git a/packages/stack/src/views/Header/HeaderContainer.tsx b/packages/stack/src/views/Header/HeaderContainer.tsx
@@ -165,10 +165,7 @@ export function HeaderContainer({
                     : undefined
                 }
                 pointerEvents={isFocused ? 'box-none' : 'none'}
-                accessibilityElementsHidden={!isFocused}
-                importantForAccessibility={
-                  isFocused ? 'auto' : 'no-hide-descendants'
-                }
+                aria-hidden={!isFocused}
                 style={
                   // Avoid positioning the focused header absolutely
                   // Otherwise accessibility tools don't seem to be able to find it
diff --git a/packages/stack/src/views/Stack/CardContainer.tsx b/packages/stack/src/views/Stack/CardContainer.tsx
@@ -258,8 +258,7 @@ function CardContainerInner({
       gestureVelocityImpact={gestureVelocityImpact}
       transitionSpec={transitionSpec}
       styleInterpolator={cardStyleInterpolator}
-      accessibilityElementsHidden={!focused}
-      importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
+      aria-hidden={!focused}
       pointerEvents={active ? 'box-none' : pointerEvents}
       pageOverflowEnabled={headerMode !== 'float' && presentation !== 'modal'}
       preloaded={preloaded}

Original file line number	Diff line number	Diff line change
`@@ -383,7 +383,7 @@ export function BottomTabBar({`
`383`	`383`	`{tabBarBackgroundElement}`
`384`	`384`	`</View>`
`385`	`385`	`<View`
`386`		`- accessibilityRole="tablist"`
	`386`	`+ role="tablist"`
`387`	`387`	`style={sidebar ? styles.sideContent : styles.bottomContent}`
`388`	`388`	`>`
`389`	`389`	`{routes.map((route, index) => {`