diff --git a/src/components/ActivityIndicator.tsx b/src/components/ActivityIndicator.tsx
index 9436979208..5b1d8ff77e 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 0826372c8f..9e9e33b09d 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 513a4de04e..61cdd41098 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}
         >
@@ -164,11 +155,8 @@ const AppbarContent = ({
     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 +192,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 967c627149..ffeb64e17e 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 1f18b17aae..29fab333d3 100644
--- a/src/components/BottomNavigation/BottomNavigation.tsx
+++ b/src/components/BottomNavigation/BottomNavigation.tsx
@@ -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 83998977b9..988fec7d47 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;
 };
@@ -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..66389bb616 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Animated, Platform, StyleSheet, View } from 'react-native';
 import type {
-  AccessibilityRole,
   ColorValue,
   GestureResponderEvent,
   PressableAndroidRippleConfig,
@@ -80,7 +79,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 +87,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?: string;
   /**
    * Function to execute on press.
    */
@@ -169,9 +168,9 @@ const Button = ({
   buttonColor: customButtonColor,
   textColor: customTextColor,
   children,
-  accessibilityLabel,
+  'aria-label': ariaLabel,
   accessibilityHint,
-  accessibilityRole = 'button',
+  role = 'button',
   hitSlop,
   onPress,
   onPressIn,
@@ -352,10 +351,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 7173e64501..021c3af904 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 c59d02fa6e..7ff43cff1c 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..66346e92bb 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,
@@ -169,12 +169,9 @@ const DrawerCollapsedItem = ({
         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 1fc362edb2..f11ddabcbf 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 4c3d6fe65e..97fc7748cd 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -642,8 +642,8 @@ const Menu = ({
       {rendered ? (
         <Portal>
           <Pressable
-            accessibilityLabel={overlayAccessibilityLabel}
-            accessibilityRole="button"
+            aria-label={overlayAccessibilityLabel}
+            role="button"
             onPress={onDismiss}
             pointerEvents={visible ? 'auto' : 'none'}
             style={styles.pressableOverlay}
@@ -653,7 +653,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/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 1eb0c23de6..0bcc53083b 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 420dd79f3a..990e64bca7 100644
--- a/src/components/__tests__/Appbar/Appbar.test.tsx
+++ b/src/components/__tests__/Appbar/Appbar.test.tsx
@@ -146,8 +146,8 @@ describe('renderAppbarContent', () => {
     );
   });
 
-  it('Is recognized as a header when no onPress callback has been pressed', () => {
-    const { getByRole } = render(
+  it('Is recognized as a heading when no onPress callback has been passed', () => {
+    const { getByTestId } = render(
       <SafeAreaProvider>
         <Appbar.Header>
           <Appbar.Content title="Accessible test" />
@@ -155,7 +155,7 @@ describe('renderAppbarContent', () => {
       </SafeAreaProvider>
     );
 
-    expect(getByRole('header')).toBeTruthy();
+    expect(getByTestId('appbar-content-title-text').props.role).toBe('heading');
   });
   it('is recognized as a button when onPress callback has been passed', () => {
     const { getByTestId } = render(
@@ -166,15 +166,11 @@ describe('renderAppbarContent', () => {
       </SafeAreaProvider>
     );
 
-    expect(getByTestId('appbar-content').props.accessibilityRole).toEqual(
-      'button'
-    );
+    expect(getByTestId('appbar-content').props.role).toEqual('button');
     expect(
       getByTestId('appbar-content').props.accessibilityState || {}
     ).not.toMatchObject({ disabled: true });
-    expect(
-      getByTestId('appbar-content-title-text').props.accessibilityRole
-    ).toEqual('none');
+    expect(getByTestId('appbar-content-title-text').props.role).toEqual('none');
   });
   it('is recognized as a disabled button when onPress and disabled is passed', () => {
     const { getByTestId } = render(
@@ -185,15 +181,11 @@ describe('renderAppbarContent', () => {
       </SafeAreaProvider>
     );
 
-    expect(getByTestId('appbar-content').props.accessibilityRole).toEqual(
-      'button'
-    );
+    expect(getByTestId('appbar-content').props.role).toEqual('button');
     expect(
       getByTestId('appbar-content').props.accessibilityState
     ).toMatchObject({ disabled: true });
-    expect(
-      getByTestId('appbar-content-title-text').props.accessibilityRole
-    ).toEqual('none');
+    expect(getByTestId('appbar-content-title-text').props.role).toEqual('none');
   });
 });
 
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 ee96e4a5a4..918e4e17db 100644
--- a/src/components/__tests__/Checkbox/CheckboxItem.test.tsx
+++ b/src/components/__tests__/Checkbox/CheckboxItem.test.tsx
@@ -52,7 +52,7 @@ it('disables the row when the prop disabled is true', () => {
     <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__/DataTable.test.tsx b/src/components/__tests__/DataTable.test.tsx
index 6d6e3a1dcf..b041379172 100644
--- a/src/components/__tests__/DataTable.test.tsx
+++ b/src/components/__tests__/DataTable.test.tsx
@@ -117,7 +117,7 @@ describe('DataTable.Pagination', () => {
   });
 
   it('renders data table pagination without options select', () => {
-    const { queryByLabelText } = render(
+    const { queryByTestId } = render(
       <DataTable.Pagination
         page={3}
         numberOfPages={15}
@@ -127,11 +127,11 @@ describe('DataTable.Pagination', () => {
       />
     );
 
-    expect(queryByLabelText('Options Select')).toBeFalsy();
+    expect(queryByTestId('options-select')).toBeFalsy();
   });
 
   it('renders data table pagination with options select', () => {
-    const { getByLabelText, toJSON } = render(
+    const { getByTestId, toJSON } = render(
       <DataTable.Pagination
         page={3}
         numberOfPages={15}
@@ -145,8 +145,12 @@ describe('DataTable.Pagination', () => {
       />
     );
 
-    expect(getByLabelText('Options Select')).toBeTruthy();
-    expect(getByLabelText('selectPageDropdownLabel')).toBeTruthy();
+    expect(getByTestId('options-select').props['aria-label']).toBe(
+      'Options Select'
+    );
+    expect(getByTestId('select-page-dropdown-label').props['aria-label']).toBe(
+      'selectPageDropdownLabel'
+    );
 
     expect(toJSON()).toMatchSnapshot();
   });
diff --git a/src/components/__tests__/FAB.test.tsx b/src/components/__tests__/FAB.test.tsx
index 38ee6308b6..65e2f6418a 100644
--- a/src/components/__tests__/FAB.test.tsx
+++ b/src/components/__tests__/FAB.test.tsx
@@ -56,10 +56,8 @@ it('renders FAB with containerColor and contentColor overrides', () => {
   expect(tree).toMatchSnapshot();
 });
 
-it('renders FAB with accessibilityLabel', () => {
-  const tree = render(
-    <FAB icon="plus" accessibilityLabel="Add item" />
-  ).toJSON();
+it('renders FAB with aria-label', () => {
+  const tree = render(<FAB icon="plus" aria-label="Add item" />).toJSON();
   expect(tree).toMatchSnapshot();
 });
 
diff --git a/src/components/__tests__/FABExtended.test.tsx b/src/components/__tests__/FABExtended.test.tsx
index e3c1490f65..689b25eb8f 100644
--- a/src/components/__tests__/FABExtended.test.tsx
+++ b/src/components/__tests__/FABExtended.test.tsx
@@ -61,13 +61,13 @@ it('uses label as default accessibilityLabel', () => {
   );
 });
 
-it('respects explicit accessibilityLabel', () => {
+it('respects explicit aria-label', () => {
   const { getByTestId } = render(
     <FAB.Extended
       icon="plus"
       label="New message"
       expanded
-      accessibilityLabel="Create new message"
+      aria-label="Create new message"
       testID="extended-fab"
     />
   );
diff --git a/src/components/__tests__/MenuItem.test.tsx b/src/components/__tests__/MenuItem.test.tsx
index db7b30bc21..d240247bef 100644
--- a/src/components/__tests__/MenuItem.test.tsx
+++ b/src/components/__tests__/MenuItem.test.tsx
@@ -50,13 +50,9 @@ describe('Menu Item', () => {
     );
   });
 
-  it('accepts different values for accessibilityState', () => {
+  it('accepts aria-checked prop', () => {
     const { getByTestId } = render(
-      <Menu.Item
-        accessibilityState={{ checked: true }}
-        title="Option 1"
-        testID="touchable"
-      />
+      <Menu.Item aria-checked={true} title="Option 1" testID="touchable" />
     );
 
     expect(getByTestId('touchable').props.accessibilityState).toMatchObject({
diff --git a/src/components/__tests__/ProgressBar.test.tsx b/src/components/__tests__/ProgressBar.test.tsx
index c3a89c8749..c30edacbfd 100644
--- a/src/components/__tests__/ProgressBar.test.tsx
+++ b/src/components/__tests__/ProgressBar.test.tsx
@@ -22,12 +22,11 @@ const styles = StyleSheet.create({
   },
 });
 
-const a11yRole = 'progressbar';
 const triggerLayout = async (
   tree: ReturnType<typeof render>
 ): Promise<void> => {
   await act(async () => {
-    tree.getByRole(a11yRole).props.onLayout(layoutEvent);
+    tree.getByTestId('progress-bar').props.onLayout(layoutEvent);
   });
 };
 
@@ -49,7 +48,7 @@ it('renders progress bar with animated value', async () => {
 
   tree.update(<AnimatedProgressBar animatedValue={0.4} />);
 
-  expect(tree.getByRole(a11yRole)).toBeTruthy();
+  expect(tree.getByTestId('progress-bar')).toBeTruthy();
 });
 
 it('renders progress bar with specific progress', async () => {
@@ -84,12 +83,17 @@ it('renders progress bar with full height on web', () => {
   Platform.OS = 'web';
   const tree = render(<ProgressBar progress={0.2} />);
 
-  expect(tree.getByRole(a11yRole)).toHaveStyle({
+  expect(tree.getByTestId('progress-bar')).toHaveStyle({
     width: '100%',
     height: '100%',
   });
 });
 
+it('has progressbar role', () => {
+  const tree = render(<ProgressBar progress={0.5} />);
+  expect(tree.getByTestId('progress-bar').props.role).toBe('progressbar');
+});
+
 it('renders progress bar with custom style of filled part', async () => {
   const tree = 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 bdc34ca48a..34925bc0e2 100644
--- a/src/components/__tests__/Switch.test.tsx
+++ b/src/components/__tests__/Switch.test.tsx
@@ -37,31 +37,43 @@ describe('Switch render', () => {
   });
 });
 
+describe('Switch accessibility', () => {
+  it('has switch role', () => {
+    const { getByTestId } = render(<Switch value={false} testID="switch" />);
+    expect(getByTestId('switch').props.role).toBe('switch');
+  });
+});
+
 describe('Switch interaction', () => {
   it('toggles to true when off and pressed', () => {
     const onValueChange = jest.fn();
-    const { getByRole } = render(
-      <Switch value={false} onValueChange={onValueChange} />
+    const { getByTestId } = render(
+      <Switch value={false} onValueChange={onValueChange} testID="switch" />
     );
-    fireEvent.press(getByRole('switch'));
+    fireEvent.press(getByTestId('switch'));
     expect(onValueChange).toHaveBeenCalledWith(true);
   });
 
   it('toggles to false when on and pressed', () => {
     const onValueChange = jest.fn();
-    const { getByRole } = render(
-      <Switch value onValueChange={onValueChange} />
+    const { getByTestId } = render(
+      <Switch value onValueChange={onValueChange} testID="switch" />
     );
-    fireEvent.press(getByRole('switch'));
+    fireEvent.press(getByTestId('switch'));
     expect(onValueChange).toHaveBeenCalledWith(false);
   });
 
   it('does not fire onValueChange when disabled', () => {
     const onValueChange = jest.fn();
-    const { getByRole } = render(
-      <Switch value={false} disabled onValueChange={onValueChange} />
+    const { getByTestId } = render(
+      <Switch
+        value={false}
+        disabled
+        onValueChange={onValueChange}
+        testID="switch"
+      />
     );
-    fireEvent.press(getByRole('switch'));
+    fireEvent.press(getByTestId('switch'));
     expect(onValueChange).not.toHaveBeenCalled();
   });
 });
diff --git a/src/components/__tests__/TextInput.test.tsx b/src/components/__tests__/TextInput.test.tsx
index 14ded21b21..e70513459a 100644
--- a/src/components/__tests__/TextInput.test.tsx
+++ b/src/components/__tests__/TextInput.test.tsx
@@ -27,6 +27,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 getConstantsOriginal = I18nManager.getConstants.bind(I18nManager);
@@ -248,7 +255,7 @@ it('uses polite aria-live on error supporting text', () => {
   );
 
   expect(getByText('Invalid').props['aria-live']).toBe('polite');
-  expect(getByTestId('tf-input').props.accessibilityState?.invalid).toBe(true);
+  expect(getByTestId('tf-input').props['aria-invalid']).toBe(true);
 });
 
 it('marks the input invalid when error is true without supporting text', () => {
@@ -262,7 +269,7 @@ it('marks the input invalid when error is true without supporting text', () => {
     />
   );
 
-  expect(getByTestId('tf-input').props.accessibilityState?.invalid).toBe(true);
+  expect(getByTestId('tf-input').props['aria-invalid']).toBe(true);
   expect(getByTestId('tf-input').props.accessibilityHint).toBeUndefined();
 });
 
@@ -322,7 +329,7 @@ it('marks the input as disabled in accessibilityState when disabled is true', ()
     />
   );
 
-  expect(getByTestId('tf-input').props.accessibilityState?.disabled).toBe(true);
+  expect(getByTestId('tf-input').props['aria-disabled']).toBe(true);
 });
 
 it('renders the input via render with merged props', () => {
@@ -1125,7 +1132,7 @@ it('does not apply the TextInput style prop to prefix or suffix Text', () => {
       onChangeText={() => {}}
       prefix="$"
       suffix="]"
-      style={{ fontSize: 40, letterSpacing: 9 }}
+      style={styles.textInputStyle}
       testID="tf-input-style"
     />
   );
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 7b5d8ad45e..2b93ed436a 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"
@@ -120,7 +120,7 @@ exports[`allows customizing Route's type via generics 1`] = `
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -136,7 +136,6 @@ exports[`allows customizing Route's type via generics 1`] = `
           testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -166,6 +165,7 @@ exports[`allows customizing Route's type via generics 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -407,7 +407,6 @@ exports[`allows customizing Route's type via generics 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -437,6 +436,7 @@ exports[`allows customizing Route's type via generics 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -693,7 +693,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -787,7 +787,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -803,7 +803,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
           testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -833,6 +832,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -1014,7 +1014,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -1044,6 +1043,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -1208,7 +1208,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -1238,6 +1237,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -1434,7 +1434,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -1528,7 +1528,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -1544,7 +1544,6 @@ exports[`hides labels in shifting bottom navigation 1`] = `
           testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -1574,6 +1573,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -1755,7 +1755,6 @@ exports[`hides labels in shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -1785,6 +1784,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -1949,7 +1949,6 @@ exports[`hides labels in shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -1979,6 +1978,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -2175,7 +2175,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -2219,7 +2219,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
       </View>
     </View>
     <View
-      accessibilityElementsHidden={true}
+      aria-hidden={true}
       collapsable={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
@@ -2263,7 +2263,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
       </View>
     </View>
     <View
-      accessibilityElementsHidden={true}
+      aria-hidden={true}
       collapsable={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
@@ -2307,7 +2307,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
       </View>
     </View>
     <View
-      accessibilityElementsHidden={true}
+      aria-hidden={true}
       collapsable={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
@@ -2401,7 +2401,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -2417,7 +2417,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
           testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -2447,6 +2446,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -2748,7 +2748,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -2778,6 +2777,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -3062,7 +3062,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -3092,6 +3091,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -3376,7 +3376,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -3406,6 +3405,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -3690,7 +3690,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -3720,6 +3719,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -4036,7 +4036,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -4130,7 +4130,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -4146,7 +4146,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
           testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -4176,6 +4175,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -4426,7 +4426,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -4456,6 +4455,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -4689,7 +4689,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -4719,6 +4718,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -4952,7 +4952,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -4982,6 +4981,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -5215,7 +5215,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -5245,6 +5244,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -5510,7 +5510,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"
@@ -5604,7 +5604,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -5620,7 +5620,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,
@@ -5650,6 +5649,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -5818,7 +5818,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -5848,6 +5847,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -5999,7 +5999,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -6029,6 +6028,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -6212,7 +6212,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -6306,7 +6306,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -6322,7 +6322,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
           testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -6352,6 +6351,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -6506,7 +6506,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -6536,6 +6535,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -6673,7 +6673,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -6703,6 +6702,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -6840,7 +6840,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -6870,6 +6869,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -7007,7 +7007,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -7037,6 +7036,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -7206,7 +7206,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"
@@ -7300,7 +7300,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={
             [
               {
@@ -7316,7 +7316,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,
@@ -7346,6 +7345,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -7647,7 +7647,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -7677,6 +7676,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -7961,7 +7961,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -7991,6 +7990,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -8307,7 +8307,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"
@@ -8401,7 +8401,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={
             [
               {
@@ -8417,7 +8417,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,
@@ -8447,6 +8446,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -8697,7 +8697,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -8727,6 +8726,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -8960,7 +8960,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -8990,6 +8989,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -9255,7 +9255,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -9349,7 +9349,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -9365,7 +9365,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
           testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -9395,6 +9394,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -9696,7 +9696,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -9726,6 +9725,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -10010,7 +10010,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -10040,6 +10039,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -10356,7 +10356,7 @@ exports[`renders shifting bottom navigation 1`] = `
     }
   >
     <View
-      accessibilityElementsHidden={false}
+      aria-hidden={false}
       collapsable={false}
       importantForAccessibility="auto"
       pointerEvents="auto"
@@ -10450,7 +10450,7 @@ exports[`renders shifting bottom navigation 1`] = `
         testID="bottom-navigation-bar-content"
       >
         <View
-          accessibilityRole="tablist"
+          role="tablist"
           style={
             [
               {
@@ -10466,7 +10466,6 @@ exports[`renders shifting bottom navigation 1`] = `
           testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -10496,6 +10495,7 @@ exports[`renders shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -10746,7 +10746,6 @@ exports[`renders shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -10776,6 +10775,7 @@ exports[`renders shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -11009,7 +11009,6 @@ exports[`renders shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -11039,6 +11038,7 @@ exports[`renders shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -11272,7 +11272,6 @@ exports[`renders shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -11302,6 +11301,7 @@ exports[`renders shifting bottom navigation 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            role="button"
             style={
               [
                 {
@@ -11535,7 +11535,6 @@ exports[`renders shifting bottom navigation 1`] = `
             </View>
           </View>
           <View
-            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -11565,6 +11564,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 48d20d29eb..14ac4610eb 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 ee711c93f8..38b43b91fe 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 9b1babef34..3a95039388 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,