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}