diff --git a/src/components/ActivityIndicator.tsx b/src/components/ActivityIndicator.tsx
index 8faa54de58..58ef633c9b 100644
--- a/src/components/ActivityIndicator.tsx
+++ b/src/components/ActivityIndicator.tsx
@@ -146,8 +146,8 @@ const ActivityIndicator = ({
       style={[styles.container, style]}
       {...rest}
       accessible
-      accessibilityRole="progressbar"
-      accessibilityState={{ busy: animating }}
+      role="progressbar"
+      aria-busy={animating}
     >
       <Animated.View
         style={[{ width: size, height: size, opacity: fade }]}
diff --git a/src/components/Appbar/AppbarAction.tsx b/src/components/Appbar/AppbarAction.tsx
index 5d63fd642c..96e802a34f 100644
--- a/src/components/Appbar/AppbarAction.tsx
+++ b/src/components/Appbar/AppbarAction.tsx
@@ -32,7 +32,7 @@ export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Function to execute on press.
    */
@@ -79,7 +79,7 @@ const AppbarAction = ({
   icon,
   disabled,
   onPress,
-  accessibilityLabel,
+  'aria-label': ariaLabel,
   isLeading,
   theme: themeOverrides,
   ref,
@@ -101,7 +101,7 @@ const AppbarAction = ({
       iconColor={actionIconColor}
       icon={icon}
       disabled={disabled}
-      accessibilityLabel={accessibilityLabel}
+      aria-label={ariaLabel}
       animated
       ref={ref}
       {...rest}
diff --git a/src/components/Appbar/AppbarBackAction.tsx b/src/components/Appbar/AppbarBackAction.tsx
index 80c7df2f95..2835c27c91 100644
--- a/src/components/Appbar/AppbarBackAction.tsx
+++ b/src/components/Appbar/AppbarBackAction.tsx
@@ -31,7 +31,7 @@ export type Props = $Omit<
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Function to execute on press.
    */
@@ -58,12 +58,12 @@ export type Props = $Omit<
  * ```
  */
 const AppbarBackAction = ({
-  accessibilityLabel = 'Back',
+  'aria-label': ariaLabel = 'Back',
   ref,
   ...rest
 }: Props) => (
   <AppbarAction
-    accessibilityLabel={accessibilityLabel}
+    aria-label={ariaLabel}
     {...rest}
     icon={AppbarBackIcon}
     isLeading
diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx
index cbc91d22c2..ba6a83465c 100644
--- a/src/components/Appbar/AppbarContent.tsx
+++ b/src/components/Appbar/AppbarContent.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { Platform, StyleSheet, Pressable, View } from 'react-native';
+import { StyleSheet, Pressable, View } from 'react-native';
 import type {
-  AccessibilityRole,
   GestureResponderEvent,
   StyleProp,
   TextStyle,
@@ -140,15 +139,7 @@ const AppbarContent = ({
           ]}
           numberOfLines={1}
           accessible
-          accessibilityRole={
-            onPress
-              ? 'none'
-              : Platform.OS === 'web'
-                ? ('heading' as 'header')
-                : 'header'
-          }
-          // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
-          accessibilityTraits="header"
+          role={onPress ? 'none' : 'heading'}
           testID={`${testID}-title-text`}
           maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
         >
@@ -162,13 +153,9 @@ const AppbarContent = ({
 
   if (onPress) {
     return (
-      // eslint-disable-next-line react-native-a11y/has-accessibility-props
       <Pressable
-        accessibilityRole={touchableRole}
-        // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
-        accessibilityTraits={touchableRole}
-        accessibilityComponentType="button"
-        accessbilityState={disabled ? 'disabled' : null}
+        role="button"
+        aria-disabled={disabled}
         onPress={onPress}
         disabled={disabled}
         {...contentWrapperProps}
@@ -204,8 +191,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const touchableRole: AccessibilityRole = 'button';
-
 export default AppbarContent;
 
 // @component-docs ignore-next-line
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 3f03083470..4f28cf0390 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -232,8 +232,8 @@ const Banner = ({
                   color: colors.onSurface,
                 },
               ]}
-              accessibilityLiveRegion={visible ? 'polite' : 'none'}
-              accessibilityRole="alert"
+              aria-live={visible ? 'polite' : 'off'}
+              role="alert"
               maxFontSizeMultiplier={maxFontSizeMultiplier}
             >
               {children}
diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx
index cd8dbd8663..df7e28cc76 100644
--- a/src/components/BottomNavigation/BottomNavigation.tsx
+++ b/src/components/BottomNavigation/BottomNavigation.tsx
@@ -23,7 +23,7 @@ export type BaseRoute = {
   focusedIcon?: IconSource;
   unfocusedIcon?: IconSource;
   badge?: string | number | boolean;
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   testID?: string;
   lazy?: boolean;
 };
@@ -77,7 +77,7 @@ export type Props<Route extends BaseRoute> = {
    * - `focusedIcon`:  icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x
    * - `unfocusedIcon`:  icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3
    * - `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.
-   * - `accessibilityLabel`: accessibility label for the tab button
+   * - `aria-label`: accessibility label for the tab button
    * - `testID`: test id for the tab button
    *
    * Example:
@@ -164,7 +164,7 @@ export type Props<Route extends BaseRoute> = {
   renderTouchable?: (props: TouchableProps<Route>) => React.ReactNode;
   /**
    * Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
-   * Uses `route.accessibilityLabel` by default.
+   * Uses `route['aria-label']` by default.
    */
   getAccessibilityLabel?: (props: { route: Route }) => string | undefined;
   /**
@@ -523,7 +523,7 @@ const BottomNavigation = <Route extends BaseRoute>({
             <BottomNavigationRouteScreen
               key={route.key}
               pointerEvents={focused ? 'auto' : 'none'}
-              accessibilityElementsHidden={!focused}
+              aria-hidden={!focused}
               importantForAccessibility={
                 focused ? 'auto' : 'no-hide-descendants'
               }
diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx
index d75928578b..b254be6d83 100644
--- a/src/components/BottomNavigation/BottomNavigationBar.tsx
+++ b/src/components/BottomNavigation/BottomNavigationBar.tsx
@@ -34,7 +34,10 @@ type BaseRoute = {
   focusedIcon?: IconSource;
   unfocusedIcon?: IconSource;
   badge?: string | number | boolean;
-  accessibilityLabel?: string;
+  /**
+   * Accessibility label for the tab. This is read by the screen reader when the user focuses the tab.
+   */
+  'aria-label'?: string;
   testID?: string;
   lazy?: boolean;
 };
@@ -88,7 +91,7 @@ export type Props<Route extends BaseRoute> = {
    * - `focusedIcon`:  icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x
    * - `unfocusedIcon`:  icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3
    * - `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.
-   * - `accessibilityLabel`: accessibility label for the tab button
+   * - `aria-label`: accessibility label for the tab button
    * - `testID`: test id for the tab button
    *
    * Example:
@@ -131,7 +134,7 @@ export type Props<Route extends BaseRoute> = {
   renderTouchable?: (props: TouchableProps<Route>) => React.ReactNode;
   /**
    * Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
-   * Uses `route.accessibilityLabel` by default.
+   * Uses `route['aria-label']` by default.
    */
   getAccessibilityLabel?: (props: { route: Route }) => string | undefined;
   /**
@@ -305,8 +308,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
   ),
   getLabelText = ({ route }: { route: Route }) => route.title,
   getBadge = ({ route }: { route: Route }) => route.badge,
-  getAccessibilityLabel = ({ route }: { route: Route }) =>
-    route.accessibilityLabel,
+  getAccessibilityLabel = ({ route }: { route: Route }) => route['aria-label'],
   getTestID = ({ route }: { route: Route }) => route.testID,
   activeColor,
   inactiveColor,
@@ -507,7 +509,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
               maxWidth: maxTabBarWidth,
             },
           ]}
-          accessibilityRole={'tablist'}
+          role={'tablist'}
           testID={`${testID}-content-wrapper`}
         >
           {routes.map((route, index) => {
@@ -585,9 +587,9 @@ const BottomNavigationBar = <Route extends BaseRoute>({
               onPress: () => onTabPress(eventForIndex(index)),
               onLongPress: () => onTabLongPress?.(eventForIndex(index)),
               testID: getTestID({ route }),
-              accessibilityLabel: getAccessibilityLabel({ route }),
-              accessibilityRole: Platform.OS === 'ios' ? 'button' : 'tab',
-              accessibilityState: { selected: focused },
+              'aria-label': getAccessibilityLabel({ route }),
+              role: Platform.OS === 'ios' ? 'button' : 'tab',
+              'aria-selected': focused,
               style: [styles.item, styles.v3Item],
               children: (
                 <View
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index b2a1a21fdf..53d61a2d6f 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Animated, Platform, StyleSheet, View } from 'react-native';
 import type {
-  AccessibilityRole,
   ColorValue,
   GestureResponderEvent,
   PressableAndroidRippleConfig,
+  Role,
   StyleProp,
   TextStyle,
   ViewStyle,
@@ -80,7 +80,7 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Accessibility hint for the button. This is read by the screen reader when the user taps the button.
    */
@@ -88,7 +88,7 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
   /**
    * Accessibility role for the button. The "button" role is set by default.
    */
-  accessibilityRole?: AccessibilityRole;
+  role?: Role;
   /**
    * Function to execute on press.
    */
@@ -169,9 +169,9 @@ const Button = ({
   buttonColor: customButtonColor,
   textColor: customTextColor,
   children,
-  accessibilityLabel,
+  'aria-label': ariaLabel,
   accessibilityHint,
-  accessibilityRole = 'button',
+  role = 'button',
   hitSlop,
   onPress,
   onPressIn,
@@ -352,10 +352,10 @@ const Button = ({
         onPressIn={hasPassedTouchHandler ? handlePressIn : undefined}
         onPressOut={hasPassedTouchHandler ? handlePressOut : undefined}
         delayLongPress={delayLongPress}
-        accessibilityLabel={accessibilityLabel}
+        aria-label={ariaLabel}
         accessibilityHint={accessibilityHint}
-        accessibilityRole={accessibilityRole}
-        accessibilityState={{ disabled }}
+        role={role}
+        aria-disabled={disabled}
         accessible={accessible}
         hitSlop={hitSlop}
         disabled={disabled}
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index b893a6530c..f93b48becc 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -247,14 +247,12 @@ const Checkbox = ({
     rest.accessible === false
       ? {}
       : {
-          accessibilityRole: 'checkbox' as const,
-          accessibilityState: {
-            disabled: !!disabled,
-            checked: (status === 'indeterminate'
-              ? 'mixed'
-              : status === 'checked') as boolean | 'mixed',
-          },
-          accessibilityLiveRegion: 'polite' as const,
+          role: 'checkbox' as const,
+          'aria-disabled': !!disabled,
+          'aria-checked': (status === 'indeterminate'
+            ? 'mixed'
+            : status === 'checked') as boolean | 'mixed',
+          'aria-live': 'polite' as const,
         };
 
   return (
diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx
index 50e758a412..e8bd23a59b 100644
--- a/src/components/Checkbox/CheckboxItem.tsx
+++ b/src/components/Checkbox/CheckboxItem.tsx
@@ -44,7 +44,7 @@ export type Props = {
   /**
    * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Custom color for unchecked checkbox.
    */
@@ -129,7 +129,7 @@ const CheckboxItem = ({
   theme: themeOverrides,
   testID,
   position = 'trailing',
-  accessibilityLabel = label,
+  'aria-label': ariaLabel = label,
   disabled,
   labelVariant = 'bodyLarge',
   labelMaxFontSizeMultiplier = 1.5,
@@ -154,12 +154,10 @@ const CheckboxItem = ({
 
   return (
     <TouchableRipple
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="checkbox"
-      accessibilityState={{
-        checked: status === 'indeterminate' ? 'mixed' : status === 'checked',
-        disabled,
-      }}
+      aria-label={ariaLabel}
+      role="checkbox"
+      aria-checked={status === 'indeterminate' ? 'mixed' : status === 'checked'}
+      aria-disabled={disabled}
       onPress={onPress}
       onLongPress={onLongPress}
       testID={testID}
diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
index 701ab77d7b..1b09c327a8 100644
--- a/src/components/Chip/Chip.tsx
+++ b/src/components/Chip/Chip.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Animated, Platform, StyleSheet, Pressable, View } from 'react-native';
 import type {
-  AccessibilityState,
   ColorValue,
   GestureResponderEvent,
   PressableAndroidRippleConfig,
@@ -81,7 +80,7 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
   /**
    * Accessibility label for the chip. This is read by the screen reader when the user taps the chip.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Accessibility label for the close icon. This is read by the screen reader when the user taps the close icon.
    */
@@ -178,8 +177,8 @@ const Chip = ({
   selected = false,
   disabled = false,
   background,
-  accessibilityLabel,
-  accessibilityRole = 'button',
+  'aria-label': ariaLabel,
+  role = 'button',
   closeIconAccessibilityLabel = 'Close',
   onPress,
   onLongPress,
@@ -263,11 +262,6 @@ const Chip = ({
     disabled,
   });
 
-  const accessibilityState: AccessibilityState = {
-    selected,
-    disabled,
-  };
-
   const elevationStyle = elevation;
   const multiplier = compact ? 1.5 : 2;
   const labelSpacings = {
@@ -312,9 +306,10 @@ const Chip = ({
         onPressOut={hasPassedTouchHandler ? handlePressOut : undefined}
         delayLongPress={delayLongPress}
         disabled={disabled}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityRole={accessibilityRole}
-        accessibilityState={accessibilityState}
+        aria-label={ariaLabel}
+        role={role}
+        aria-selected={selected}
+        aria-disabled={disabled}
         testID={testID}
         theme={theme}
         hitSlop={hitSlop}
@@ -401,8 +396,8 @@ const Chip = ({
           <Pressable
             onPress={onClose}
             disabled={disabled}
-            accessibilityRole="button"
-            accessibilityLabel={closeIconAccessibilityLabel}
+            role="button"
+            aria-label={closeIconAccessibilityLabel}
           >
             <View style={[styles.icon, styles.closeIcon, styles.md3CloseIcon]}>
               {closeIcon ? (
diff --git a/src/components/DataTable/DataTablePagination.tsx b/src/components/DataTable/DataTablePagination.tsx
index 862185e9c5..32f4b8b4fb 100644
--- a/src/components/DataTable/DataTablePagination.tsx
+++ b/src/components/DataTable/DataTablePagination.tsx
@@ -29,7 +29,7 @@ export type Props = ViewProps &
     /**
      * AccessibilityLabel for `label`.
      */
-    accessibilityLabel?: string;
+    'aria-label'?: string;
     style?: StyleProp<ViewStyle>;
     /**
      * @optional
@@ -106,7 +106,7 @@ const PaginationControls = ({
           iconColor={textColor}
           disabled={page === 0}
           onPress={() => onPageChange(0)}
-          accessibilityLabel="page-first"
+          aria-label="page-first"
           theme={theme}
         />
       ) : null}
@@ -122,7 +122,7 @@ const PaginationControls = ({
         iconColor={textColor}
         disabled={page === 0}
         onPress={() => onPageChange(page - 1)}
-        accessibilityLabel="chevron-left"
+        aria-label="chevron-left"
         theme={theme}
       />
       <IconButton
@@ -137,7 +137,7 @@ const PaginationControls = ({
         iconColor={textColor}
         disabled={numberOfPages === 0 || page === numberOfPages - 1}
         onPress={() => onPageChange(page + 1)}
-        accessibilityLabel="chevron-right"
+        aria-label="chevron-right"
         theme={theme}
       />
       {showFastPaginationControls ? (
@@ -153,7 +153,7 @@ const PaginationControls = ({
           iconColor={textColor}
           disabled={numberOfPages === 0 || page === numberOfPages - 1}
           onPress={() => onPageChange(numberOfPages - 1)}
-          accessibilityLabel="page-last"
+          aria-label="page-last"
           theme={theme}
         />
       ) : null}
@@ -266,7 +266,7 @@ const PaginationDropdown = ({
  */
 const DataTablePagination = ({
   label,
-  accessibilityLabel,
+  'aria-label': accessibilityLabel,
   page,
   numberOfPages,
   onPageChange,
@@ -287,19 +287,21 @@ const DataTablePagination = ({
     <View
       {...rest}
       style={[styles.container, style]}
-      accessibilityLabel="pagination-container"
+      aria-label="pagination-container"
     >
       {numberOfItemsPerPageList &&
         numberOfItemsPerPage &&
         onItemsPerPageChange && (
           <View
-            accessibilityLabel="Options Select"
+            aria-label="Options Select"
+            testID="options-select"
             style={styles.optionsContainer}
           >
             <Text
               style={[styles.label, { color: labelColor }]}
               numberOfLines={3}
-              accessibilityLabel={
+              testID="select-page-dropdown-label"
+              aria-label={
                 selectPageDropdownAccessibilityLabel ||
                 'selectPageDropdownLabel'
               }
@@ -317,7 +319,7 @@ const DataTablePagination = ({
       <Text
         style={[styles.label, { color: labelColor }]}
         numberOfLines={3}
-        accessibilityLabel={accessibilityLabel || 'label'}
+        aria-label={accessibilityLabel || 'label'}
       >
         {label}
       </Text>
diff --git a/src/components/Dialog/DialogTitle.tsx b/src/components/Dialog/DialogTitle.tsx
index f869887205..bdf5021379 100644
--- a/src/components/Dialog/DialogTitle.tsx
+++ b/src/components/Dialog/DialogTitle.tsx
@@ -63,7 +63,7 @@ const DialogTitle = ({
   return (
     <Text
       variant="headlineSmall"
-      accessibilityRole="header"
+      role="heading"
       style={[styles.text, styles.v3Text, headerTextStyle, style]}
       {...rest}
     >
diff --git a/src/components/Drawer/DrawerCollapsedItem.tsx b/src/components/Drawer/DrawerCollapsedItem.tsx
index 3f79fce421..1542eafe36 100644
--- a/src/components/Drawer/DrawerCollapsedItem.tsx
+++ b/src/components/Drawer/DrawerCollapsedItem.tsx
@@ -54,7 +54,7 @@ export type Props = ViewProps & {
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   style?: StyleProp<ViewStyle>;
   /**
    * @optional
@@ -102,7 +102,7 @@ const DrawerCollapsedItem = ({
   style,
   onPress,
   disabled,
-  accessibilityLabel,
+  'aria-label': ariaLabel,
   badge = false,
   testID = 'drawer-collapsed-item',
   labelMaxFontSizeMultiplier,
@@ -164,17 +164,13 @@ const DrawerCollapsedItem = ({
 
   return (
     <View {...rest}>
-      {/* eslint-disable-next-line react-native-a11y/has-accessibility-props */}
       <Pressable
         onPress={onPress}
         onPressOut={onPress ? handlePressOut : undefined}
         disabled={disabled}
-        // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
-        accessibilityTraits={active ? ['button', 'selected'] : 'button'}
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityState={{ selected: active }}
-        accessibilityLabel={accessibilityLabel}
+        role="button"
+        aria-selected={active}
+        aria-label={ariaLabel}
         testID={testID}
       >
         <View style={styles.wrapper}>
diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx
index 95ef989248..88535ba162 100644
--- a/src/components/Drawer/DrawerItem.tsx
+++ b/src/components/Drawer/DrawerItem.tsx
@@ -46,7 +46,7 @@ export type Props = ViewProps & {
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Callback which returns a React element to display on the right side. For instance a Badge.
    */
@@ -94,7 +94,7 @@ const DrawerItem = ({
   style,
   onPress,
   background,
-  accessibilityLabel,
+  'aria-label': ariaLabel,
   right,
   labelMaxFontSizeMultiplier,
   hitSlop,
@@ -124,9 +124,9 @@ const DrawerItem = ({
           { backgroundColor, borderRadius },
           style,
         ]}
-        accessibilityRole="button"
-        accessibilityState={{ selected: active }}
-        accessibilityLabel={accessibilityLabel}
+        role="button"
+        aria-selected={active}
+        aria-label={ariaLabel}
         theme={theme}
         hitSlop={hitSlop}
       >
diff --git a/src/components/FAB/Extended.tsx b/src/components/FAB/Extended.tsx
index d15fe6a6fa..06a67cab1f 100644
--- a/src/components/FAB/Extended.tsx
+++ b/src/components/FAB/Extended.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import type {
-  AccessibilityState,
   ColorValue,
   GestureResponderEvent,
   PressableAndroidRippleConfig,
@@ -71,11 +70,24 @@ export type Props = {
   /**
    * Accessibility label. Falls back to `label` if unset.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
-   * Accessibility state forwarded to the underlying button.
+   * Indicates whether the element is checked. Accepts `true`, `false`,
+   * or `'mixed'` for an indeterminate state.
    */
-  accessibilityState?: AccessibilityState;
+  'aria-checked'?: boolean | 'mixed';
+  /**
+   * Indicates whether the element is selected.
+   */
+  'aria-selected'?: boolean;
+  /**
+   * Indicates whether the element is currently busy (e.g. loading).
+   */
+  'aria-busy'?: boolean;
+  /**
+   * Indicates whether the element's controlled content is expanded.
+   */
+  'aria-expanded'?: boolean;
   /**
    * Specifies the largest possible scale a label font can reach.
    */
@@ -148,8 +160,11 @@ const Extended = ({
   expanded,
   visible = true,
   onPress,
-  accessibilityLabel = label,
-  accessibilityState,
+  'aria-label': ariaLabel = label,
+  'aria-checked': ariaChecked,
+  'aria-selected': ariaSelected,
+  'aria-busy': ariaBusy,
+  'aria-expanded': ariaExpanded,
   labelMaxFontSizeMultiplier,
   background,
   style,
@@ -239,8 +254,11 @@ const Extended = ({
         size={size}
         visible={visible}
         onPress={onPress}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityState={accessibilityState}
+        aria-label={ariaLabel}
+        aria-checked={ariaChecked}
+        aria-selected={ariaSelected}
+        aria-busy={ariaBusy}
+        aria-expanded={ariaExpanded}
         background={background}
         widthShared={widthValue}
         labelMaxFontSizeMultiplier={labelMaxFontSizeMultiplier}
@@ -253,7 +271,7 @@ const Extended = ({
         ref={offscreenLabelRef}
         style={styles.offscreenMeasure}
         importantForAccessibility="no-hide-descendants"
-        accessibilityElementsHidden
+        aria-hidden
       >
         <AnimatedText
           variant={dimensions.labelTypescale}
diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx
index 5319d18e36..fa4de1288c 100644
--- a/src/components/FAB/FAB.tsx
+++ b/src/components/FAB/FAB.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import type {
-  AccessibilityState,
   ColorValue,
   GestureResponderEvent,
   PressableAndroidRippleConfig,
@@ -47,11 +46,24 @@ export type Props = {
   /**
    * Accessibility label. Falls back to nothing if unset.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
-   * Accessibility state forwarded to the underlying button.
+   * Indicates whether the element is checked. Accepts `true`, `false`,
+   * or `'mixed'` for an indeterminate state.
    */
-  accessibilityState?: AccessibilityState;
+  'aria-checked'?: boolean | 'mixed';
+  /**
+   * Indicates whether the element is selected.
+   */
+  'aria-selected'?: boolean;
+  /**
+   * Indicates whether the element is currently busy (e.g. loading).
+   */
+  'aria-busy'?: boolean;
+  /**
+   * Indicates whether the element's controlled content is expanded.
+   */
+  'aria-expanded'?: boolean;
   /**
    * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
@@ -110,8 +122,11 @@ const FAB = ({
   onPress,
   containerColor,
   contentColor,
-  accessibilityLabel,
-  accessibilityState,
+  'aria-label': ariaLabel,
+  'aria-checked': ariaChecked,
+  'aria-selected': ariaSelected,
+  'aria-busy': ariaBusy,
+  'aria-expanded': ariaExpanded,
   background,
   style,
   testID = 'floating-action-button',
@@ -127,8 +142,11 @@ const FAB = ({
     onPress={onPress}
     containerColor={containerColor}
     contentColor={contentColor}
-    accessibilityLabel={accessibilityLabel}
-    accessibilityState={accessibilityState}
+    aria-label={ariaLabel}
+    aria-checked={ariaChecked}
+    aria-selected={ariaSelected}
+    aria-busy={ariaBusy}
+    aria-expanded={ariaExpanded}
     background={background}
     style={style}
     testID={testID}
diff --git a/src/components/FAB/Menu.tsx b/src/components/FAB/Menu.tsx
index 044f51255f..58a75291cf 100644
--- a/src/components/FAB/Menu.tsx
+++ b/src/components/FAB/Menu.tsx
@@ -51,7 +51,7 @@ export type MenuItemProps = {
   /**
    * Accessibility label. Falls back to `label`.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   testID?: string;
 };
 
@@ -67,7 +67,10 @@ export type MenuTriggerProps = {
   contentColor?: ColorValue;
   visible?: boolean;
   onPress?: (e: GestureResponderEvent) => void;
-  accessibilityLabel?: string;
+  /**
+   * Accessibility label for the trigger FAB.
+   */
+  'aria-label'?: string;
   testID?: string;
 };
 
@@ -206,7 +209,7 @@ const AnimatedItem = ({
         expanded ? styles.pointerEventsAuto : styles.pointerEventsNone,
       ]}
       importantForAccessibility={expanded ? 'yes' : 'no-hide-descendants'}
-      accessibilityElementsHidden={!expanded}
+      aria-hidden={!expanded}
     >
       {children}
     </Animated.View>
@@ -219,7 +222,10 @@ type ItemProps = {
   variant: Variant;
   theme: InternalTheme;
   onPress: (e: GestureResponderEvent) => void;
-  accessibilityLabel?: string;
+  /**
+   * Accessibility label. Falls back to `label`.
+   */
+  'aria-label'?: string;
   testID?: string;
 };
 
@@ -235,7 +241,7 @@ const MenuItem = ({
   variant,
   theme,
   onPress,
-  accessibilityLabel,
+  'aria-label': ariaLabel,
   testID,
 }: ItemProps) => {
   const colors = resolveColors({ theme, variant });
@@ -261,8 +267,8 @@ const MenuItem = ({
           onPress={onPress}
           onFocus={onFocus}
           onBlur={onBlur}
-          accessibilityRole="button"
-          accessibilityLabel={accessibilityLabel ?? label}
+          role="button"
+          aria-label={ariaLabel ?? label}
           style={[
             { borderRadius },
             Platform.OS === 'web' ? webNoOutline : null,
@@ -309,7 +315,10 @@ type MorphingTriggerProps = {
   visible: boolean;
   alignment: 'start' | 'center' | 'end';
   onPress?: (e: GestureResponderEvent) => void;
-  accessibilityLabel?: string;
+  /**
+   * Accessibility label for the trigger button.
+   */
+  'aria-label'?: string;
   theme: InternalTheme;
   testID?: string;
 };
@@ -326,7 +335,7 @@ const MorphingTrigger = ({
   visible,
   alignment,
   onPress,
-  accessibilityLabel,
+  'aria-label': ariaLabel,
   theme,
   testID,
 }: MorphingTriggerProps) => {
@@ -446,7 +455,7 @@ const MorphingTrigger = ({
         contentColor={triggerContentColor}
         visible={visible}
         onPress={onPress}
-        accessibilityLabel={accessibilityLabel}
+        aria-label={ariaLabel}
         widthShared={widthShared}
         heightShared={heightShared}
         borderRadiusShared={borderRadiusShared}
@@ -616,7 +625,7 @@ const Menu = ({
                   label={item.label}
                   variant={itemsVariant}
                   theme={theme}
-                  accessibilityLabel={item.accessibilityLabel ?? item.label}
+                  aria-label={item['aria-label'] ?? item.label}
                   onPress={handleItemPress(item)}
                   testID={item.testID}
                 />
@@ -636,7 +645,7 @@ const Menu = ({
           visible={triggerVisible}
           alignment={alignment}
           onPress={effectiveExpanded ? onDismiss : openOnPress}
-          accessibilityLabel={trigger.accessibilityLabel}
+          aria-label={trigger['aria-label']}
           theme={theme}
           testID={trigger.testID}
         />
diff --git a/src/components/FAB/Shell.tsx b/src/components/FAB/Shell.tsx
index 4f9b9b5da9..2d2d60e4cd 100644
--- a/src/components/FAB/Shell.tsx
+++ b/src/components/FAB/Shell.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import type {
-  AccessibilityState,
   ColorValue,
   GestureResponderEvent,
   PressableAndroidRippleConfig,
@@ -92,11 +91,24 @@ export type ShellProps = {
   /**
    * Accessibility label. Falls back to `label` if unset.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
-   * Accessibility state forwarded to the underlying button.
+   * Indicates whether the element is checked. Accepts `true`, `false`,
+   * or `'mixed'` for an indeterminate state.
    */
-  accessibilityState?: AccessibilityState;
+  'aria-checked'?: boolean | 'mixed';
+  /**
+   * Indicates whether the element is selected.
+   */
+  'aria-selected'?: boolean;
+  /**
+   * Indicates whether the element is currently busy (e.g. loading).
+   */
+  'aria-busy'?: boolean;
+  /**
+   * Indicates whether the element's controlled content is expanded.
+   */
+  'aria-expanded'?: boolean;
   /**
    * Largest scale the label font can reach (auto-built content only).
    */
@@ -182,8 +194,11 @@ const Shell = ({
   elevation = Tokens.stateElevation.enabled,
   visible = true,
   onPress,
-  accessibilityLabel = label,
-  accessibilityState,
+  'aria-label': ariaLabel = label,
+  'aria-checked': ariaChecked,
+  'aria-selected': ariaSelected,
+  'aria-busy': ariaBusy,
+  'aria-expanded': ariaExpanded,
   labelMaxFontSizeMultiplier,
   labelAnimatedStyle,
   background,
@@ -290,9 +305,12 @@ const Shell = ({
           onPress={onPress}
           onFocus={onFocus}
           onBlur={onBlur}
-          accessibilityLabel={accessibilityLabel}
-          accessibilityRole="button"
-          accessibilityState={accessibilityState}
+          aria-label={ariaLabel}
+          role="button"
+          aria-checked={ariaChecked}
+          aria-selected={ariaSelected}
+          aria-busy={ariaBusy}
+          aria-expanded={ariaExpanded}
           testID={testID}
           style={[
             children ? styles.fill : null,
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
index 899d1e5a46..52a64e98d0 100644
--- a/src/components/IconButton/IconButton.tsx
+++ b/src/components/IconButton/IconButton.tsx
@@ -59,7 +59,7 @@ export type Props = Omit<$RemoveChildren<typeof TouchableRipple>, 'style'> & {
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Style of button's inner content.
    * Use this prop to apply custom height and width or to set a custom padding`.
@@ -112,7 +112,7 @@ const IconButton = ({
   iconColor: customIconColor,
   containerColor: customContainerColor,
   size = 24,
-  accessibilityLabel,
+  'aria-label': ariaLabel,
   disabled,
   onPress,
   selected = false,
@@ -188,13 +188,10 @@ const IconButton = ({
         borderless
         centered
         onPress={onPress}
-        accessibilityLabel={accessibilityLabel}
+        aria-label={ariaLabel}
         style={[styles.touchable, contentStyle]}
-        // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
-        accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityState={{ disabled }}
+        role="button"
+        aria-disabled={disabled}
         disabled={disabled}
         hitSlop={
           TouchableRipple.supported
diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx
index 5dbca2ee60..97730d58e6 100644
--- a/src/components/List/ListAccordion.tsx
+++ b/src/components/List/ListAccordion.tsx
@@ -120,7 +120,7 @@ export type Props = {
   /**
    * Accessibility label for the TouchableRipple. This is read by the screen reader when the user taps the touchable.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * `pointerEvents` passed to the `View` container
    */
@@ -190,7 +190,7 @@ const ListAccordion = ({
   onLongPress,
   delayLongPress,
   expanded: expandedProp,
-  accessibilityLabel,
+  'aria-label': ariaLabel,
   pointerEvents = 'none',
   titleMaxFontSizeMultiplier,
   descriptionMaxFontSizeMultiplier,
@@ -249,9 +249,9 @@ const ListAccordion = ({
           onPress={handlePress}
           onLongPress={onLongPress}
           delayLongPress={delayLongPress}
-          accessibilityRole="button"
-          accessibilityState={{ expanded: isExpanded }}
-          accessibilityLabel={accessibilityLabel}
+          role="button"
+          aria-expanded={isExpanded}
+          aria-label={ariaLabel}
           testID={testID}
           theme={theme}
           background={background}
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index a23fe82942..ca6e849e3d 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -640,8 +640,8 @@ const Menu = ({
       {rendered ? (
         <Portal>
           <Pressable
-            accessibilityLabel={overlayAccessibilityLabel}
-            accessibilityRole="button"
+            aria-label={overlayAccessibilityLabel}
+            role="button"
             onPress={onDismiss}
             pointerEvents={visible ? 'auto' : 'none'}
             style={styles.pressableOverlay}
@@ -651,7 +651,7 @@ const Menu = ({
               menuRef.current = ref;
             }}
             collapsable={false}
-            accessibilityViewIsModal={visible}
+            aria-modal={visible}
             style={[styles.wrapper, positionStyle, style]}
             pointerEvents={pointerEvents}
             onAccessibilityEscape={onDismiss}
diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
index 2d2fd78edb..945c12794b 100644
--- a/src/components/Menu/MenuItem.tsx
+++ b/src/components/Menu/MenuItem.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import type {
-  AccessibilityState,
   GestureResponderEvent,
   PressableAndroidRippleConfig,
   StyleProp,
@@ -95,11 +94,24 @@ export type Props = {
   /**
    * Accessibility label for the Touchable. This is read by the screen reader when the user taps the component.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
-   * Accessibility state for the Touchable. This is read by the screen reader when the user taps the component.
+   * Indicates whether the element is checked. Accepts `true`, `false`,
+   * or `'mixed'` for an indeterminate state.
    */
-  accessibilityState?: AccessibilityState;
+  'aria-checked'?: boolean | 'mixed';
+  /**
+   * Indicates whether the element is selected.
+   */
+  'aria-selected'?: boolean;
+  /**
+   * Indicates whether the element is currently busy (e.g. loading).
+   */
+  'aria-busy'?: boolean;
+  /**
+   * Indicates whether the element's controlled content is expanded.
+   */
+  'aria-expanded'?: boolean;
 };
 
 /**
@@ -137,8 +149,11 @@ const MenuItem = ({
   contentStyle,
   titleStyle,
   testID = 'menu-item',
-  accessibilityLabel,
-  accessibilityState,
+  'aria-label': ariaLabel,
+  'aria-checked': ariaChecked,
+  'aria-selected': ariaSelected,
+  'aria-busy': ariaBusy,
+  'aria-expanded': ariaExpanded,
   theme: themeOverrides,
   titleMaxFontSizeMultiplier = 1.5,
   hitSlop,
@@ -165,8 +180,6 @@ const MenuItem = ({
     ...(theme as Theme).fonts.bodyLarge,
   };
 
-  const newAccessibilityState = { ...accessibilityState, disabled };
-
   return (
     <TouchableRipple
       style={[
@@ -179,9 +192,13 @@ const MenuItem = ({
       disabled={disabled}
       testID={testID}
       background={background}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="menuitem"
-      accessibilityState={newAccessibilityState}
+      aria-label={ariaLabel}
+      role="menuitem"
+      aria-disabled={disabled}
+      aria-checked={ariaChecked}
+      aria-selected={ariaSelected}
+      aria-busy={ariaBusy}
+      aria-expanded={ariaExpanded}
       hitSlop={hitSlop}
     >
       <View style={[styles.row, { opacity: contentOpacity }, containerStyle]}>
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index a8412da806..3c66c885b3 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -182,15 +182,15 @@ function Modal({
   return (
     <Animated.View
       pointerEvents={visible ? 'auto' : 'none'}
-      accessibilityViewIsModal
-      accessibilityLiveRegion="polite"
+      aria-modal
+      aria-live="polite"
       style={StyleSheet.absoluteFill}
       onAccessibilityEscape={onDismissCallback}
       testID={testID}
     >
       <AnimatedPressable
-        accessibilityLabel={overlayAccessibilityLabel}
-        accessibilityRole="button"
+        aria-label={overlayAccessibilityLabel}
+        role="button"
         disabled={!dismissable}
         onPress={dismissable ? onDismissCallback : undefined}
         importantForAccessibility="no"
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
index c14780166b..c3a120b1fd 100644
--- a/src/components/ProgressBar.tsx
+++ b/src/components/ProgressBar.tsx
@@ -195,13 +195,11 @@ const ProgressBar = ({
       onLayout={onLayout}
       {...rest}
       accessible
-      accessibilityRole="progressbar"
-      accessibilityState={{ busy: visible }}
-      accessibilityValue={
-        indeterminate
-          ? {}
-          : { min: 0, max: 100, now: Math.round(progress * 100) }
-      }
+      role="progressbar"
+      aria-busy={visible}
+      aria-valuemin={indeterminate ? undefined : 0}
+      aria-valuemax={indeterminate ? undefined : 100}
+      aria-valuenow={indeterminate ? undefined : Math.round(progress * 100)}
       style={isWeb && styles.webContainer}
       testID={testID}
     >
diff --git a/src/components/RadioButton/RadioButtonAndroid.tsx b/src/components/RadioButton/RadioButtonAndroid.tsx
index a907b46b09..5fcaf9f6e5 100644
--- a/src/components/RadioButton/RadioButtonAndroid.tsx
+++ b/src/components/RadioButton/RadioButtonAndroid.tsx
@@ -134,9 +134,10 @@ const RadioButtonAndroid = ({
                     });
                   }
             }
-            accessibilityRole="radio"
-            accessibilityState={{ disabled, checked }}
-            accessibilityLiveRegion="polite"
+            role="radio"
+            aria-disabled={disabled}
+            aria-checked={checked}
+            aria-live="polite"
             style={styles.container}
             testID={testID}
             theme={theme}
diff --git a/src/components/RadioButton/RadioButtonGroup.tsx b/src/components/RadioButton/RadioButtonGroup.tsx
index 2bdd596561..8522bf3fc4 100644
--- a/src/components/RadioButton/RadioButtonGroup.tsx
+++ b/src/components/RadioButton/RadioButtonGroup.tsx
@@ -56,7 +56,7 @@ export const RadioButtonContext = React.createContext<RadioButtonContextType>(
  */
 const RadioButtonGroup = ({ value, onValueChange, children }: Props) => (
   <RadioButtonContext.Provider value={{ value, onValueChange }}>
-    <View accessibilityRole="radiogroup">{children}</View>
+    <View role="radiogroup">{children}</View>
   </RadioButtonContext.Provider>
 );
 
diff --git a/src/components/RadioButton/RadioButtonIOS.tsx b/src/components/RadioButton/RadioButtonIOS.tsx
index e2e5f06c7c..015356eea3 100644
--- a/src/components/RadioButton/RadioButtonIOS.tsx
+++ b/src/components/RadioButton/RadioButtonIOS.tsx
@@ -92,9 +92,10 @@ const RadioButtonIOS = ({
                     });
                   }
             }
-            accessibilityRole="radio"
-            accessibilityState={{ disabled, checked }}
-            accessibilityLiveRegion="polite"
+            role="radio"
+            aria-disabled={disabled}
+            aria-checked={checked}
+            aria-live="polite"
             style={styles.container}
             testID={testID}
             theme={theme}
diff --git a/src/components/RadioButton/RadioButtonItem.tsx b/src/components/RadioButton/RadioButtonItem.tsx
index 1591760980..e37ed435e2 100644
--- a/src/components/RadioButton/RadioButtonItem.tsx
+++ b/src/components/RadioButton/RadioButtonItem.tsx
@@ -49,7 +49,7 @@ export type Props = {
   /**
    * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Custom color for unchecked radio.
    */
@@ -149,7 +149,7 @@ const RadioButtonItem = ({
   status,
   theme: themeOverrides,
   background,
-  accessibilityLabel = label,
+  'aria-label': ariaLabel = label,
   testID,
   mode,
   position = 'trailing',
@@ -204,12 +204,10 @@ const RadioButtonItem = ({
               })
             }
             onLongPress={onLongPress}
-            accessibilityLabel={accessibilityLabel}
-            accessibilityRole="radio"
-            accessibilityState={{
-              checked,
-              disabled,
-            }}
+            aria-label={ariaLabel}
+            role="radio"
+            aria-checked={checked}
+            aria-disabled={disabled}
             testID={testID}
             disabled={disabled}
             background={background}
diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx
index a081b62fc4..3cc733e126 100644
--- a/src/components/Searchbar.tsx
+++ b/src/components/Searchbar.tsx
@@ -245,7 +245,7 @@ const Searchbar = ({
       theme={theme}
     >
       <IconButton
-        accessibilityRole="button"
+        role="button"
         borderless
         onPress={onIconPress}
         iconColor={iconColor}
@@ -261,7 +261,7 @@ const Searchbar = ({
           ))
         }
         theme={theme}
-        accessibilityLabel={searchAccessibilityLabel}
+        aria-label={searchAccessibilityLabel}
         testID={`${testID}-icon`}
       />
       <TextInput
@@ -282,7 +282,7 @@ const Searchbar = ({
         underlineColorAndroid="transparent"
         returnKeyType="search"
         keyboardAppearance={dark ? 'dark' : 'light'}
-        accessibilityRole="search"
+        role="searchbox"
         ref={root}
         value={value}
         testID={testID}
@@ -308,7 +308,7 @@ const Searchbar = ({
         >
           <IconButton
             borderless
-            accessibilityLabel={clearAccessibilityLabel}
+            aria-label={clearAccessibilityLabel}
             iconColor={value ? iconColor : 'rgba(255, 255, 255, 0)'}
             onPress={handleClearPress}
             icon={
@@ -323,19 +323,19 @@ const Searchbar = ({
               ))
             }
             testID={`${testID}-clear-icon`}
-            accessibilityRole="button"
+            role="button"
             theme={theme}
           />
         </View>
       )}
       {shouldRenderTraileringIcon ? (
         <IconButton
-          accessibilityRole="button"
+          role="button"
           borderless
           onPress={onTraileringIconPress}
           iconColor={traileringIconColor || colors.onSurfaceVariant}
           icon={traileringIcon}
-          accessibilityLabel={traileringIconAccessibilityLabel}
+          aria-label={traileringIconAccessibilityLabel}
           testID={`${testID}-trailering-icon`}
         />
       ) : null}
diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
index 0d30d8aee4..4f701f0b48 100644
--- a/src/components/SegmentedButtons/SegmentedButtonItem.tsx
+++ b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -52,7 +52,7 @@ export type Props = {
   /**
    * Accessibility label for the `SegmentedButtonItem`. This is read by the screen reader when the user taps the button.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Function to execute on press.
    */
@@ -102,7 +102,7 @@ export type Props = {
 
 const SegmentedButtonItem = ({
   checked,
-  accessibilityLabel,
+  'aria-label': ariaLabel,
   disabled,
   style,
   labelStyle,
@@ -195,9 +195,10 @@ const SegmentedButtonItem = ({
       <TouchableRipple
         borderless
         onPress={onPress}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityState={{ disabled, checked }}
-        accessibilityRole="button"
+        aria-label={ariaLabel}
+        aria-disabled={disabled}
+        aria-checked={checked}
+        role="button"
         disabled={disabled}
         testID={testID}
         style={rippleStyle}
diff --git a/src/components/SegmentedButtons/SegmentedButtons.tsx b/src/components/SegmentedButtons/SegmentedButtons.tsx
index 6096639888..c5fceeaeae 100644
--- a/src/components/SegmentedButtons/SegmentedButtons.tsx
+++ b/src/components/SegmentedButtons/SegmentedButtons.tsx
@@ -49,7 +49,7 @@ export type Props<T extends string = string> = {
    * - `value`: value of button (required)
    * - `icon`: icon to display for the item
    * - `disabled`: whether the button is disabled
-   * - `accessibilityLabel`: acccessibility label for the button. This is read by the screen reader when the user taps the button.
+   * - `aria-label`: accessibility label for the button. This is read by the screen reader when the user taps the button.
    * - `checkedColor`: custom color for checked Text and Icon
    * - `uncheckedColor`: custom color for unchecked Text and Icon
    * - `onPress`: callback that is called when button is pressed
@@ -62,7 +62,7 @@ export type Props<T extends string = string> = {
     value: T;
     icon?: IconSource;
     disabled?: boolean;
-    accessibilityLabel?: string;
+    'aria-label'?: string;
     checkedColor?: string;
     uncheckedColor?: string;
     onPress?: (event: GestureResponderEvent) => void;
diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx
index 2d6ee23211..04502eb7de 100644
--- a/src/components/Snackbar.tsx
+++ b/src/components/Snackbar.tsx
@@ -284,7 +284,7 @@ const Snackbar = ({
     >
       <Surface
         pointerEvents="box-none"
-        accessibilityLiveRegion="polite"
+        aria-live="polite"
         theme={theme}
         style={[
           styles.container,
@@ -331,7 +331,7 @@ const Snackbar = ({
             ) : null}
             {isIconButton ? (
               <IconButton
-                accessibilityRole="button"
+                role="button"
                 borderless
                 onPress={onIconPress}
                 iconColor={colors.inverseOnSurface}
@@ -349,7 +349,7 @@ const Snackbar = ({
                     );
                   })
                 }
-                accessibilityLabel={iconAccessibilityLabel}
+                aria-label={iconAccessibilityLabel}
                 style={styles.icon}
                 testID={`${testID}-icon`}
               />
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index fd145bfdee..6f12dafdd8 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -57,7 +57,10 @@ export type Props = {
   style?: StyleProp<ViewStyle>;
   testID?: string;
   theme?: ThemeProp;
-  accessibilityLabel?: string;
+  /**
+   * Accessibility label for the switch. This is read by the screen reader when the user focuses the switch.
+   */
+  'aria-label'?: string;
 };
 
 const {
@@ -132,7 +135,7 @@ const Switch = ({
   style,
   testID,
   theme: themeOverrides,
-  accessibilityLabel,
+  'aria-label': ariaLabel,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const reduceMotion = useReduceMotion();
@@ -367,9 +370,10 @@ const Switch = ({
           focusedSV.value = 0;
         }}
         android_ripple={{ color: 'transparent' }}
-        accessibilityRole="switch"
-        accessibilityState={{ disabled: isDisabled, checked }}
-        accessibilityLabel={accessibilityLabel}
+        role="switch"
+        aria-disabled={isDisabled}
+        aria-checked={checked}
+        aria-label={ariaLabel}
         testID={testID}
         style={[
           styles.touchable,
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
index 806dd4585a..5a7a65d974 100644
--- a/src/components/TextInput/TextInput.tsx
+++ b/src/components/TextInput/TextInput.tsx
@@ -57,7 +57,7 @@ export type TextInputColors = {
 };
 
 export type GetAccessibilityDataReturn = {
-  input: AccessibilityProps;
+  input: AccessibilityProps & { 'aria-invalid'?: boolean };
   supportingText: AccessibilityProps;
   counter: AccessibilityProps;
 };
diff --git a/src/components/TextInput/utils.ts b/src/components/TextInput/utils.ts
index e8da1a4de3..ad81f55301 100644
--- a/src/components/TextInput/utils.ts
+++ b/src/components/TextInput/utils.ts
@@ -611,19 +611,14 @@ export const getAccessibilityData = ({
       : `Characters entered ${inputLength} of ${maxLength}`
     : undefined;
 
-  const accessibilityState = {
-    disabled: isDisabled,
-    invalid: isInvalid,
-    ...props.accessibilityState,
-  } as const;
-
   return {
     input: {
       'aria-label': ariaLabel,
       'aria-valuemax': isCounterReached ? maxLength : undefined,
       'aria-valuenow': isCounterReached ? inputLength : undefined,
+      'aria-disabled': isDisabled,
+      'aria-invalid': isInvalid,
       accessibilityHint: hint,
-      accessibilityState,
     },
     supportingText: {
       'aria-hidden': isSupportingTextHidden,
diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx
index 8d4cdd556f..22598c16b2 100644
--- a/src/components/ToggleButton/ToggleButton.tsx
+++ b/src/components/ToggleButton/ToggleButton.tsx
@@ -29,7 +29,7 @@ export type Props = {
   /**
    * Accessibility label for the `ToggleButton`. This is read by the screen reader when the user taps the button.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Function to execute on press.
    */
@@ -88,7 +88,7 @@ const ToggleButton = ({
   icon,
   size,
   theme: themeOverrides,
-  accessibilityLabel,
+  'aria-label': ariaLabel,
   disabled,
   style,
   value,
@@ -123,8 +123,9 @@ const ToggleButton = ({
               }
             }}
             size={size}
-            accessibilityLabel={accessibilityLabel}
-            accessibilityState={{ disabled, selected: checked }}
+            aria-label={ariaLabel}
+            aria-disabled={disabled}
+            aria-selected={checked}
             disabled={disabled}
             style={[
               styles.content,
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 36dc08971b..8d237d6991 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -215,7 +215,7 @@ const Tooltip = ({
             testID="tooltip-container"
           >
             <Text
-              accessibilityLiveRegion="polite"
+              aria-live="polite"
               numberOfLines={1}
               selectable={false}
               variant="labelLarge"
diff --git a/src/components/__tests__/Appbar/Appbar.test.tsx b/src/components/__tests__/Appbar/Appbar.test.tsx
index 13e5774d79..8738f71e37 100644
--- a/src/components/__tests__/Appbar/Appbar.test.tsx
+++ b/src/components/__tests__/Appbar/Appbar.test.tsx
@@ -153,7 +153,7 @@ describe('renderAppbarContent', () => {
     );
   });
 
-  it('Is recognized as a header when no onPress callback has been pressed', async () => {
+  it('Is recognized as a heading when no onPress callback has been passed', async () => {
     await render(
       <SafeAreaProvider>
         <Appbar.Header>
@@ -162,7 +162,7 @@ describe('renderAppbarContent', () => {
       </SafeAreaProvider>
     );
 
-    expect(screen.getByRole('header')).toBeOnTheScreen();
+    expect(screen.getByRole('heading')).toBeOnTheScreen();
   });
   it('is recognized as a button when onPress callback has been passed', async () => {
     await render(
@@ -174,7 +174,7 @@ describe('renderAppbarContent', () => {
     );
 
     expect(screen.getByRole('button')).toBeEnabled();
-    expect(screen.queryByRole('header')).not.toBeOnTheScreen();
+    expect(screen.queryByRole('heading')).not.toBeOnTheScreen();
   });
   it('is recognized as a disabled button when onPress and disabled is passed', async () => {
     await render(
@@ -186,7 +186,7 @@ describe('renderAppbarContent', () => {
     );
 
     expect(screen.getByRole('button')).toBeDisabled();
-    expect(screen.queryByRole('header')).not.toBeOnTheScreen();
+    expect(screen.queryByRole('heading')).not.toBeOnTheScreen();
   });
 });
 
diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
index 7dbcf9f0a5..a5d9d95766 100644
--- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
+++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
@@ -122,9 +122,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
             testID="search-bar-icon-container"
           >
             <View
-              accessibilityComponentType="button"
               accessibilityLabel="search"
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -134,7 +132,6 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                   "selected": undefined,
                 }
               }
-              accessibilityTraits="button"
               accessibilityValue={
                 {
                   "max": undefined,
@@ -164,6 +161,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -222,11 +220,11 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
           </View>
         </View>
         <TextInput
-          accessibilityRole="search"
           keyboardAppearance="light"
           placeholder="Search"
           placeholderTextColor="rgba(29, 27, 32, 1)"
           returnKeyType="search"
+          role="searchbox"
           selectionColor="rgba(103, 80, 164, 1)"
           style={
             [
@@ -314,9 +312,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
               testID="search-bar-clear-icon-container"
             >
               <View
-                accessibilityComponentType="button"
                 accessibilityLabel="clear"
-                accessibilityRole="button"
                 accessibilityState={
                   {
                     "busy": undefined,
@@ -326,7 +322,6 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                     "selected": undefined,
                   }
                 }
-                accessibilityTraits="button"
                 accessibilityValue={
                   {
                     "max": undefined,
@@ -356,6 +351,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                 onResponderTerminate={[Function]}
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
+                role="button"
                 style={
                   [
                     {
@@ -505,9 +501,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
         testID="icon-button-container"
       >
         <View
-          accessibilityComponentType="button"
           accessibilityLabel="Back"
-          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
@@ -517,7 +511,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
               "selected": undefined,
             }
           }
-          accessibilityTraits="button"
           accessibilityValue={
             {
               "max": undefined,
@@ -547,6 +540,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
@@ -669,10 +663,9 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
       testID="appbar-content"
     >
       <Text
-        accessibilityRole="header"
-        accessibilityTraits="header"
         accessible={true}
         numberOfLines={1}
+        role="heading"
         style={
           [
             {
@@ -752,8 +745,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
         testID="icon-button-container"
       >
         <View
-          accessibilityComponentType="button"
-          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
@@ -763,7 +754,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
               "selected": undefined,
             }
           }
-          accessibilityTraits="button"
           accessibilityValue={
             {
               "max": undefined,
@@ -793,6 +783,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
diff --git a/src/components/__tests__/Checkbox/CheckboxItem.test.tsx b/src/components/__tests__/Checkbox/CheckboxItem.test.tsx
index 082ae3a12b..b1a9c38925 100644
--- a/src/components/__tests__/Checkbox/CheckboxItem.test.tsx
+++ b/src/components/__tests__/Checkbox/CheckboxItem.test.tsx
@@ -50,7 +50,7 @@ it('disables the row when the prop disabled is true', async () => {
     <Checkbox.Item
       status="unchecked"
       label=""
-      accessibilityLabel="some checkbox"
+      aria-label="some checkbox"
       disabled
     />
   );
diff --git a/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index 1b21c11b68..54f2e4f7a4 100644
--- a/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`renders Checkbox with custom testID 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="checkbox"
   accessibilityState={
     {
       "busy": undefined,
@@ -34,6 +33,7 @@ exports[`renders Checkbox with custom testID 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="checkbox"
   style={
     [
       {
@@ -189,7 +189,6 @@ exports[`renders Checkbox with custom testID 1`] = `
 exports[`renders checked Checkbox with color 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="checkbox"
   accessibilityState={
     {
       "busy": undefined,
@@ -220,6 +219,7 @@ exports[`renders checked Checkbox with color 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="checkbox"
   style={
     [
       {
@@ -374,7 +374,6 @@ exports[`renders checked Checkbox with color 1`] = `
 exports[`renders checked Checkbox with onPress 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="checkbox"
   accessibilityState={
     {
       "busy": undefined,
@@ -405,6 +404,7 @@ exports[`renders checked Checkbox with onPress 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="checkbox"
   style={
     [
       {
@@ -559,7 +559,6 @@ exports[`renders checked Checkbox with onPress 1`] = `
 exports[`renders indeterminate Checkbox 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="checkbox"
   accessibilityState={
     {
       "busy": undefined,
@@ -590,6 +589,7 @@ exports[`renders indeterminate Checkbox 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="checkbox"
   style={
     [
       {
@@ -731,7 +731,6 @@ exports[`renders indeterminate Checkbox 1`] = `
 exports[`renders indeterminate Checkbox with color 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="checkbox"
   accessibilityState={
     {
       "busy": undefined,
@@ -762,6 +761,7 @@ exports[`renders indeterminate Checkbox with color 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="checkbox"
   style={
     [
       {
@@ -903,7 +903,6 @@ exports[`renders indeterminate Checkbox with color 1`] = `
 exports[`renders unchecked Checkbox with color 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="checkbox"
   accessibilityState={
     {
       "busy": undefined,
@@ -934,6 +933,7 @@ exports[`renders unchecked Checkbox with color 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="checkbox"
   style={
     [
       {
@@ -1088,7 +1088,6 @@ exports[`renders unchecked Checkbox with color 1`] = `
 exports[`renders unchecked Checkbox with onPress 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="checkbox"
   accessibilityState={
     {
       "busy": undefined,
@@ -1119,6 +1118,7 @@ exports[`renders unchecked Checkbox with onPress 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="checkbox"
   style={
     [
       {
diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap
index a511c78821..0f7f92073b 100644
--- a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap
+++ b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`can render leading checkbox control 1`] = `
 <View
   accessibilityLabel="Default with leading control"
-  accessibilityRole="checkbox"
   accessibilityState={
     {
       "busy": undefined,
@@ -33,6 +32,7 @@ exports[`can render leading checkbox control 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="checkbox"
   style={
     [
       false,
@@ -281,7 +281,6 @@ exports[`can render leading checkbox control 1`] = `
 exports[`renders unchecked 1`] = `
 <View
   accessibilityLabel="Unchecked Button"
-  accessibilityRole="checkbox"
   accessibilityState={
     {
       "busy": undefined,
@@ -311,6 +310,7 @@ exports[`renders unchecked 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="checkbox"
   style={
     [
       false,
diff --git a/src/components/__tests__/FAB.test.tsx b/src/components/__tests__/FAB.test.tsx
index 2e233eaa63..eedcb3e0f3 100644
--- a/src/components/__tests__/FAB.test.tsx
+++ b/src/components/__tests__/FAB.test.tsx
@@ -38,6 +38,13 @@ it('renders FAB with tonalTertiary variant', async () => {
   expect(tree).toMatchSnapshot();
 });
 
+it('renders FAB with aria-label', async () => {
+  const tree = (
+    await render(<FAB icon="plus" aria-label="Add item" />)
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
 it('renders FAB medium size', async () => {
   const tree = (await render(<FAB icon="plus" size="medium" />)).toJSON();
   expect(tree).toMatchSnapshot();
@@ -64,13 +71,6 @@ it('renders FAB with containerColor and contentColor overrides', async () => {
   expect(tree).toMatchSnapshot();
 });
 
-it('renders FAB with accessibilityLabel', async () => {
-  const tree = (
-    await render(<FAB icon="plus" accessibilityLabel="Add item" />)
-  ).toJSON();
-  expect(tree).toMatchSnapshot();
-});
-
 it('renders FAB transitioning to not visible', async () => {
   const { rerender, toJSON } = await render(<FAB icon="plus" />);
   await rerender(<FAB icon="plus" visible={false} />);
@@ -86,15 +86,18 @@ it('renders FAB transitioning to visible', async () => {
 });
 
 it('calls onPress when FAB is pressed', async () => {
+  const user = userEvent.setup();
   const onPress = jest.fn();
-  await render(<FAB icon="plus" onPress={onPress} testID="fab" />);
-  await userEvent.press(screen.getByTestId('fab'));
+  await render(<FAB icon="plus" aria-label="Add item" onPress={onPress} />);
+  await user.press(screen.getByRole('button', { name: 'Add item' }));
   expect(onPress).toHaveBeenCalledTimes(1);
 });
 
 it('forwards event object to onPress', async () => {
   const onPress = jest.fn();
-  await render(<FAB icon="plus" onPress={onPress} testID="fab" />);
-  await fireEvent(screen.getByTestId('fab'), 'onPress', { key: 'value' });
+  await render(<FAB icon="plus" aria-label="Add item" onPress={onPress} />);
+  await fireEvent(screen.getByRole('button', { name: 'Add item' }), 'onPress', {
+    key: 'value',
+  });
   expect(onPress).toHaveBeenCalledWith({ key: 'value' });
 });
diff --git a/src/components/__tests__/FABExtended.test.tsx b/src/components/__tests__/FABExtended.test.tsx
index 2d24e0a038..fd9a21cec9 100644
--- a/src/components/__tests__/FABExtended.test.tsx
+++ b/src/components/__tests__/FABExtended.test.tsx
@@ -57,7 +57,7 @@ it('renders extended FAB transitioning to collapsed', async () => {
   expect(toJSON()).toMatchSnapshot();
 });
 
-it('uses label as default accessibilityLabel', async () => {
+it('uses label as default aria-label', async () => {
   await render(
     <FAB.Extended
       icon="plus"
@@ -70,13 +70,13 @@ it('uses label as default accessibilityLabel', async () => {
   expect(screen.getByLabelText('New message')).toBeOnTheScreen();
 });
 
-it('respects explicit accessibilityLabel', async () => {
+it('respects explicit aria-label', async () => {
   await render(
     <FAB.Extended
       icon="plus"
       label="New message"
       expanded
-      accessibilityLabel="Create new message"
+      aria-label="Create new message"
       testID="extended-fab"
     />
   );
@@ -85,6 +85,7 @@ it('respects explicit accessibilityLabel', async () => {
 });
 
 it('calls onPress when pressed', async () => {
+  const user = userEvent.setup();
   const onPress = jest.fn();
   await render(
     <FAB.Extended
@@ -95,7 +96,7 @@ it('calls onPress when pressed', async () => {
       testID="extended-fab"
     />
   );
-  await userEvent.press(screen.getByTestId('extended-fab'));
+  await user.press(screen.getByRole('button', { name: 'New message' }));
   expect(onPress).toHaveBeenCalledTimes(1);
 });
 
@@ -110,8 +111,12 @@ it('forwards event object to onPress', async () => {
       testID="extended-fab"
     />
   );
-  await fireEvent(screen.getByTestId('extended-fab'), 'onPress', {
-    key: 'value',
-  });
+  await fireEvent(
+    screen.getByRole('button', { name: 'New message' }),
+    'onPress',
+    {
+      key: 'value',
+    }
+  );
   expect(onPress).toHaveBeenCalledWith({ key: 'value' });
 });
diff --git a/src/components/__tests__/MenuItem.test.tsx b/src/components/__tests__/MenuItem.test.tsx
index e4f683fa52..ba66e705a7 100644
--- a/src/components/__tests__/MenuItem.test.tsx
+++ b/src/components/__tests__/MenuItem.test.tsx
@@ -53,21 +53,13 @@ describe('Menu Item', () => {
     ).toBe(labelMaxFontSizeMultiplier);
   });
 
-  it('accepts different values for accessibilityState', async () => {
-    await render(
-      <Menu.Item
-        accessibilityState={{ checked: true }}
-        title="Option 1"
-        testID="touchable"
-      />
-    );
+  it('accepts aria-checked prop', async () => {
+    await render(<Menu.Item aria-checked={true} title="Option 1" />);
 
-    expect(
-      // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
-      screen.getByTestId('touchable').props.accessibilityState
-    ).toMatchObject({
-      checked: true,
-    });
+    expect(screen.getByRole('menuitem')).toHaveProp(
+      'accessibilityState',
+      expect.objectContaining({ checked: true })
+    );
   });
 });
 
diff --git a/src/components/__tests__/ProgressBar.test.tsx b/src/components/__tests__/ProgressBar.test.tsx
index db2a2bf600..4939f25c4c 100644
--- a/src/components/__tests__/ProgressBar.test.tsx
+++ b/src/components/__tests__/ProgressBar.test.tsx
@@ -86,6 +86,12 @@ it('renders progress bar with full height on web', async () => {
   });
 });
 
+it('has progressbar role', async () => {
+  await render(<ProgressBar progress={0.5} />);
+
+  expect(screen.getByRole(a11yRole)).toBeOnTheScreen();
+});
+
 it('renders progress bar with custom style of filled part', async () => {
   await render(
     <ProgressBar progress={0.2} fillStyle={styles.fill} testID="progress-bar" />
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
index 5560a80f36..c20910f20e 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`RadioButton RadioButton with custom testID renders properly 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
@@ -33,6 +32,7 @@ exports[`RadioButton RadioButton with custom testID renders properly 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="radio"
   style={
     [
       {
@@ -90,7 +90,6 @@ exports[`RadioButton RadioButton with custom testID renders properly 1`] = `
 exports[`RadioButton on default platform renders properly 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
@@ -120,6 +119,7 @@ exports[`RadioButton on default platform renders properly 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="radio"
   style={
     [
       {
@@ -176,7 +176,6 @@ exports[`RadioButton on default platform renders properly 1`] = `
 exports[`RadioButton on ios platform renders properly 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
@@ -206,6 +205,7 @@ exports[`RadioButton on ios platform renders properly 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="radio"
   style={
     [
       {
@@ -262,7 +262,6 @@ exports[`RadioButton on ios platform renders properly 1`] = `
 exports[`RadioButton when RadioButton is wrapped by RadioButtonContext.Provider renders properly 1`] = `
 <View
   accessibilityLiveRegion="polite"
-  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
@@ -292,6 +291,7 @@ exports[`RadioButton when RadioButton is wrapped by RadioButtonContext.Provider
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="radio"
   style={
     [
       {
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
index 5c3513d769..1ae7f560be 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
@@ -2,11 +2,10 @@
 
 exports[`RadioButtonGroup renders properly 1`] = `
 <View
-  accessibilityRole="radiogroup"
+  role="radiogroup"
 >
   <View
     accessibilityLiveRegion="polite"
-    accessibilityRole="radio"
     accessibilityState={
       {
         "busy": undefined,
@@ -36,6 +35,7 @@ exports[`RadioButtonGroup renders properly 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="radio"
     style={
       [
         {
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap
index 39405cd07a..5867b1408c 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`can render leading radio button control 1`] = `
 <View
   accessibilityLabel="Default with leading control"
-  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
@@ -33,6 +32,7 @@ exports[`can render leading radio button control 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="radio"
   style={
     [
       false,
@@ -57,7 +57,6 @@ exports[`can render leading radio button control 1`] = `
   >
     <View
       accessibilityLiveRegion="polite"
-      accessibilityRole="radio"
       accessibilityState={
         {
           "busy": undefined,
@@ -87,6 +86,7 @@ exports[`can render leading radio button control 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="radio"
       style={
         [
           {
@@ -181,7 +181,6 @@ exports[`can render leading radio button control 1`] = `
 exports[`can render the Android radio button on different platforms 1`] = `
 <View
   accessibilityLabel="iOS Checkbox"
-  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
@@ -211,6 +210,7 @@ exports[`can render the Android radio button on different platforms 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="radio"
   style={
     [
       false,
@@ -271,7 +271,6 @@ exports[`can render the Android radio button on different platforms 1`] = `
     </Text>
     <View
       accessibilityLiveRegion="polite"
-      accessibilityRole="radio"
       accessibilityState={
         {
           "busy": undefined,
@@ -301,6 +300,7 @@ exports[`can render the Android radio button on different platforms 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="radio"
       style={
         [
           {
@@ -333,7 +333,6 @@ exports[`can render the Android radio button on different platforms 1`] = `
 exports[`can render the iOS radio button on different platforms 1`] = `
 <View
   accessibilityLabel="iOS Radio button"
-  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
@@ -363,6 +362,7 @@ exports[`can render the iOS radio button on different platforms 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="radio"
   style={
     [
       false,
@@ -423,7 +423,6 @@ exports[`can render the iOS radio button on different platforms 1`] = `
     </Text>
     <View
       accessibilityLiveRegion="polite"
-      accessibilityRole="radio"
       accessibilityState={
         {
           "busy": undefined,
@@ -453,6 +452,7 @@ exports[`can render the iOS radio button on different platforms 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="radio"
       style={
         [
           {
@@ -511,7 +511,6 @@ exports[`can render the iOS radio button on different platforms 1`] = `
 exports[`renders unchecked 1`] = `
 <View
   accessibilityLabel="Unchecked Button"
-  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
@@ -541,6 +540,7 @@ exports[`renders unchecked 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  role="radio"
   style={
     [
       false,
@@ -601,7 +601,6 @@ exports[`renders unchecked 1`] = `
     </Text>
     <View
       accessibilityLiveRegion="polite"
-      accessibilityRole="radio"
       accessibilityState={
         {
           "busy": undefined,
@@ -631,6 +630,7 @@ exports[`renders unchecked 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="radio"
       style={
         [
           {
diff --git a/src/components/__tests__/Switch.test.tsx b/src/components/__tests__/Switch.test.tsx
index 5e1f44f174..ceff77a0e6 100644
--- a/src/components/__tests__/Switch.test.tsx
+++ b/src/components/__tests__/Switch.test.tsx
@@ -39,27 +39,38 @@ describe('Switch render', () => {
   });
 });
 
+describe('Switch accessibility', () => {
+  it('has switch role', async () => {
+    await render(<Switch value={false} />);
+
+    expect(screen.getByRole('switch')).toBeOnTheScreen();
+  });
+});
+
 describe('Switch interaction', () => {
   it('toggles to true when off and pressed', async () => {
+    const user = userEvent.setup();
     const onValueChange = jest.fn();
     await render(<Switch value={false} onValueChange={onValueChange} />);
-    await userEvent.press(screen.getByRole('switch'));
+    await user.press(screen.getByRole('switch'));
     expect(onValueChange).toHaveBeenCalledWith(true);
   });
 
   it('toggles to false when on and pressed', async () => {
+    const user = userEvent.setup();
     const onValueChange = jest.fn();
     await render(<Switch value onValueChange={onValueChange} />);
-    await userEvent.press(screen.getByRole('switch'));
+    await user.press(screen.getByRole('switch'));
     expect(onValueChange).toHaveBeenCalledWith(false);
   });
 
   it('does not fire onValueChange when disabled', async () => {
+    const user = userEvent.setup();
     const onValueChange = jest.fn();
     await render(
       <Switch value={false} disabled onValueChange={onValueChange} />
     );
-    await userEvent.press(screen.getByRole('switch'));
+    await user.press(screen.getByRole('switch'));
     expect(onValueChange).not.toHaveBeenCalled();
   });
 });
diff --git a/src/components/__tests__/TextInput.test.tsx b/src/components/__tests__/TextInput.test.tsx
index 6a0fe19768..14b1c72bdb 100644
--- a/src/components/__tests__/TextInput.test.tsx
+++ b/src/components/__tests__/TextInput.test.tsx
@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { I18nManager, TextInput as NativeTextInput, View } from 'react-native';
+import {
+  I18nManager,
+  StyleSheet,
+  TextInput as NativeTextInput,
+  View,
+} from 'react-native';
 import type { GestureResponderEvent } from 'react-native';
 
 import {
@@ -23,6 +28,13 @@ import type { TextInputAccessoryProps } from '../TextInput/TextInputIcon';
 
 const stateOpacity = tokens.md.sys.state.opacity;
 
+const styles = StyleSheet.create({
+  textInputStyle: {
+    fontSize: 40,
+    letterSpacing: 9,
+  },
+});
+
 const defaultI18nIsRTL = I18nManager.isRTL;
 const includeHiddenElements = { includeHiddenElements: true };
 
@@ -181,6 +193,7 @@ it('renders outlined TextInput with TextInput.Icon accessories when error is tru
 });
 
 it('fires onPress on TextInput.Icon end accessory', async () => {
+  const user = userEvent.setup();
   const onClear = jest.fn<(event: GestureResponderEvent) => void>();
   await render(
     <TextInput
@@ -195,13 +208,13 @@ it('fires onPress on TextInput.Icon end accessory', async () => {
           {...props}
           icon="close"
           onPress={onClear}
-          accessibilityLabel="Clear"
+          aria-label="Clear"
         />
       )}
     />
   );
 
-  await userEvent.press(screen.getAllByTestId('icon-button')[1]);
+  await user.press(screen.getByRole('button', { name: 'Clear' }));
 
   expect(onClear).toHaveBeenCalledTimes(1);
 });
@@ -222,11 +235,9 @@ it('disables TextInput.Icon when the field is disabled', async () => {
     />
   );
 
-  const buttons = screen.getAllByTestId('icon-button');
-  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
-  expect(buttons[0].props.accessibilityState?.disabled).toBe(true);
-  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
-  expect(buttons[1].props.accessibilityState?.disabled).toBe(true);
+  const buttons = screen.getAllByRole('button');
+  expect(buttons[0]).toBeDisabled();
+  expect(buttons[1]).toBeDisabled();
 });
 
 it('does not disable TextInput.Icon when the field is read-only (editable false)', async () => {
@@ -245,11 +256,9 @@ it('does not disable TextInput.Icon when the field is read-only (editable false)
     />
   );
 
-  const buttons = screen.getAllByTestId('icon-button');
-  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
-  expect(buttons[0].props.accessibilityState?.disabled).not.toBe(true);
-  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
-  expect(buttons[1].props.accessibilityState?.disabled).not.toBe(true);
+  const buttons = screen.getAllByRole('button');
+  expect(buttons[0]).toBeEnabled();
+  expect(buttons[1]).toBeEnabled();
 });
 
 it('renders supporting text below the field', async () => {
@@ -279,12 +288,8 @@ it('uses polite aria-live on error supporting text', async () => {
     />
   );
 
-  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
-  expect(screen.getByText('Invalid').props['aria-live']).toBe('polite');
-  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
-  expect(screen.getByTestId('tf-input').props.accessibilityState?.invalid).toBe(
-    true
-  );
+  expect(screen.getByText('Invalid')).toHaveProp('aria-live', 'polite');
+  expect(screen.getByLabelText('Email')).toHaveProp('aria-invalid', true);
 });
 
 it('marks the input invalid when error is true without supporting text', async () => {
@@ -298,14 +303,9 @@ it('marks the input invalid when error is true without supporting text', async (
     />
   );
 
-  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
-  expect(screen.getByTestId('tf-input').props.accessibilityState?.invalid).toBe(
-    true
-  );
-  expect(
-    // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
-    screen.getByTestId('tf-input').props.accessibilityHint
-  ).toBeUndefined();
+  const input = screen.getByLabelText('Email');
+  expect(input).toHaveProp('aria-invalid', true);
+  expect(input).not.toHaveProp('accessibilityHint');
 });
 
 it('hides helper supporting text from the accessibility tree and omits aria-live', async () => {
@@ -319,18 +319,10 @@ it('hides helper supporting text from the accessibility tree and omits aria-live
     />
   );
 
-  expect(
-    // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
-    screen.getByText('Optional', includeHiddenElements).props['aria-hidden']
-  ).toBe(true);
-  expect(
-    // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
-    screen.getByText('Optional', includeHiddenElements).props['aria-live']
-  ).toBeUndefined();
-  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
-  expect(screen.getByTestId('tf-input').props['aria-label']).toBe(
-    'Email, Optional'
-  );
+  const supportingText = screen.getByText('Optional', includeHiddenElements);
+  expect(supportingText).toHaveProp('aria-hidden', true);
+  expect(supportingText).not.toHaveProp('aria-live');
+  expect(screen.getByLabelText('Email, Optional')).toBeOnTheScreen();
 });
 
 it('includes supporting text in aria-label when label is omitted', async () => {
@@ -343,10 +335,7 @@ it('includes supporting text in aria-label when label is omitted', async () => {
     />
   );
 
-  // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
-  expect(screen.getByTestId('tf-input').props['aria-label']).toBe(
-    'Helper only'
-  );
+  expect(screen.getByLabelText('Helper only')).toBeOnTheScreen();
 });
 
 it('does not mark the input as aria-disabled when editable is false (read-only)', async () => {
@@ -360,13 +349,10 @@ it('does not mark the input as aria-disabled when editable is false (read-only)'
     />
   );
 
-  expect(
-    // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
-    screen.getByTestId('tf-input').props.accessibilityState?.disabled
-  ).not.toBe(true);
+  expect(screen.getByLabelText('Email')).toHaveProp('aria-disabled', false);
 });
 
-it('marks the input as disabled in accessibilityState when disabled is true', async () => {
+it('marks the input as aria-disabled when disabled is true', async () => {
   await render(
     <TextInput
       label="Email"
@@ -377,10 +363,7 @@ it('marks the input as disabled in accessibilityState when disabled is true', as
     />
   );
 
-  expect(
-    // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
-    screen.getByTestId('tf-input').props.accessibilityState?.disabled
-  ).toBe(true);
+  expect(screen.getByLabelText('Email')).toBeDisabled();
 });
 
 it('renders the input via render with merged props', async () => {
@@ -624,6 +607,7 @@ it('invokes onFocus and onBlur on the TextInput', async () => {
 });
 
 it('focuses the TextInput when the outer Pressable is pressed', async () => {
+  const user = userEvent.setup();
   const focusSpy = jest.spyOn(NativeTextInput.prototype, 'focus');
 
   const { root } = await render(
@@ -637,26 +621,28 @@ it('focuses the TextInput when the outer Pressable is pressed', async () => {
 
   expect(screen.getByTestId('tf-input')).toBeOnTheScreen();
 
-  await userEvent.press(getOuterTextInputPressable(root));
+  await user.press(getOuterTextInputPressable(root));
 
   expect(focusSpy).toHaveBeenCalled();
   focusSpy.mockRestore();
 });
 
 it('does not focus the TextInput when disabled and the Pressable is pressed', async () => {
+  const user = userEvent.setup();
   const focusSpy = jest.spyOn(NativeTextInput.prototype, 'focus');
 
   const { root } = await render(
     <TextInput label="Email" value="" onChangeText={() => {}} disabled />
   );
 
-  await userEvent.press(getOuterTextInputPressable(root));
+  await user.press(getOuterTextInputPressable(root));
 
   expect(focusSpy).not.toHaveBeenCalled();
   focusSpy.mockRestore();
 });
 
 it('focuses the TextInput when read-only and the Pressable is pressed', async () => {
+  const user = userEvent.setup();
   const focusSpy = jest.spyOn(NativeTextInput.prototype, 'focus');
 
   const { root } = await render(
@@ -668,7 +654,7 @@ it('focuses the TextInput when read-only and the Pressable is pressed', async ()
     />
   );
 
-  await userEvent.press(getOuterTextInputPressable(root));
+  await user.press(getOuterTextInputPressable(root));
 
   expect(focusSpy).toHaveBeenCalled();
   focusSpy.mockRestore();
@@ -1182,7 +1168,7 @@ it('does not apply the TextInput style prop to prefix or suffix Text', async ()
       onChangeText={() => {}}
       prefix="$"
       suffix="]"
-      style={{ fontSize: 40, letterSpacing: 9 }}
+      style={styles.textInputStyle}
       testID="tf-input-style"
     />
   );
@@ -1217,6 +1203,7 @@ it('passes defaultValue to the native input when uncontrolled without counter',
 
 it('updates the character counter for an uncontrolled field with counter enabled', async () => {
   const onChangeText = jest.fn();
+  const user = userEvent.setup();
   await render(
     <TextInput
       label="Bio"
@@ -1230,7 +1217,7 @@ it('updates the character counter for an uncontrolled field with counter enabled
 
   expect(screen.getByText('1/10')).toBeOnTheScreen();
 
-  await userEvent.type(screen.getByTestId('tf-uncontrolled-counter'), 'bcd');
+  await user.type(screen.getByTestId('tf-uncontrolled-counter'), 'bcd');
 
   expect(onChangeText).toHaveBeenCalledWith('abcd');
   expect(screen.getByText('4/10')).toBeOnTheScreen();
diff --git a/src/components/__tests__/__snapshots__/ActivityIndicator.test.tsx.snap b/src/components/__tests__/__snapshots__/ActivityIndicator.test.tsx.snap
index 43b4eac37e..7e684841e8 100644
--- a/src/components/__tests__/__snapshots__/ActivityIndicator.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ActivityIndicator.test.tsx.snap
@@ -2,13 +2,9 @@
 
 exports[`renders colored indicator 1`] = `
 <View
-  accessibilityRole="progressbar"
-  accessibilityState={
-    {
-      "busy": true,
-    }
-  }
   accessible={true}
+  aria-busy={true}
+  role="progressbar"
   style={
     [
       {
@@ -200,13 +196,9 @@ exports[`renders colored indicator 1`] = `
 
 exports[`renders hidden indicator 1`] = `
 <View
-  accessibilityRole="progressbar"
-  accessibilityState={
-    {
-      "busy": false,
-    }
-  }
   accessible={true}
+  aria-busy={false}
+  role="progressbar"
   style={
     [
       {
@@ -398,13 +390,9 @@ exports[`renders hidden indicator 1`] = `
 
 exports[`renders indicator 1`] = `
 <View
-  accessibilityRole="progressbar"
-  accessibilityState={
-    {
-      "busy": true,
-    }
-  }
   accessible={true}
+  aria-busy={true}
+  role="progressbar"
   style={
     [
       {
@@ -596,13 +584,9 @@ exports[`renders indicator 1`] = `
 
 exports[`renders large indicator 1`] = `
 <View
-  accessibilityRole="progressbar"
-  accessibilityState={
-    {
-      "busy": true,
-    }
-  }
   accessible={true}
+  aria-busy={true}
+  role="progressbar"
   style={
     [
       {
diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
index 2b7d4fd813..a6fb8c8dee 100644
--- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
@@ -73,8 +73,8 @@ exports[`render visible banner, with custom theme 1`] = `
           }
         >
           <Text
-            accessibilityLiveRegion="polite"
-            accessibilityRole="alert"
+            aria-live="polite"
+            role="alert"
             style={
               [
                 {
@@ -158,7 +158,6 @@ exports[`render visible banner, with custom theme 1`] = `
               testID="button-container"
             >
               <View
-                accessibilityRole="button"
                 accessibilityState={
                   {
                     "busy": undefined,
@@ -188,6 +187,7 @@ exports[`render visible banner, with custom theme 1`] = `
                 onResponderTerminate={[Function]}
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
+                role="button"
                 style={
                   [
                     {
@@ -361,8 +361,8 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
           }
         >
           <Text
-            accessibilityLiveRegion="none"
-            accessibilityRole="alert"
+            aria-live="off"
+            role="alert"
             style={
               [
                 {
@@ -506,8 +506,8 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
             />
           </View>
           <Text
-            accessibilityLiveRegion="polite"
-            accessibilityRole="alert"
+            aria-live="polite"
+            role="alert"
             style={
               [
                 {
@@ -591,7 +591,6 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
               testID="button-container"
             >
               <View
-                accessibilityRole="button"
                 accessibilityState={
                   {
                     "busy": undefined,
@@ -621,6 +620,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
                 onResponderTerminate={[Function]}
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
+                role="button"
                 style={
                   [
                     {
@@ -782,8 +782,8 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
           }
         >
           <Text
-            accessibilityLiveRegion="polite"
-            accessibilityRole="alert"
+            aria-live="polite"
+            role="alert"
             style={
               [
                 {
@@ -867,7 +867,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
               testID="button-container"
             >
               <View
-                accessibilityRole="button"
                 accessibilityState={
                   {
                     "busy": undefined,
@@ -897,6 +896,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                 onResponderTerminate={[Function]}
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
+                role="button"
                 style={
                   [
                     {
@@ -1019,7 +1019,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
               testID="button-container"
             >
               <View
-                accessibilityRole="button"
                 accessibilityState={
                   {
                     "busy": undefined,
@@ -1049,6 +1048,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                 onResponderTerminate={[Function]}
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
+                role="button"
                 style={
                   [
                     {
@@ -1232,8 +1232,8 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
             />
           </View>
           <Text
-            accessibilityLiveRegion="polite"
-            accessibilityRole="alert"
+            aria-live="polite"
+            role="alert"
             style={
               [
                 {
@@ -1355,8 +1355,8 @@ exports[`renders visible banner, without action buttons and without image 1`] =
           }
         >
           <Text
-            accessibilityLiveRegion="polite"
-            accessibilityRole="alert"
+            aria-live="polite"
+            role="alert"
             style={
               [
                 {
diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
index b772a50b60..342f5369bf 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`allows customizing Route's type via generics 1`] = `
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -122,7 +122,7 @@ exports[`allows customizing Route's type via generics 1`] = `
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -138,7 +138,6 @@ exports[`allows customizing Route's type via generics 1`] = `
           testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -168,6 +167,7 @@ exports[`allows customizing Route's type via generics 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -409,7 +409,6 @@ exports[`allows customizing Route's type via generics 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -439,6 +438,7 @@ exports[`allows customizing Route's type via generics 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -695,7 +695,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -791,7 +791,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -807,7 +807,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
           testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -837,6 +836,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -1018,7 +1018,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -1048,6 +1047,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -1212,7 +1212,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -1242,6 +1241,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -1438,7 +1438,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -1534,7 +1534,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -1550,7 +1550,6 @@ exports[`hides labels in shifting bottom navigation 1`] = `
           testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -1580,6 +1579,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -1761,7 +1761,6 @@ exports[`hides labels in shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -1791,6 +1790,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -1955,7 +1955,6 @@ exports[`hides labels in shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -1985,6 +1984,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -2181,7 +2181,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -2227,7 +2227,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
       </View>
     </View>
     <View
-      accessibilityElementsHidden={true}
+      aria-hidden={true}
       collapsable={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
@@ -2273,7 +2273,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
       </View>
     </View>
     <View
-      accessibilityElementsHidden={true}
+      aria-hidden={true}
       collapsable={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
@@ -2319,7 +2319,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
       </View>
     </View>
     <View
-      accessibilityElementsHidden={true}
+      aria-hidden={true}
       collapsable={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
@@ -2415,7 +2415,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -2431,7 +2431,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
           testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -2461,6 +2460,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -2762,7 +2762,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -2792,6 +2791,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -3076,7 +3076,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -3106,6 +3105,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -3390,7 +3390,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -3420,6 +3419,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -3704,7 +3704,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -3734,6 +3733,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -4050,7 +4050,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -4146,7 +4146,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -4162,7 +4162,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
           testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -4192,6 +4191,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -4442,7 +4442,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -4472,6 +4471,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -4705,7 +4705,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -4735,6 +4734,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -4968,7 +4968,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -4998,6 +4997,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -5231,7 +5231,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -5261,6 +5260,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -5526,7 +5526,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -5622,7 +5622,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -5638,7 +5638,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
           testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -5668,6 +5667,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -5844,7 +5844,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -5874,6 +5873,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -6033,7 +6033,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -6063,6 +6062,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -6254,7 +6254,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -6350,7 +6350,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -6366,7 +6366,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
           testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -6396,6 +6395,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -6554,7 +6554,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -6584,6 +6583,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -6725,7 +6725,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -6755,6 +6754,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -6896,7 +6896,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -6926,6 +6925,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -7067,7 +7067,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -7097,6 +7096,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -7270,7 +7270,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -7366,7 +7366,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -7382,7 +7382,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
           testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -7412,6 +7411,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -7713,7 +7713,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -7743,6 +7742,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -8027,7 +8027,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -8057,6 +8056,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -8373,7 +8373,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -8469,7 +8469,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -8485,7 +8485,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
           testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -8515,6 +8514,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -8765,7 +8765,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -8795,6 +8794,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -9028,7 +9028,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -9058,6 +9057,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -9323,7 +9323,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -9419,7 +9419,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -9435,7 +9435,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
           testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -9465,6 +9464,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -9766,7 +9766,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -9796,6 +9795,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -10080,7 +10080,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -10110,6 +10109,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -10426,7 +10426,7 @@ exports[`renders shifting bottom navigation 1`] = `
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -10522,7 +10522,7 @@ exports[`renders shifting bottom navigation 1`] = `
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -10538,7 +10538,6 @@ exports[`renders shifting bottom navigation 1`] = `
           testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -10568,6 +10567,7 @@ exports[`renders shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -10818,7 +10818,6 @@ exports[`renders shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -10848,6 +10847,7 @@ exports[`renders shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -11081,7 +11081,6 @@ exports[`renders shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -11111,6 +11110,7 @@ exports[`renders shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -11344,7 +11344,6 @@ exports[`renders shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -11374,6 +11373,7 @@ exports[`renders shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -11607,7 +11607,6 @@ exports[`renders shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -11637,6 +11636,7 @@ exports[`renders shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
diff --git a/src/components/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/__tests__/__snapshots__/Button.test.tsx.snap
index 992205a103..bbc1fff1be 100644
--- a/src/components/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Button.test.tsx.snap
@@ -42,7 +42,6 @@ exports[`renders button with an accessibility hint 1`] = `
   >
     <View
       accessibilityHint="hint"
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -72,6 +71,7 @@ exports[`renders button with an accessibility hint 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -172,6 +172,7 @@ exports[`renders button with an accessibility label 1`] = `
   testID="button-container-outer-layer"
 >
   <View
+    accessibilityLabel="label"
     collapsable={false}
     style={
       {
@@ -194,8 +195,6 @@ exports[`renders button with an accessibility label 1`] = `
     testID="button-container"
   >
     <View
-      accessibilityLabel="label"
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -225,6 +224,7 @@ exports[`renders button with an accessibility label 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -347,7 +347,6 @@ exports[`renders button with button color 1`] = `
     testID="button-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -377,6 +376,7 @@ exports[`renders button with button color 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -499,7 +499,6 @@ exports[`renders button with color 1`] = `
     testID="button-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -529,6 +528,7 @@ exports[`renders button with color 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -651,7 +651,6 @@ exports[`renders button with custom testID 1`] = `
     testID="custom:testID-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -681,6 +680,7 @@ exports[`renders button with custom testID 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -803,7 +803,6 @@ exports[`renders button with icon 1`] = `
     testID="button-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -833,6 +832,7 @@ exports[`renders button with icon 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -1004,7 +1004,6 @@ exports[`renders button with icon in reverse order 1`] = `
     testID="button-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -1034,6 +1033,7 @@ exports[`renders button with icon in reverse order 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -1207,7 +1207,6 @@ exports[`renders contained contained with mode 1`] = `
     testID="button-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -1237,6 +1236,7 @@ exports[`renders contained contained with mode 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -1360,7 +1360,6 @@ exports[`renders disabled button 1`] = `
     testID="button-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -1390,6 +1389,7 @@ exports[`renders disabled button 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -1512,7 +1512,6 @@ exports[`renders loading button 1`] = `
     testID="button-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -1542,6 +1541,7 @@ exports[`renders loading button 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -1570,13 +1570,9 @@ exports[`renders loading button 1`] = `
         }
       >
         <View
-          accessibilityRole="progressbar"
-          accessibilityState={
-            {
-              "busy": true,
-            }
-          }
           accessible={true}
+          aria-busy={true}
+          role="progressbar"
           style={
             [
               {
@@ -1872,7 +1868,6 @@ exports[`renders outlined button with mode 1`] = `
     testID="button-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -1902,6 +1897,7 @@ exports[`renders outlined button with mode 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -2025,7 +2021,6 @@ exports[`renders text button by default 1`] = `
     testID="button-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -2055,6 +2050,7 @@ exports[`renders text button by default 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -2177,7 +2173,6 @@ exports[`renders text button with mode 1`] = `
     testID="button-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -2207,6 +2202,7 @@ exports[`renders text button with mode 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
diff --git a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
index 736f79b6fe..7bf18dde0e 100644
--- a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -41,7 +41,6 @@ exports[`renders chip with close button 1`] = `
     testID="chip-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -71,6 +70,7 @@ exports[`renders chip with close button 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -214,7 +214,6 @@ exports[`renders chip with close button 1`] = `
     >
       <View
         accessibilityLabel="Close"
-        accessibilityRole="button"
         accessibilityState={
           {
             "busy": undefined,
@@ -244,6 +243,7 @@ exports[`renders chip with close button 1`] = `
         onResponderTerminate={[Function]}
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
+        role="button"
       >
         <View
           style={
@@ -339,7 +339,6 @@ exports[`renders chip with custom close button 1`] = `
     testID="chip-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -369,6 +368,7 @@ exports[`renders chip with custom close button 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -512,7 +512,6 @@ exports[`renders chip with custom close button 1`] = `
     >
       <View
         accessibilityLabel="Close"
-        accessibilityRole="button"
         accessibilityState={
           {
             "busy": undefined,
@@ -542,6 +541,7 @@ exports[`renders chip with custom close button 1`] = `
         onResponderTerminate={[Function]}
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
+        role="button"
       >
         <View
           style={
@@ -637,7 +637,6 @@ exports[`renders chip with icon 1`] = `
     testID="chip-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -667,6 +666,7 @@ exports[`renders chip with icon 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -842,7 +842,6 @@ exports[`renders chip with onPress 1`] = `
     testID="chip-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -872,6 +871,7 @@ exports[`renders chip with onPress 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -1002,7 +1002,6 @@ exports[`renders outlined disabled chip 1`] = `
     testID="chip-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -1032,6 +1031,7 @@ exports[`renders outlined disabled chip 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -1162,7 +1162,6 @@ exports[`renders selected chip 1`] = `
     testID="chip-container"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -1192,6 +1191,7 @@ exports[`renders selected chip 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
diff --git a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
index 0f997739ba..e9bc774f78 100644
--- a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
@@ -329,7 +329,7 @@ exports[`DataTable.Header renders data table header 1`] = `
 
 exports[`DataTable.Pagination renders data table pagination 1`] = `
 <View
-  accessibilityLabel="pagination-container"
+  aria-label="pagination-container"
   style={
     [
       {
@@ -344,7 +344,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
   }
 >
   <Text
-    accessibilityLabel="label"
+    aria-label="label"
     numberOfLines={3}
     style={
       [
@@ -422,9 +422,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
         testID="icon-button-container"
       >
         <View
-          accessibilityComponentType="button"
           accessibilityLabel="chevron-left"
-          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
@@ -434,7 +432,6 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
               "selected": undefined,
             }
           }
-          accessibilityTraits="button"
           accessibilityValue={
             {
               "max": undefined,
@@ -464,6 +461,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
@@ -564,9 +562,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
         testID="icon-button-container"
       >
         <View
-          accessibilityComponentType="button"
           accessibilityLabel="chevron-right"
-          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
@@ -576,7 +572,6 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
               "selected": undefined,
             }
           }
-          accessibilityTraits="button"
           accessibilityValue={
             {
               "max": undefined,
@@ -606,6 +601,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
@@ -669,7 +665,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
 
 exports[`DataTable.Pagination renders data table pagination with fast-forward buttons 1`] = `
 <View
-  accessibilityLabel="pagination-container"
+  aria-label="pagination-container"
   style={
     [
       {
@@ -684,7 +680,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
   }
 >
   <Text
-    accessibilityLabel="label"
+    aria-label="label"
     numberOfLines={3}
     style={
       [
@@ -764,9 +760,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
         testID="icon-button-container"
       >
         <View
-          accessibilityComponentType="button"
           accessibilityLabel="page-first"
-          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
@@ -776,7 +770,6 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
               "selected": undefined,
             }
           }
-          accessibilityTraits="button"
           accessibilityValue={
             {
               "max": undefined,
@@ -806,6 +799,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
@@ -906,9 +900,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
         testID="icon-button-container"
       >
         <View
-          accessibilityComponentType="button"
           accessibilityLabel="chevron-left"
-          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
@@ -918,7 +910,6 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
               "selected": undefined,
             }
           }
-          accessibilityTraits="button"
           accessibilityValue={
             {
               "max": undefined,
@@ -948,6 +939,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
@@ -1048,9 +1040,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
         testID="icon-button-container"
       >
         <View
-          accessibilityComponentType="button"
           accessibilityLabel="chevron-right"
-          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
@@ -1060,7 +1050,6 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
               "selected": undefined,
             }
           }
-          accessibilityTraits="button"
           accessibilityValue={
             {
               "max": undefined,
@@ -1090,6 +1079,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
@@ -1190,9 +1180,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
         testID="icon-button-container"
       >
         <View
-          accessibilityComponentType="button"
           accessibilityLabel="page-last"
-          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
@@ -1202,7 +1190,6 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
               "selected": undefined,
             }
           }
-          accessibilityTraits="button"
           accessibilityValue={
             {
               "max": undefined,
@@ -1232,6 +1219,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
@@ -1295,7 +1283,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
 
 exports[`DataTable.Pagination renders data table pagination with label 1`] = `
 <View
-  accessibilityLabel="pagination-container"
+  aria-label="pagination-container"
   style={
     [
       {
@@ -1310,7 +1298,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
   }
 >
   <Text
-    accessibilityLabel="label"
+    aria-label="label"
     numberOfLines={3}
     style={
       [
@@ -1390,9 +1378,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
         testID="icon-button-container"
       >
         <View
-          accessibilityComponentType="button"
           accessibilityLabel="chevron-left"
-          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
@@ -1402,7 +1388,6 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
               "selected": undefined,
             }
           }
-          accessibilityTraits="button"
           accessibilityValue={
             {
               "max": undefined,
@@ -1432,6 +1417,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
@@ -1532,9 +1518,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
         testID="icon-button-container"
       >
         <View
-          accessibilityComponentType="button"
           accessibilityLabel="chevron-right"
-          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
@@ -1544,7 +1528,6 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
               "selected": undefined,
             }
           }
-          accessibilityTraits="button"
           accessibilityValue={
             {
               "max": undefined,
@@ -1574,6 +1557,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
@@ -1637,7 +1621,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
 
 exports[`DataTable.Pagination renders data table pagination with options select 1`] = `
 <View
-  accessibilityLabel="pagination-container"
+  aria-label="pagination-container"
   style={
     [
       {
@@ -1652,7 +1636,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
   }
 >
   <View
-    accessibilityLabel="Options Select"
+    aria-label="Options Select"
     style={
       {
         "alignItems": "center",
@@ -1660,9 +1644,10 @@ exports[`DataTable.Pagination renders data table pagination with options select
         "marginVertical": 6,
       }
     }
+    testID="options-select"
   >
     <Text
-      accessibilityLabel="selectPageDropdownLabel"
+      aria-label="selectPageDropdownLabel"
       numberOfLines={3}
       style={
         [
@@ -1689,6 +1674,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
           ],
         ]
       }
+      testID="select-page-dropdown-label"
     >
       Rows per page
     </Text>
@@ -1737,7 +1723,6 @@ exports[`DataTable.Pagination renders data table pagination with options select
           testID="button-container"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -1767,6 +1752,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -1898,7 +1884,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
     </View>
   </View>
   <Text
-    accessibilityLabel="label"
+    aria-label="label"
     numberOfLines={3}
     style={
       [
@@ -1978,9 +1964,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
         testID="icon-button-container"
       >
         <View
-          accessibilityComponentType="button"
           accessibilityLabel="page-first"
-          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
@@ -1990,7 +1974,6 @@ exports[`DataTable.Pagination renders data table pagination with options select
               "selected": undefined,
             }
           }
-          accessibilityTraits="button"
           accessibilityValue={
             {
               "max": undefined,
@@ -2020,6 +2003,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
@@ -2120,9 +2104,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
         testID="icon-button-container"
       >
         <View
-          accessibilityComponentType="button"
           accessibilityLabel="chevron-left"
-          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
@@ -2132,7 +2114,6 @@ exports[`DataTable.Pagination renders data table pagination with options select
               "selected": undefined,
             }
           }
-          accessibilityTraits="button"
           accessibilityValue={
             {
               "max": undefined,
@@ -2162,6 +2143,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
@@ -2262,9 +2244,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
         testID="icon-button-container"
       >
         <View
-          accessibilityComponentType="button"
           accessibilityLabel="chevron-right"
-          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
@@ -2274,7 +2254,6 @@ exports[`DataTable.Pagination renders data table pagination with options select
               "selected": undefined,
             }
           }
-          accessibilityTraits="button"
           accessibilityValue={
             {
               "max": undefined,
@@ -2304,6 +2283,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
@@ -2404,9 +2384,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
         testID="icon-button-container"
       >
         <View
-          accessibilityComponentType="button"
           accessibilityLabel="page-last"
-          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
@@ -2416,7 +2394,6 @@ exports[`DataTable.Pagination renders data table pagination with options select
               "selected": undefined,
             }
           }
-          accessibilityTraits="button"
           accessibilityValue={
             {
               "max": undefined,
@@ -2446,6 +2423,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
diff --git a/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap b/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap
index 5746cc089b..4823f954c1 100644
--- a/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`renders DrawerItem with icon 1`] = `
 <View>
   <View
-    accessibilityRole="button"
     accessibilityState={
       {
         "busy": undefined,
@@ -33,6 +32,7 @@ exports[`renders DrawerItem with icon 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="button"
     style={
       [
         {
@@ -162,7 +162,6 @@ exports[`renders DrawerItem with icon 1`] = `
 exports[`renders active DrawerItem 1`] = `
 <View>
   <View
-    accessibilityRole="button"
     accessibilityState={
       {
         "busy": undefined,
@@ -192,6 +191,7 @@ exports[`renders active DrawerItem 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="button"
     style={
       [
         {
@@ -321,7 +321,6 @@ exports[`renders active DrawerItem 1`] = `
 exports[`renders basic DrawerItem 1`] = `
 <View>
   <View
-    accessibilityRole="button"
     accessibilityState={
       {
         "busy": undefined,
@@ -351,6 +350,7 @@ exports[`renders basic DrawerItem 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="button"
     style={
       [
         {
diff --git a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
index 56dd997edc..348a6bba64 100644
--- a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
@@ -52,7 +52,6 @@ exports[`renders FAB large size 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -82,6 +81,7 @@ exports[`renders FAB large size 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -224,7 +224,6 @@ exports[`renders FAB medium size 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -254,6 +253,7 @@ exports[`renders FAB medium size 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -396,7 +396,6 @@ exports[`renders FAB transitioning to not visible 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -426,6 +425,7 @@ exports[`renders FAB transitioning to not visible 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -568,7 +568,6 @@ exports[`renders FAB transitioning to visible 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -598,6 +597,7 @@ exports[`renders FAB transitioning to visible 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -688,7 +688,7 @@ exports[`renders FAB transitioning to visible 1`] = `
 </View>
 `;
 
-exports[`renders FAB with accessibilityLabel 1`] = `
+exports[`renders FAB with aria-label 1`] = `
 <View
   style={
     [
@@ -741,7 +741,6 @@ exports[`renders FAB with accessibilityLabel 1`] = `
   >
     <View
       accessibilityLabel="Add item"
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -771,6 +770,7 @@ exports[`renders FAB with accessibilityLabel 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -913,7 +913,6 @@ exports[`renders FAB with containerColor and contentColor overrides 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -943,6 +942,7 @@ exports[`renders FAB with containerColor and contentColor overrides 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -1085,7 +1085,6 @@ exports[`renders FAB with containerColor override 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -1115,6 +1114,7 @@ exports[`renders FAB with containerColor override 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -1257,7 +1257,6 @@ exports[`renders FAB with default props 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -1287,6 +1286,7 @@ exports[`renders FAB with default props 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -1429,7 +1429,6 @@ exports[`renders FAB with primary variant 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -1459,6 +1458,7 @@ exports[`renders FAB with primary variant 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -1601,7 +1601,6 @@ exports[`renders FAB with secondary variant 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -1631,6 +1630,7 @@ exports[`renders FAB with secondary variant 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -1773,7 +1773,6 @@ exports[`renders FAB with tertiary variant 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -1803,6 +1802,7 @@ exports[`renders FAB with tertiary variant 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -1945,7 +1945,6 @@ exports[`renders FAB with tonalSecondary variant 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -1975,6 +1974,7 @@ exports[`renders FAB with tonalSecondary variant 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -2117,7 +2117,6 @@ exports[`renders FAB with tonalTertiary variant 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -2147,6 +2146,7 @@ exports[`renders FAB with tonalTertiary variant 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
diff --git a/src/components/__tests__/__snapshots__/FABExtended.test.tsx.snap b/src/components/__tests__/__snapshots__/FABExtended.test.tsx.snap
index 7f33de6094..2ceb981d60 100644
--- a/src/components/__tests__/__snapshots__/FABExtended.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/FABExtended.test.tsx.snap
@@ -54,7 +54,6 @@ exports[`renders extended FAB collapsed 1`] = `
     >
       <View
         accessibilityLabel="New message"
-        accessibilityRole="button"
         accessibilityState={
           {
             "busy": undefined,
@@ -84,6 +83,7 @@ exports[`renders extended FAB collapsed 1`] = `
         onResponderTerminate={[Function]}
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
+        role="button"
         style={
           [
             {
@@ -206,7 +206,7 @@ exports[`renders extended FAB collapsed 1`] = `
     />
   </View>
   <View
-    accessibilityElementsHidden={true}
+    aria-hidden={true}
     importantForAccessibility="no-hide-descendants"
     style={
       {
@@ -293,7 +293,6 @@ exports[`renders extended FAB expanded 1`] = `
     >
       <View
         accessibilityLabel="New message"
-        accessibilityRole="button"
         accessibilityState={
           {
             "busy": undefined,
@@ -323,6 +322,7 @@ exports[`renders extended FAB expanded 1`] = `
         onResponderTerminate={[Function]}
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
+        role="button"
         style={
           [
             {
@@ -445,7 +445,7 @@ exports[`renders extended FAB expanded 1`] = `
     />
   </View>
   <View
-    accessibilityElementsHidden={true}
+    aria-hidden={true}
     importantForAccessibility="no-hide-descendants"
     style={
       {
@@ -532,7 +532,6 @@ exports[`renders extended FAB large size 1`] = `
     >
       <View
         accessibilityLabel="New message"
-        accessibilityRole="button"
         accessibilityState={
           {
             "busy": undefined,
@@ -562,6 +561,7 @@ exports[`renders extended FAB large size 1`] = `
         onResponderTerminate={[Function]}
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
+        role="button"
         style={
           [
             {
@@ -684,7 +684,7 @@ exports[`renders extended FAB large size 1`] = `
     />
   </View>
   <View
-    accessibilityElementsHidden={true}
+    aria-hidden={true}
     importantForAccessibility="no-hide-descendants"
     style={
       {
@@ -771,7 +771,6 @@ exports[`renders extended FAB medium size 1`] = `
     >
       <View
         accessibilityLabel="New message"
-        accessibilityRole="button"
         accessibilityState={
           {
             "busy": undefined,
@@ -801,6 +800,7 @@ exports[`renders extended FAB medium size 1`] = `
         onResponderTerminate={[Function]}
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
+        role="button"
         style={
           [
             {
@@ -923,7 +923,7 @@ exports[`renders extended FAB medium size 1`] = `
     />
   </View>
   <View
-    accessibilityElementsHidden={true}
+    aria-hidden={true}
     importantForAccessibility="no-hide-descendants"
     style={
       {
@@ -1010,7 +1010,6 @@ exports[`renders extended FAB not visible 1`] = `
     >
       <View
         accessibilityLabel="New message"
-        accessibilityRole="button"
         accessibilityState={
           {
             "busy": undefined,
@@ -1040,6 +1039,7 @@ exports[`renders extended FAB not visible 1`] = `
         onResponderTerminate={[Function]}
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
+        role="button"
         style={
           [
             {
@@ -1162,7 +1162,7 @@ exports[`renders extended FAB not visible 1`] = `
     />
   </View>
   <View
-    accessibilityElementsHidden={true}
+    aria-hidden={true}
     importantForAccessibility="no-hide-descendants"
     style={
       {
@@ -1249,7 +1249,6 @@ exports[`renders extended FAB transitioning to collapsed 1`] = `
     >
       <View
         accessibilityLabel="New message"
-        accessibilityRole="button"
         accessibilityState={
           {
             "busy": undefined,
@@ -1279,6 +1278,7 @@ exports[`renders extended FAB transitioning to collapsed 1`] = `
         onResponderTerminate={[Function]}
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
+        role="button"
         style={
           [
             {
@@ -1401,7 +1401,7 @@ exports[`renders extended FAB transitioning to collapsed 1`] = `
     />
   </View>
   <View
-    accessibilityElementsHidden={true}
+    aria-hidden={true}
     importantForAccessibility="no-hide-descendants"
     style={
       {
diff --git a/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap b/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap
index aadf81f409..726f4ef1b2 100644
--- a/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`renders FAB.Menu closed 1`] = `
       }
     >
       <View
-        accessibilityElementsHidden={true}
+        aria-hidden={true}
         importantForAccessibility="no-hide-descendants"
         style={
           [
@@ -100,7 +100,6 @@ exports[`renders FAB.Menu closed 1`] = `
           >
             <View
               accessibilityLabel="Send email"
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -130,6 +129,7 @@ exports[`renders FAB.Menu closed 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -220,7 +220,7 @@ exports[`renders FAB.Menu closed 1`] = `
         </View>
       </View>
       <View
-        accessibilityElementsHidden={true}
+        aria-hidden={true}
         importantForAccessibility="no-hide-descendants"
         style={
           [
@@ -265,7 +265,6 @@ exports[`renders FAB.Menu closed 1`] = `
           >
             <View
               accessibilityLabel="Set reminder"
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -295,6 +294,7 @@ exports[`renders FAB.Menu closed 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -493,7 +493,6 @@ exports[`renders FAB.Menu closed 1`] = `
             }
           />
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -523,6 +522,7 @@ exports[`renders FAB.Menu closed 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -740,7 +740,7 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
       }
     >
       <View
-        accessibilityElementsHidden={true}
+        aria-hidden={true}
         importantForAccessibility="no-hide-descendants"
         style={
           [
@@ -785,7 +785,6 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
           >
             <View
               accessibilityLabel="Send email"
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -815,6 +814,7 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -905,7 +905,7 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
         </View>
       </View>
       <View
-        accessibilityElementsHidden={true}
+        aria-hidden={true}
         importantForAccessibility="no-hide-descendants"
         style={
           [
@@ -950,7 +950,6 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
           >
             <View
               accessibilityLabel="Set reminder"
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -980,6 +979,7 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -1178,7 +1178,6 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
             }
           />
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -1208,6 +1207,7 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -1425,7 +1425,7 @@ exports[`renders FAB.Menu open 1`] = `
       }
     >
       <View
-        accessibilityElementsHidden={false}
+        aria-hidden={false}
         importantForAccessibility="yes"
         style={
           [
@@ -1470,7 +1470,6 @@ exports[`renders FAB.Menu open 1`] = `
           >
             <View
               accessibilityLabel="Send email"
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -1500,6 +1499,7 @@ exports[`renders FAB.Menu open 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -1590,7 +1590,7 @@ exports[`renders FAB.Menu open 1`] = `
         </View>
       </View>
       <View
-        accessibilityElementsHidden={false}
+        aria-hidden={false}
         importantForAccessibility="yes"
         style={
           [
@@ -1635,7 +1635,6 @@ exports[`renders FAB.Menu open 1`] = `
           >
             <View
               accessibilityLabel="Set reminder"
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -1665,6 +1664,7 @@ exports[`renders FAB.Menu open 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -1863,7 +1863,6 @@ exports[`renders FAB.Menu open 1`] = `
             }
           />
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -1893,6 +1892,7 @@ exports[`renders FAB.Menu open 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -2110,7 +2110,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
       }
     >
       <View
-        accessibilityElementsHidden={false}
+        aria-hidden={false}
         importantForAccessibility="yes"
         style={
           [
@@ -2155,7 +2155,6 @@ exports[`renders FAB.Menu with 6 items 1`] = `
           >
             <View
               accessibilityLabel="Item 1"
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -2185,6 +2184,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -2275,7 +2275,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
         </View>
       </View>
       <View
-        accessibilityElementsHidden={false}
+        aria-hidden={false}
         importantForAccessibility="yes"
         style={
           [
@@ -2320,7 +2320,6 @@ exports[`renders FAB.Menu with 6 items 1`] = `
           >
             <View
               accessibilityLabel="Item 2"
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -2350,6 +2349,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -2440,7 +2440,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
         </View>
       </View>
       <View
-        accessibilityElementsHidden={false}
+        aria-hidden={false}
         importantForAccessibility="yes"
         style={
           [
@@ -2485,7 +2485,6 @@ exports[`renders FAB.Menu with 6 items 1`] = `
           >
             <View
               accessibilityLabel="Item 3"
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -2515,6 +2514,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -2605,7 +2605,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
         </View>
       </View>
       <View
-        accessibilityElementsHidden={false}
+        aria-hidden={false}
         importantForAccessibility="yes"
         style={
           [
@@ -2650,7 +2650,6 @@ exports[`renders FAB.Menu with 6 items 1`] = `
           >
             <View
               accessibilityLabel="Item 4"
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -2680,6 +2679,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -2770,7 +2770,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
         </View>
       </View>
       <View
-        accessibilityElementsHidden={false}
+        aria-hidden={false}
         importantForAccessibility="yes"
         style={
           [
@@ -2815,7 +2815,6 @@ exports[`renders FAB.Menu with 6 items 1`] = `
           >
             <View
               accessibilityLabel="Item 5"
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -2845,6 +2844,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -2935,7 +2935,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
         </View>
       </View>
       <View
-        accessibilityElementsHidden={false}
+        aria-hidden={false}
         importantForAccessibility="yes"
         style={
           [
@@ -2980,7 +2980,6 @@ exports[`renders FAB.Menu with 6 items 1`] = `
           >
             <View
               accessibilityLabel="Item 6"
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -3010,6 +3009,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -3208,7 +3208,6 @@ exports[`renders FAB.Menu with 6 items 1`] = `
             }
           />
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -3238,6 +3237,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -3456,7 +3456,7 @@ exports[`renders FAB.Menu with center alignment 1`] = `
       }
     >
       <View
-        accessibilityElementsHidden={false}
+        aria-hidden={false}
         importantForAccessibility="yes"
         style={
           [
@@ -3501,7 +3501,6 @@ exports[`renders FAB.Menu with center alignment 1`] = `
           >
             <View
               accessibilityLabel="Send email"
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -3531,6 +3530,7 @@ exports[`renders FAB.Menu with center alignment 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -3621,7 +3621,7 @@ exports[`renders FAB.Menu with center alignment 1`] = `
         </View>
       </View>
       <View
-        accessibilityElementsHidden={false}
+        aria-hidden={false}
         importantForAccessibility="yes"
         style={
           [
@@ -3666,7 +3666,6 @@ exports[`renders FAB.Menu with center alignment 1`] = `
           >
             <View
               accessibilityLabel="Set reminder"
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -3696,6 +3695,7 @@ exports[`renders FAB.Menu with center alignment 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -3894,7 +3894,6 @@ exports[`renders FAB.Menu with center alignment 1`] = `
             }
           />
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -3924,6 +3923,7 @@ exports[`renders FAB.Menu with center alignment 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -4141,7 +4141,7 @@ exports[`renders FAB.Menu with items having icons 1`] = `
       }
     >
       <View
-        accessibilityElementsHidden={false}
+        aria-hidden={false}
         importantForAccessibility="yes"
         style={
           [
@@ -4186,7 +4186,6 @@ exports[`renders FAB.Menu with items having icons 1`] = `
           >
             <View
               accessibilityLabel="Send email"
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -4216,6 +4215,7 @@ exports[`renders FAB.Menu with items having icons 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -4335,7 +4335,7 @@ exports[`renders FAB.Menu with items having icons 1`] = `
         </View>
       </View>
       <View
-        accessibilityElementsHidden={false}
+        aria-hidden={false}
         importantForAccessibility="yes"
         style={
           [
@@ -4380,7 +4380,6 @@ exports[`renders FAB.Menu with items having icons 1`] = `
           >
             <View
               accessibilityLabel="Set reminder"
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -4410,6 +4409,7 @@ exports[`renders FAB.Menu with items having icons 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -4637,7 +4637,6 @@ exports[`renders FAB.Menu with items having icons 1`] = `
             }
           />
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -4667,6 +4666,7 @@ exports[`renders FAB.Menu with items having icons 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -4884,7 +4884,7 @@ exports[`renders FAB.Menu with start alignment 1`] = `
       }
     >
       <View
-        accessibilityElementsHidden={false}
+        aria-hidden={false}
         importantForAccessibility="yes"
         style={
           [
@@ -4929,7 +4929,6 @@ exports[`renders FAB.Menu with start alignment 1`] = `
           >
             <View
               accessibilityLabel="Send email"
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -4959,6 +4958,7 @@ exports[`renders FAB.Menu with start alignment 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -5049,7 +5049,7 @@ exports[`renders FAB.Menu with start alignment 1`] = `
         </View>
       </View>
       <View
-        accessibilityElementsHidden={false}
+        aria-hidden={false}
         importantForAccessibility="yes"
         style={
           [
@@ -5094,7 +5094,6 @@ exports[`renders FAB.Menu with start alignment 1`] = `
           >
             <View
               accessibilityLabel="Set reminder"
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -5124,6 +5123,7 @@ exports[`renders FAB.Menu with start alignment 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -5322,7 +5322,6 @@ exports[`renders FAB.Menu with start alignment 1`] = `
             }
           />
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -5352,6 +5351,7 @@ exports[`renders FAB.Menu with start alignment 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
diff --git a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
index d80a56d27c..731830ff73 100644
--- a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
@@ -44,8 +44,6 @@ exports[`renders disabled icon button 1`] = `
     testID="icon-button-container"
   >
     <View
-      accessibilityComponentType="button"
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -55,12 +53,6 @@ exports[`renders disabled icon button 1`] = `
           "selected": undefined,
         }
       }
-      accessibilityTraits={
-        [
-          "button",
-          "disabled",
-        ]
-      }
       accessibilityValue={
         {
           "max": undefined,
@@ -90,6 +82,7 @@ exports[`renders disabled icon button 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -193,8 +186,6 @@ exports[`renders icon button by default 1`] = `
     testID="icon-button-container"
   >
     <View
-      accessibilityComponentType="button"
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -204,7 +195,6 @@ exports[`renders icon button by default 1`] = `
           "selected": undefined,
         }
       }
-      accessibilityTraits="button"
       accessibilityValue={
         {
           "max": undefined,
@@ -234,6 +224,7 @@ exports[`renders icon button by default 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -337,8 +328,6 @@ exports[`renders icon button with color 1`] = `
     testID="icon-button-container"
   >
     <View
-      accessibilityComponentType="button"
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -348,7 +337,6 @@ exports[`renders icon button with color 1`] = `
           "selected": undefined,
         }
       }
-      accessibilityTraits="button"
       accessibilityValue={
         {
           "max": undefined,
@@ -378,6 +366,7 @@ exports[`renders icon button with color 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -481,8 +470,6 @@ exports[`renders icon button with size 1`] = `
     testID="icon-button-container"
   >
     <View
-      accessibilityComponentType="button"
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -492,7 +479,6 @@ exports[`renders icon button with size 1`] = `
           "selected": undefined,
         }
       }
-      accessibilityTraits="button"
       accessibilityValue={
         {
           "max": undefined,
@@ -522,6 +508,7 @@ exports[`renders icon button with size 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -625,8 +612,6 @@ exports[`renders icon change animated 1`] = `
     testID="icon-button-container"
   >
     <View
-      accessibilityComponentType="button"
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -636,7 +621,6 @@ exports[`renders icon change animated 1`] = `
           "selected": undefined,
         }
       }
-      accessibilityTraits="button"
       accessibilityValue={
         {
           "max": undefined,
@@ -666,6 +650,7 @@ exports[`renders icon change animated 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
index ec3393cb29..66fa6d11e8 100644
--- a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
@@ -10,7 +10,6 @@ exports[`renders expanded accordion 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -40,6 +39,7 @@ exports[`renders expanded accordion 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -275,7 +275,6 @@ exports[`renders list accordion with children 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -305,6 +304,7 @@ exports[`renders list accordion with children 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -482,7 +482,6 @@ exports[`renders list accordion with custom title and description styles 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -512,6 +511,7 @@ exports[`renders list accordion with custom title and description styles 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -682,7 +682,6 @@ exports[`renders list accordion with left items 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -712,6 +711,7 @@ exports[`renders list accordion with left items 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -889,7 +889,6 @@ exports[`renders multiline list accordion 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -919,6 +918,7 @@ exports[`renders multiline list accordion 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
index f0dae5994d..f06b87045f 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
@@ -157,7 +157,6 @@ exports[`renders list item with custom description 1`] = `
               testID="chip-container"
             >
               <View
-                accessibilityRole="button"
                 accessibilityState={
                   {
                     "busy": undefined,
@@ -187,6 +186,7 @@ exports[`renders list item with custom description 1`] = `
                 onResponderTerminate={[Function]}
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
+                role="button"
                 style={
                   [
                     {
diff --git a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
index 90a52d83a0..11d5aea821 100644
--- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -54,7 +54,6 @@ exports[`renders menu with content styles 1`] = `
           testID="button-container"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -84,6 +83,7 @@ exports[`renders menu with content styles 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -181,7 +181,6 @@ exports[`renders menu with content styles 1`] = `
   >
     <View
       accessibilityLabel="Close menu"
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -212,6 +211,7 @@ exports[`renders menu with content styles 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       pointerEvents="auto"
+      role="button"
       style={
         {
           "bottom": 0,
@@ -224,7 +224,7 @@ exports[`renders menu with content styles 1`] = `
       }
     />
     <View
-      accessibilityViewIsModal={true}
+      aria-modal={true}
       collapsable={false}
       onAccessibilityEscape={[MockFunction]}
       pointerEvents="box-none"
@@ -309,7 +309,6 @@ exports[`renders menu with content styles 1`] = `
             testID="menu-surface"
           >
             <View
-              accessibilityRole="menuitem"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -339,6 +338,7 @@ exports[`renders menu with content styles 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="menuitem"
               style={
                 [
                   false,
@@ -433,7 +433,6 @@ exports[`renders menu with content styles 1`] = `
               </View>
             </View>
             <View
-              accessibilityRole="menuitem"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -463,6 +462,7 @@ exports[`renders menu with content styles 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="menuitem"
               style={
                 [
                   false,
@@ -617,7 +617,6 @@ exports[`renders not visible menu 1`] = `
         testID="button-container"
       >
         <View
-          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
@@ -647,6 +646,7 @@ exports[`renders not visible menu 1`] = `
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
@@ -785,7 +785,6 @@ exports[`renders visible menu 1`] = `
           testID="button-container"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -815,6 +814,7 @@ exports[`renders visible menu 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -912,7 +912,6 @@ exports[`renders visible menu 1`] = `
   >
     <View
       accessibilityLabel="Close menu"
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -943,6 +942,7 @@ exports[`renders visible menu 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       pointerEvents="auto"
+      role="button"
       style={
         {
           "bottom": 0,
@@ -955,7 +955,7 @@ exports[`renders visible menu 1`] = `
       }
     />
     <View
-      accessibilityViewIsModal={true}
+      aria-modal={true}
       collapsable={false}
       onAccessibilityEscape={[MockFunction]}
       pointerEvents="box-none"
@@ -1036,7 +1036,6 @@ exports[`renders visible menu 1`] = `
             testID="menu-surface"
           >
             <View
-              accessibilityRole="menuitem"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -1066,6 +1065,7 @@ exports[`renders visible menu 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="menuitem"
               style={
                 [
                   false,
@@ -1160,7 +1160,6 @@ exports[`renders visible menu 1`] = `
               </View>
             </View>
             <View
-              accessibilityRole="menuitem"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -1190,6 +1189,7 @@ exports[`renders visible menu 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="menuitem"
               style={
                 [
                   false,
diff --git a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap
index d5101a1b26..6977abf932 100644
--- a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`Menu Item renders menu item 1`] = `
 <>
   <View
-    accessibilityRole="menuitem"
     accessibilityState={
       {
         "busy": undefined,
@@ -33,6 +32,7 @@ exports[`Menu Item renders menu item 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="menuitem"
     style={
       [
         false,
@@ -167,7 +167,6 @@ exports[`Menu Item renders menu item 1`] = `
     </View>
   </View>
   <View
-    accessibilityRole="menuitem"
     accessibilityState={
       {
         "busy": undefined,
@@ -197,6 +196,7 @@ exports[`Menu Item renders menu item 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="menuitem"
     style={
       [
         false,
@@ -331,7 +331,6 @@ exports[`Menu Item renders menu item 1`] = `
     </View>
   </View>
   <View
-    accessibilityRole="menuitem"
     accessibilityState={
       {
         "busy": undefined,
@@ -361,6 +360,7 @@ exports[`Menu Item renders menu item 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="menuitem"
     style={
       [
         false,
@@ -495,7 +495,6 @@ exports[`Menu Item renders menu item 1`] = `
     </View>
   </View>
   <View
-    accessibilityRole="menuitem"
     accessibilityState={
       {
         "busy": undefined,
@@ -525,6 +524,7 @@ exports[`Menu Item renders menu item 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="menuitem"
     style={
       [
         false,
@@ -659,7 +659,6 @@ exports[`Menu Item renders menu item 1`] = `
     </View>
   </View>
   <View
-    accessibilityRole="menuitem"
     accessibilityState={
       {
         "busy": undefined,
@@ -689,6 +688,7 @@ exports[`Menu Item renders menu item 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="menuitem"
     style={
       [
         false,
diff --git a/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap
index ae5c19ff75..22fa984fd8 100644
--- a/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap
@@ -2,21 +2,13 @@
 
 exports[`renders colored progress bar 1`] = `
 <View
-  accessibilityRole="progressbar"
-  accessibilityState={
-    {
-      "busy": true,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": 100,
-      "min": 0,
-      "now": 20,
-    }
-  }
   accessible={true}
+  aria-busy={true}
+  aria-valuemax={100}
+  aria-valuemin={0}
+  aria-valuenow={20}
   onLayout={[Function]}
+  role="progressbar"
   style={false}
   testID="progress-bar"
 >
@@ -56,21 +48,13 @@ exports[`renders colored progress bar 1`] = `
 
 exports[`renders hidden progress bar 1`] = `
 <View
-  accessibilityRole="progressbar"
-  accessibilityState={
-    {
-      "busy": false,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": 100,
-      "min": 0,
-      "now": 20,
-    }
-  }
   accessible={true}
+  aria-busy={false}
+  aria-valuemax={100}
+  aria-valuemin={0}
+  aria-valuenow={20}
   onLayout={[Function]}
+  role="progressbar"
   style={false}
   testID="progress-bar"
 >
@@ -110,15 +94,10 @@ exports[`renders hidden progress bar 1`] = `
 
 exports[`renders indeterminate progress bar 1`] = `
 <View
-  accessibilityRole="progressbar"
-  accessibilityState={
-    {
-      "busy": true,
-    }
-  }
-  accessibilityValue={{}}
   accessible={true}
+  aria-busy={true}
   onLayout={[Function]}
+  role="progressbar"
   style={false}
   testID="progress-bar"
 >
@@ -158,21 +137,13 @@ exports[`renders indeterminate progress bar 1`] = `
 
 exports[`renders progress bar with specific progress 1`] = `
 <View
-  accessibilityRole="progressbar"
-  accessibilityState={
-    {
-      "busy": true,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": 100,
-      "min": 0,
-      "now": 20,
-    }
-  }
   accessible={true}
+  aria-busy={true}
+  aria-valuemax={100}
+  aria-valuemin={0}
+  aria-valuenow={20}
   onLayout={[Function]}
+  role="progressbar"
   style={false}
   testID="progress-bar"
 >
diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
index bbe1779a66..29b660cbd9 100644
--- a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
@@ -81,9 +81,7 @@ exports[`activity indicator snapshot test 1`] = `
         testID="search-bar-icon-container"
       >
         <View
-          accessibilityComponentType="button"
           accessibilityLabel="search"
-          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
@@ -93,7 +91,6 @@ exports[`activity indicator snapshot test 1`] = `
               "selected": undefined,
             }
           }
-          accessibilityTraits="button"
           accessibilityValue={
             {
               "max": undefined,
@@ -123,6 +120,7 @@ exports[`activity indicator snapshot test 1`] = `
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
@@ -181,11 +179,11 @@ exports[`activity indicator snapshot test 1`] = `
       </View>
     </View>
     <TextInput
-      accessibilityRole="search"
       keyboardAppearance="light"
       placeholder=""
       placeholderTextColor="rgba(29, 27, 32, 1)"
       returnKeyType="search"
+      role="searchbox"
       selectionColor="rgba(103, 80, 164, 1)"
       style={
         [
@@ -217,13 +215,9 @@ exports[`activity indicator snapshot test 1`] = `
       value=""
     />
     <View
-      accessibilityRole="progressbar"
-      accessibilityState={
-        {
-          "busy": true,
-        }
-      }
       accessible={true}
+      aria-busy={true}
+      role="progressbar"
       style={
         [
           {
@@ -499,9 +493,7 @@ exports[`renders with placeholder 1`] = `
         testID="search-bar-icon-container"
       >
         <View
-          accessibilityComponentType="button"
           accessibilityLabel="search"
-          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
@@ -511,7 +503,6 @@ exports[`renders with placeholder 1`] = `
               "selected": undefined,
             }
           }
-          accessibilityTraits="button"
           accessibilityValue={
             {
               "max": undefined,
@@ -541,6 +532,7 @@ exports[`renders with placeholder 1`] = `
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
@@ -599,11 +591,11 @@ exports[`renders with placeholder 1`] = `
       </View>
     </View>
     <TextInput
-      accessibilityRole="search"
       keyboardAppearance="light"
       placeholder="Search"
       placeholderTextColor="rgba(29, 27, 32, 1)"
       returnKeyType="search"
+      role="searchbox"
       selectionColor="rgba(103, 80, 164, 1)"
       style={
         [
@@ -691,9 +683,7 @@ exports[`renders with placeholder 1`] = `
           testID="search-bar-clear-icon-container"
         >
           <View
-            accessibilityComponentType="button"
             accessibilityLabel="clear"
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -703,7 +693,6 @@ exports[`renders with placeholder 1`] = `
                 "selected": undefined,
               }
             }
-            accessibilityTraits="button"
             accessibilityValue={
               {
                 "max": undefined,
@@ -733,6 +722,7 @@ exports[`renders with placeholder 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -876,9 +866,7 @@ exports[`renders with text 1`] = `
         testID="search-bar-icon-container"
       >
         <View
-          accessibilityComponentType="button"
           accessibilityLabel="search"
-          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
@@ -888,7 +876,6 @@ exports[`renders with text 1`] = `
               "selected": undefined,
             }
           }
-          accessibilityTraits="button"
           accessibilityValue={
             {
               "max": undefined,
@@ -918,6 +905,7 @@ exports[`renders with text 1`] = `
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
@@ -976,11 +964,11 @@ exports[`renders with text 1`] = `
       </View>
     </View>
     <TextInput
-      accessibilityRole="search"
       keyboardAppearance="light"
       placeholder="Search"
       placeholderTextColor="rgba(29, 27, 32, 1)"
       returnKeyType="search"
+      role="searchbox"
       selectionColor="rgba(103, 80, 164, 1)"
       style={
         [
@@ -1064,9 +1052,7 @@ exports[`renders with text 1`] = `
           testID="search-bar-clear-icon-container"
         >
           <View
-            accessibilityComponentType="button"
             accessibilityLabel="clear"
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -1076,7 +1062,6 @@ exports[`renders with text 1`] = `
                 "selected": undefined,
               }
             }
-            accessibilityTraits="button"
             accessibilityValue={
               {
                 "max": undefined,
@@ -1106,6 +1091,7 @@ exports[`renders with text 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
diff --git a/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap b/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap
index 895061bb52..4de6f40b6f 100644
--- a/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap
@@ -36,7 +36,6 @@ exports[`renders segmented button 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -66,6 +65,7 @@ exports[`renders segmented button 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
@@ -163,7 +163,6 @@ exports[`renders segmented button 1`] = `
     }
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -193,6 +192,7 @@ exports[`renders segmented button 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           {
diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
index bc4642cc3f..4857580e83 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`renders snackbar with Text as a child 1`] = `
     testID="surface-outer-layer"
   >
     <View
-      accessibilityLiveRegion="polite"
+      aria-live="polite"
       collapsable={false}
       pointerEvents="box-none"
       style={
@@ -133,7 +133,7 @@ exports[`renders snackbar with View & Text as a child 1`] = `
     testID="surface-outer-layer"
   >
     <View
-      accessibilityLiveRegion="polite"
+      aria-live="polite"
       collapsable={false}
       pointerEvents="box-none"
       style={
@@ -247,7 +247,7 @@ exports[`renders snackbar with action button 1`] = `
     testID="surface-outer-layer"
   >
     <View
-      accessibilityLiveRegion="polite"
+      aria-live="polite"
       collapsable={false}
       pointerEvents="box-none"
       style={
@@ -360,7 +360,6 @@ exports[`renders snackbar with action button 1`] = `
             testID="button-container"
           >
             <View
-              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -390,6 +389,7 @@ exports[`renders snackbar with action button 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              role="button"
               style={
                 [
                   {
@@ -518,7 +518,7 @@ exports[`renders snackbar with content 1`] = `
     testID="surface-outer-layer"
   >
     <View
-      accessibilityLiveRegion="polite"
+      aria-live="polite"
       collapsable={false}
       pointerEvents="box-none"
       style={
diff --git a/src/components/__tests__/__snapshots__/Switch.test.tsx.snap b/src/components/__tests__/__snapshots__/Switch.test.tsx.snap
index 41fce74fcc..3589a26ee9 100644
--- a/src/components/__tests__/__snapshots__/Switch.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Switch.test.tsx.snap
@@ -16,7 +16,6 @@ exports[`Switch render renders disabled off 1`] = `
   }
 >
   <View
-    accessibilityRole="switch"
     accessibilityState={
       {
         "busy": undefined,
@@ -46,6 +45,7 @@ exports[`Switch render renders disabled off 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="switch"
     style={
       [
         {
@@ -227,7 +227,6 @@ exports[`Switch render renders disabled on 1`] = `
   }
 >
   <View
-    accessibilityRole="switch"
     accessibilityState={
       {
         "busy": undefined,
@@ -257,6 +256,7 @@ exports[`Switch render renders disabled on 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="switch"
     style={
       [
         {
@@ -418,7 +418,6 @@ exports[`Switch render renders off 1`] = `
   }
 >
   <View
-    accessibilityRole="switch"
     accessibilityState={
       {
         "busy": undefined,
@@ -448,6 +447,7 @@ exports[`Switch render renders off 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="switch"
     style={
       [
         {
@@ -612,7 +612,6 @@ exports[`Switch render renders on 1`] = `
   }
 >
   <View
-    accessibilityRole="switch"
     accessibilityState={
       {
         "busy": undefined,
@@ -642,6 +641,7 @@ exports[`Switch render renders on 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="switch"
     style={
       [
         {
@@ -786,7 +786,6 @@ exports[`Switch render renders with checked icon 1`] = `
   }
 >
   <View
-    accessibilityRole="switch"
     accessibilityState={
       {
         "busy": undefined,
@@ -816,6 +815,7 @@ exports[`Switch render renders with checked icon 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="switch"
     style={
       [
         {
@@ -1030,7 +1030,6 @@ exports[`Switch render renders with per-state icons 1`] = `
   }
 >
   <View
-    accessibilityRole="switch"
     accessibilityState={
       {
         "busy": undefined,
@@ -1060,6 +1059,7 @@ exports[`Switch render renders with per-state icons 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    role="switch"
     style={
       [
         {
diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
index 0bbe16ebc3..c955c943e2 100644
--- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -188,8 +188,6 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
           testID="icon-button-container"
         >
           <View
-            accessibilityComponentType="button"
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -199,7 +197,6 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
                 "selected": undefined,
               }
             }
-            accessibilityTraits="button"
             accessibilityValue={
               {
                 "max": undefined,
@@ -230,6 +227,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -307,12 +305,8 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
       }
     >
       <TextInput
-        accessibilityState={
-          {
-            "disabled": false,
-            "invalid": false,
-          }
-        }
+        aria-disabled={false}
+        aria-invalid={false}
         aria-label="Search"
         cursorColor="rgba(103, 80, 164, 1)"
         onBlur={[Function]}
@@ -399,8 +393,6 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
           testID="icon-button-container"
         >
           <View
-            accessibilityComponentType="button"
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -410,7 +402,6 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
                 "selected": undefined,
               }
             }
-            accessibilityTraits="button"
             accessibilityValue={
               {
                 "max": undefined,
@@ -441,6 +432,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -698,8 +690,6 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
           testID="icon-button-container"
         >
           <View
-            accessibilityComponentType="button"
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -709,7 +699,6 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
                 "selected": undefined,
               }
             }
-            accessibilityTraits="button"
             accessibilityValue={
               {
                 "max": undefined,
@@ -740,6 +729,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -817,12 +807,8 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
       }
     >
       <TextInput
-        accessibilityState={
-          {
-            "disabled": false,
-            "invalid": true,
-          }
-        }
+        aria-disabled={false}
+        aria-invalid={true}
         aria-label="Search"
         cursorColor="rgba(179, 38, 30, 1)"
         onBlur={[Function]}
@@ -909,8 +895,6 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
           testID="icon-button-container"
         >
           <View
-            accessibilityComponentType="button"
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -920,7 +904,6 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
                 "selected": undefined,
               }
             }
-            accessibilityTraits="button"
             accessibilityValue={
               {
                 "max": undefined,
@@ -951,6 +934,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -1172,12 +1156,8 @@ exports[`renders filled TextInput with label and value 1`] = `
       }
     >
       <TextInput
-        accessibilityState={
-          {
-            "disabled": false,
-            "invalid": false,
-          }
-        }
+        aria-disabled={false}
+        aria-invalid={false}
         aria-label="Email"
         cursorColor="rgba(103, 80, 164, 1)"
         onBlur={[Function]}
@@ -1389,8 +1369,6 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
           testID="icon-button-container"
         >
           <View
-            accessibilityComponentType="button"
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -1400,7 +1378,6 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
                 "selected": undefined,
               }
             }
-            accessibilityTraits="button"
             accessibilityValue={
               {
                 "max": undefined,
@@ -1431,6 +1408,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -1508,12 +1486,8 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
       }
     >
       <TextInput
-        accessibilityState={
-          {
-            "disabled": false,
-            "invalid": false,
-          }
-        }
+        aria-disabled={false}
+        aria-invalid={false}
         aria-label="Search"
         cursorColor="rgba(103, 80, 164, 1)"
         onBlur={[Function]}
@@ -1600,8 +1574,6 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
           testID="icon-button-container"
         >
           <View
-            accessibilityComponentType="button"
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -1611,7 +1583,6 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
                 "selected": undefined,
               }
             }
-            accessibilityTraits="button"
             accessibilityValue={
               {
                 "max": undefined,
@@ -1642,6 +1613,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -1880,8 +1852,6 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
           testID="icon-button-container"
         >
           <View
-            accessibilityComponentType="button"
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -1891,7 +1861,6 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
                 "selected": undefined,
               }
             }
-            accessibilityTraits="button"
             accessibilityValue={
               {
                 "max": undefined,
@@ -1922,6 +1891,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -1999,12 +1969,8 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
       }
     >
       <TextInput
-        accessibilityState={
-          {
-            "disabled": false,
-            "invalid": true,
-          }
-        }
+        aria-disabled={false}
+        aria-invalid={true}
         aria-label="Search"
         cursorColor="rgba(179, 38, 30, 1)"
         onBlur={[Function]}
@@ -2091,8 +2057,6 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
           testID="icon-button-container"
         >
           <View
-            accessibilityComponentType="button"
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -2102,7 +2066,6 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
                 "selected": undefined,
               }
             }
-            accessibilityTraits="button"
             accessibilityValue={
               {
                 "max": undefined,
@@ -2133,6 +2096,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -2335,12 +2299,8 @@ exports[`renders outlined TextInput with label and value 1`] = `
       }
     >
       <TextInput
-        accessibilityState={
-          {
-            "disabled": false,
-            "invalid": false,
-          }
-        }
+        aria-disabled={false}
+        aria-invalid={false}
         aria-label="Password"
         cursorColor="rgba(103, 80, 164, 1)"
         onBlur={[Function]}
diff --git a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
index 28e6269c7b..63257435ed 100644
--- a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
@@ -44,8 +44,6 @@ exports[`renders disabled toggle button 1`] = `
     testID="icon-button-container"
   >
     <View
-      accessibilityComponentType="button"
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -55,12 +53,6 @@ exports[`renders disabled toggle button 1`] = `
           "selected": true,
         }
       }
-      accessibilityTraits={
-        [
-          "button",
-          "disabled",
-        ]
-      }
       accessibilityValue={
         {
           "max": undefined,
@@ -90,6 +82,7 @@ exports[`renders disabled toggle button 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           false,
@@ -191,8 +184,6 @@ exports[`renders toggle button 1`] = `
     testID="icon-button-container"
   >
     <View
-      accessibilityComponentType="button"
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -202,7 +193,6 @@ exports[`renders toggle button 1`] = `
           "selected": true,
         }
       }
-      accessibilityTraits="button"
       accessibilityValue={
         {
           "max": undefined,
@@ -232,6 +222,7 @@ exports[`renders toggle button 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           false,
@@ -333,8 +324,6 @@ exports[`renders unchecked toggle button 1`] = `
     testID="icon-button-container"
   >
     <View
-      accessibilityComponentType="button"
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -344,12 +333,6 @@ exports[`renders unchecked toggle button 1`] = `
           "selected": false,
         }
       }
-      accessibilityTraits={
-        [
-          "button",
-          "disabled",
-        ]
-      }
       accessibilityValue={
         {
           "max": undefined,
@@ -379,6 +362,7 @@ exports[`renders unchecked toggle button 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      role="button"
       style={
         [
           false,