refactor: use aria props to avoid deprecation warnings on web

react-navigation · Mar 12, 2024 · 4d16128 · 4d16128
1 parent c54baf1
commit 4d16128
Show file tree

Hide file tree

Showing 19 changed files with 34 additions and 62 deletions.
diff --git a/packages/bottom-tabs/src/views/BottomTabBar.tsx b/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) => {

diff --git a/packages/bottom-tabs/src/views/BottomTabItem.tsx b/packages/bottom-tabs/src/views/BottomTabItem.tsx
@@ -141,7 +141,7 @@ export function BottomTabItem({
     children,
     style,
     onPress,
-    accessibilityRole,
+    role,
     ...rest
   }: BottomTabBarButtonProps) => {
     return (
@@ -150,7 +150,7 @@ export function BottomTabItem({
         android_ripple={{ borderless: true }}
         pressOpacity={1}
         href={href}
-        accessibilityRole={accessibilityRole}
+        role={role}
         onPress={onPress}
         style={style}
       >
@@ -263,8 +263,8 @@ export function BottomTabItem({
     onLongPress,
     testID,
     accessibilityLabel,
-    // FIXME: accessibilityRole: 'tab' doesn't seem to work as expected on iOS
-    accessibilityRole: Platform.select({ ios: 'button', default: 'tab' }),
+    // FIXME: role: 'tab' doesn't seem to work as expected on iOS
+    role: Platform.select({ ios: 'button', default: 'tab' }),
     accessibilityState: { selected: focused },
     // @ts-expect-error: keep for compatibility with older React Native versions
     accessibilityStates: focused ? ['selected'] : [],

diff --git a/packages/drawer/src/views/DrawerItem.tsx b/packages/drawer/src/views/DrawerItem.tsx
@@ -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={accessibilityLabel}
+        aria-selected={focused}
         pressColor={pressColor}
         pressOpacity={pressOpacity}
         href={href}

diff --git a/packages/elements/src/Header/HeaderButton.tsx b/packages/elements/src/Header/HeaderButton.tsx
@@ -19,7 +19,7 @@ export function HeaderButton({
     <PlatformPressable
       disabled={disabled}
       href={href}
-      accessibilityLabel={accessibilityLabel}
+      aria-label={accessibilityLabel}
       testID={testID}
       onPress={onPress}
       pressColor={pressColor}

diff --git a/packages/elements/src/Header/HeaderTitle.tsx b/packages/elements/src/Header/HeaderTitle.tsx
@@ -20,7 +20,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
@@ -88,9 +88,7 @@ export function PlatformPressable({
   return (
     <AnimatedPressable
       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
@@ -367,13 +367,7 @@ const SceneView = ({
                     {headerBackground()}
                   </View>
                 ) : null}
-                <View
-                  accessibilityElementsHidden={!focused}
-                  importantForAccessibility={
-                    focused ? 'auto' : 'no-hide-descendants'
-                  }
-                  style={styles.scene}
-                >
+                <View aria-hidden={!focused} style={styles.scene}>
                   <MaybeNestedStack
                     options={options}
                     route={route}

diff --git a/packages/native/src/__tests__/Link.test.tsx b/packages/native/src/__tests__/Link.test.tsx
@@ -51,9 +51,9 @@ it('renders link with href on web', () => {
 
   expect(toJSON()).toMatchInlineSnapshot(`
 <Text
-  accessibilityRole="link"
   href="/bar/42"
   onPress={[Function]}
+  role="link"
   style={
     [
       {
@@ -82,9 +82,9 @@ it('renders link with href on web', () => {
 
   expect(toJSON()).toMatchInlineSnapshot(`
 <Text
-  accessibilityRole="link"
   href="/foo"
   onPress={[Function]}
+  role="link"
   style={
     [
       {
@@ -146,9 +146,9 @@ it("doesn't navigate if default was prevented", () => {
 
   expect(toJSON()).toMatchInlineSnapshot(`
 <Text
-  accessibilityRole="link"
   href="/bar/42"
   onPress={[Function]}
+  role="link"
   style={
     [
       {
@@ -177,9 +177,9 @@ it("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
@@ -137,7 +137,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
@@ -380,14 +380,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
@@ -107,12 +107,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
@@ -29,9 +29,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;
   });
 
@@ -44,8 +43,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
@@ -18,14 +18,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
@@ -676,7 +676,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
@@ -215,9 +215,9 @@ const TabBarItemInternal = <T extends Route>({
       android_ripple={android_ripple}
       testID={testID}
       accessible={accessible}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="tab"
-      accessibilityState={{ selected: isFocused }}
+      role="tab"
+      aria-label={accessibilityLabel}
+      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
@@ -248,8 +248,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}