refactor: use aria props to avoid deprecation warnings on web

react-navigation · Mar 12, 2024 · 7dc4cd4 · 7dc4cd4
1 parent c54baf1
commit 7dc4cd4
Show file tree

Hide file tree

Showing 12 changed files with 27 additions and 31 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/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/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/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}