diff --git a/packages/bottom-tabs/src/views/BottomTabBar.tsx b/packages/bottom-tabs/src/views/BottomTabBar.tsx index f407002eb4..f072002b55 100644 --- a/packages/bottom-tabs/src/views/BottomTabBar.tsx +++ b/packages/bottom-tabs/src/views/BottomTabBar.tsx @@ -331,7 +331,7 @@ export function BottomTabBar({ {tabBarBackgroundElement} {routes.map((route, index) => { diff --git a/packages/bottom-tabs/src/views/BottomTabItem.tsx b/packages/bottom-tabs/src/views/BottomTabItem.tsx index 72035a0f0e..a0a635d556 100644 --- 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 index f024325b39..a2ef210fbd 100644 --- a/packages/drawer/src/views/DrawerItem.tsx +++ b/packages/drawer/src/views/DrawerItem.tsx @@ -137,9 +137,9 @@ export function DrawerItem(props: Props) { { expect(toJSON()).toMatchInlineSnapshot(` { expect(toJSON()).toMatchInlineSnapshot(` { expect(toJSON()).toMatchInlineSnapshot(` { expect(toJSON()).toMatchInlineSnapshot(` ({ 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 index 4e527421fa..a5df96e85c 100644 --- 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({ ); diff --git a/packages/react-native-drawer-layout/src/views/Overlay.tsx b/packages/react-native-drawer-layout/src/views/Overlay.tsx index 11d5e43858..a52624d287 100644 --- 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} > ); diff --git a/packages/react-native-tab-view/src/TabBar.tsx b/packages/react-native-tab-view/src/TabBar.tsx index 7241b6afe3..4b92baeac4 100644 --- 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({ data={routes as Animated.WithAnimatedValue[]} 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 index 6049af1e02..abaf8a6ef3 100644 --- a/packages/react-native-tab-view/src/TabBarItem.tsx +++ b/packages/react-native-tab-view/src/TabBarItem.tsx @@ -215,9 +215,9 @@ const TabBarItemInternal = ({ 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}