Repository: callstack/react-native-paper
Pull request #411 (2018-06-05 12:04:00)

fix: accessibility improvements


Patch:
diff --git a/src/components/Appbar/AppbarAction.js b/src/components/Appbar/AppbarAction.js
index 0cda2dd9e..3c62b4cf3 100644
--- a/src/components/Appbar/AppbarAction.js
+++ b/src/components/Appbar/AppbarAction.js
@@ -19,6 +19,10 @@ type Props = {
    * Optional icon size.
    */
   size?: number,
+  /*
+   * Accessibility label for the button. This is read by the screen reader when the user taps the button.
+   */
+  accessibilityLabel?: string,
   /**
    * Function to execute on press.
    */
@@ -44,6 +48,7 @@ export default class AppbarAction extends React.Component<Props> {
         .string(),
       icon,
       onPress,
+      accessibilityLabel,
       ...rest
     } = this.props;
 
@@ -52,6 +57,9 @@ export default class AppbarAction extends React.Component<Props> {
         onPress={onPress}
         color={iconColor}
         source={icon}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityTraits="button"
+        accessibilityComponentType="button"
         {...rest}
       />
     );
diff --git a/src/components/Appbar/AppbarBackAction.js b/src/components/Appbar/AppbarBackAction.js
index 9f0fd1f32..a9c0334fc 100644
--- a/src/components/Appbar/AppbarBackAction.js
+++ b/src/components/Appbar/AppbarBackAction.js
@@ -10,6 +10,10 @@ type Props = {
    *  Custom color for back icon.
    */
   color?: string,
+  /*
+   * Accessibility label for the button. This is read by the screen reader when the user taps the button.
+   */
+  accessibilityLabel?: string,
   /**
    * Function to execute on press.
    */
@@ -23,6 +27,10 @@ type Props = {
 class AppbarBackAction extends React.Component<Props> {
   static displayName = 'Appbar.BackAction';
 
+  static defaultProps = {
+    accessibilityLabel: 'Back',
+  };
+
   render() {
     return (
       <AppbarAction
diff --git a/src/components/Appbar/AppbarContent.js b/src/components/Appbar/AppbarContent.js
index 75379852e..d180bd4f2 100644
--- a/src/components/Appbar/AppbarContent.js
+++ b/src/components/Appbar/AppbarContent.js
@@ -74,6 +74,7 @@ class AppbarContent extends React.Component<Props> {
             titleStyle,
           ]}
           numberOfLines={1}
+          accessibilityTraits="header"
         >
           {title}
         </Text>
diff --git a/src/components/BottomNavigation.js b/src/components/BottomNavigation.js
index 21062d291..ebb7e9887 100644
--- a/src/components/BottomNavigation.js
+++ b/src/components/BottomNavigation.js
@@ -29,6 +29,8 @@ type Route = $Shape<{
   title: string,
   icon: IconSource,
   color: string,
+  accessibilityLabel: string,
+  testID: string,
 }>;
 
 type NavigationState<T: Route> = {
@@ -58,6 +60,8 @@ type Props<T> = {
    * - `title`: title of the route to use as the tab label
    * - `icon`: icon to use as the tab icon, can be a string, an image source or a react component
    * - `color`: color to use as background color for shifting bottom navigation
+   * - `accessibilityLabel`: accessibility label for the tab button
+   * - `testID`: test id for the tab button
    *
    * Example:
    *
@@ -142,7 +146,7 @@ type Props<T> = {
   getLabelText?: (props: { route: T }) => string,
   /**
    * Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
-   * Uses `route.accessibilityLabel` if specified, otherwise uses the tab label by default.
+   * Uses `route.accessibilityLabel` by default.
    */
   getAccessibilityLabel?: (props: { route: T }) => ?string,
   /**
@@ -602,6 +606,7 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
               />
             ) : null}
             {routes.map((route, index) => {
+              const focused = navigationState.index === index;
               const active = this.state.tabs[index];
 
               // Scale up in the label
@@ -632,15 +637,6 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
                 outputRange: [1, 0],
               });
 
-              let accessibilityLabel = getAccessibilityLabel({
-                route,
-              });
-
-              accessibilityLabel =
-                typeof accessibilityLabel !== 'undefined'
-                  ? accessibilityLabel
-                  : getLabelText({ route });
-
               return (
                 <Touchable
                   key={route.key}
@@ -648,8 +644,10 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
                   rippleColor={touchColor}
                   onPress={() => this._handleTabPress(index)}
                   testID={getTestID({ route })}
-                  accessibilityLabel={accessibilityLabel}
-                  accessibilityTraits="button"
+                  accessibilityLabel={getAccessibilityLabel({ route })}
+                  accessibilityTraits={
+                    focused ? ['button', 'selected'] : 'button'
+                  }
                   accessibilityComponentType="button"
                   style={styles.item}
                 >
diff --git a/src/components/Button.js b/src/components/Button.js
index 05d7e15e5..4f7f21feb 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -49,7 +49,11 @@ type Props = {
   /**
    * Label text of the button.
    */
-  children: string | Array<string>,
+  children: React.Node,
+  /*
+   * Accessibility label for the button. This is read by the screen reader when the user taps the button.
+   */
+  accessibilityLabel?: string,
   /**
    * Function to execute on press.
    */
@@ -132,6 +136,7 @@ class Button extends React.Component<Props, State> {
       icon,
       color: buttonColor,
       children,
+      accessibilityLabel,
       onPress,
       style,
       theme,
@@ -218,6 +223,9 @@ class Button extends React.Component<Props, State> {
           onPress={onPress}
           onPressIn={this._handlePressIn}
           onPressOut={this._handlePressOut}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
+          accessibilityComponentType="button"
           disabled={disabled}
           rippleColor={rippleColor}
           style={touchableStyle}
diff --git a/src/components/Checkbox.ios.js b/src/components/Checkbox.ios.js
index 1f8d8e8f4..036a49572 100644
--- a/src/components/Checkbox.ios.js
+++ b/src/components/Checkbox.ios.js
@@ -63,6 +63,9 @@ class Checkbox extends React.Component<Props> {
         rippleColor={rippleColor}
         onPress={onPress}
         disabled={disabled}
+        accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
+        accessibilityComponentType="button"
+        accessibilityLiveRegion="polite"
         style={styles.container}
       >
         <View style={{ opacity: checked ? 1 : 0 }}>
diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js
index 34a4fc2e3..54ff6195a 100644
--- a/src/components/Checkbox.js
+++ b/src/components/Checkbox.js
@@ -143,6 +143,9 @@ class Checkbox extends React.Component<Props, State> {
         rippleColor={rippleColor}
         onPress={onPress}
         disabled={disabled}
+        accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
+        accessibilityComponentType="button"
+        accessibilityLiveRegion="polite"
         style={styles.container}
       >
         <Animated.View style={{ transform: [{ scale: this.state.scaleAnim }] }}>
diff --git a/src/components/Chip.js b/src/components/Chip.js
index 76cc8bcba..e4a8ed9a2 100644
--- a/src/components/Chip.js
+++ b/src/components/Chip.js
@@ -47,6 +47,10 @@ type Props = {
    * Whether the chip is disabled. A disabled chip is greyed out and `onPress` is not called on touch.
    */
   disabled?: boolean,
+  /*
+   * Accessibility label for the chip. This is read by the screen reader when the user taps the chip.
+   */
+  accessibilityLabel?: string,
   /**
    * Function to execute on press.
    */
@@ -123,6 +127,7 @@ class Chip extends React.Component<Props, State> {
       avatar,
       selected,
       disabled,
+      accessibilityLabel,
       onPress,
       onClose,
       style,
@@ -163,6 +168,16 @@ class Chip extends React.Component<Props, State> {
       .rgb()
       .string();
 
+    const accessibilityTraits = ['button'];
+
+    if (selected) {
+      accessibilityTraits.push('selected');
+    }
+
+    if (disabled) {
+      accessibilityTraits.push('disabled');
+    }
+
     return (
       <AnimatedSurface
         style={[
@@ -186,6 +201,9 @@ class Chip extends React.Component<Props, State> {
           onPressOut={this._handlePressOut}
           underlayColor={selectedBackgroundColor}
           disabled={disabled}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityTraits={accessibilityTraits}
+          accessibilityComponentType="button"
         >
           <View style={styles.content}>
             {avatar && !icon ? (
@@ -229,7 +247,11 @@ class Chip extends React.Component<Props, State> {
               {children}
             </Text>
             {onClose ? (
-              <TouchableWithoutFeedback onPress={onClose}>
+              <TouchableWithoutFeedback
+                onPress={onClose}
+                accessibilityTraits="button"
+                accessibilityComponentType="button"
+              >
                 <View style={styles.icon}>
                   <Icon source="cancel" size={16} color={iconColor} />
                 </View>
diff --git a/src/components/Dialog/DialogTitle.js b/src/components/Dialog/DialogTitle.js
index a28be12f5..c2e5d6516 100644
--- a/src/components/Dialog/DialogTitle.js
+++ b/src/components/Dialog/DialogTitle.js
@@ -56,8 +56,9 @@ class DialogTitle extends React.Component<Props> {
 
     return (
       <Title
-        {...rest}
+        accessibilityTraits="header"
         style={[styles.text, { color: theme.colors.text }, style]}
+        {...rest}
       >
         {children}
       </Title>
diff --git a/src/components/FAB/FAB.js b/src/components/FAB/FAB.js
index 69e0da7ce..a23219416 100644
--- a/src/components/FAB/FAB.js
+++ b/src/components/FAB/FAB.js
@@ -24,6 +24,11 @@ type Props = {
    * Optional label for extended `FAB`.
    */
   label?: string,
+  /*
+   * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.
+   * Uses `label` by default if specified.
+   */
+  accessibilityLabel?: string,
   /**
    *  Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified.
    */
@@ -74,6 +79,7 @@ class FAB extends React.Component<Props> {
       small,
       icon,
       label,
+      accessibilityLabel = label,
       color: customColor,
       onPress,
       theme,
@@ -108,6 +114,9 @@ class FAB extends React.Component<Props> {
           borderless
           onPress={onPress}
           rippleColor={rippleColor}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityTraits="button"
+          accessibilityComponentType="button"
           style={styles.touchable}
         >
           <View
diff --git a/src/components/FAB/FABGroup.js b/src/components/FAB/FABGroup.js
index 176ffe261..f03784bfb 100644
--- a/src/components/FAB/FABGroup.js
+++ b/src/components/FAB/FABGroup.js
@@ -24,6 +24,7 @@ type Props = {
    * An action item should contain the following properties:
    * - `icon`: icon to display (required)
    * - `label`: optional label text
+   * - `accessibilityLabel`: accessibility label for the action, uses label by default if specified
    * - `color`: custom icon color of the action item
    * - `onPress`: callback that is called when `FAB` is pressed (required)
    */
@@ -31,6 +32,7 @@ type Props = {
     icon: string,
     label?: string,
     color?: string,
+    accessibilityLabel?: string,
     onPress: () => mixed,
   }>,
   /**
@@ -38,6 +40,10 @@ type Props = {
    * You can toggle it based on whether the speed dial is open to display a different icon.
    */
   icon: IconSource,
+  /*
+   * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.
+   */
+  accessibilityLabel?: string,
   /**
    * Custom icon color for the `FAB`.
    */
@@ -171,7 +177,14 @@ class FABGroup extends React.Component<Props, State> {
   _toggle = () => this.props.onStateChange({ open: !this.props.open });
 
   render() {
-    const { actions, icon, open, onPress, theme } = this.props;
+    const {
+      actions,
+      icon,
+      open,
+      onPress,
+      accessibilityLabel,
+      theme,
+    } = this.props;
 
     const labelColor = theme.dark
       ? theme.colors.text
@@ -239,6 +252,13 @@ class FABGroup extends React.Component<Props, State> {
                         it.onPress();
                         this._close();
                       }}
+                      accessibilityLabel={
+                        it.accessibilityLabel !== 'undefined'
+                          ? it.accessibilityLabel
+                          : it.label
+                      }
+                      accessibilityTraits="button"
+                      accessibilityComponentType="button"
                     >
                       <Text style={{ color: labelColor }}>{it.label}</Text>
                     </Card>
@@ -257,6 +277,13 @@ class FABGroup extends React.Component<Props, State> {
                       it.onPress();
                       this._close();
                     }}
+                    accessibilityLabel={
+                      typeof it.accessibilityLabel !== 'undefined'
+                        ? it.accessibilityLabel
+                        : it.label
+                    }
+                    accessibilityTraits="button"
+                    accessibilityComponentType="button"
                   />
                 </View>
               </Animated.View>
@@ -269,6 +296,9 @@ class FABGroup extends React.Component<Props, State> {
             }}
             icon={icon}
             color={this.props.color}
+            accessibilityLabel={accessibilityLabel}
+            accessibilityTraits="button"
+            accessibilityComponentType="button"
             style={styles.fab}
           />
         </View>
diff --git a/src/components/List/ListAccordion.js b/src/components/List/ListAccordion.js
index 214aec0f2..d73e6a349 100644
--- a/src/components/List/ListAccordion.js
+++ b/src/components/List/ListAccordion.js
@@ -92,6 +92,8 @@ class ListAccordion extends React.Component<Props, State> {
         <TouchableRipple
           style={[styles.container, style]}
           onPress={this._handlePress}
+          accessibilityTraits="button"
+          accessibilityComponentType="button"
         >
           <View style={styles.row} pointerEvents="none">
             {icon ? (
diff --git a/src/components/Modal.js b/src/components/Modal.js
index fd36a61c3..fc330298d 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -138,6 +138,8 @@ class Modal extends React.Component<Props, State> {
     return (
       <ThemedPortal>
         <Animated.View
+          accessibilityViewIsModal
+          accessibilityLiveRegion="polite"
           style={[{ opacity: this.state.opacity }, styles.wrapper]}
         >
           <View
diff --git a/src/components/RadioButton.ios.js b/src/components/RadioButton.ios.js
index 5cedb7b93..49ce6431a 100644
--- a/src/components/RadioButton.ios.js
+++ b/src/components/RadioButton.ios.js
@@ -83,6 +83,11 @@ class RadioButton extends React.Component<Props> {
                       onPress && onPress();
                     }
               }
+              accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
+              accessibilityComponentType={
+                checked ? 'radiobutton_checked' : 'radiobutton_unchecked'
+              }
+              accessibilityLiveRegion="polite"
               style={styles.container}
             >
               <View style={{ opacity: checked ? 1 : 0 }}>
diff --git a/src/components/RadioButton.js b/src/components/RadioButton.js
index 4f0bab772..a4e9a7e89 100644
--- a/src/components/RadioButton.js
+++ b/src/components/RadioButton.js
@@ -177,6 +177,11 @@ class RadioButton extends React.Component<Props, State> {
                       onPress && onPress();
                     }
               }
+              accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
+              accessibilityComponentType={
+                checked ? 'radiobutton_checked' : 'radiobutton_unchecked'
+              }
+              accessibilityLiveRegion="polite"
               style={styles.container}
             >
               <Animated.View
diff --git a/src/components/Searchbar.js b/src/components/Searchbar.js
index 7d2cb1631..c9b2d1915 100644
--- a/src/components/Searchbar.js
+++ b/src/components/Searchbar.js
@@ -156,6 +156,7 @@ class Searchbar extends React.Component<Props> {
           selectionColor={colors.primary}
           underlineColorAndroid="transparent"
           returnKeyType="search"
+          accessibilityTraits="search"
           ref={c => {
             this._root = c;
           }}
@@ -169,6 +170,8 @@ class Searchbar extends React.Component<Props> {
             rippleColor={rippleColor}
             onPress={this._handleClearPress}
             source="close"
+            accessibilityTraits="button"
+            accessibilityComponentType="button"
           />
         ) : null}
       </Surface>
diff --git a/src/components/Snackbar.js b/src/components/Snackbar.js
index b8aba9158..f429f1207 100644
--- a/src/components/Snackbar.js
+++ b/src/components/Snackbar.js
@@ -136,8 +136,6 @@ class Snackbar extends React.Component<Props, State> {
     clearTimeout(this._hideTimeout);
   }
 
-  _hideTimeout: TimeoutID;
-
   _toggle = () => {
     if (this.props.visible) {
       this._show();
@@ -168,6 +166,8 @@ class Snackbar extends React.Component<Props, State> {
     }).start();
   };
 
+  _hideTimeout: TimeoutID;
+
   render() {
     const { children, visible, action, onDismiss, theme, style } = this.props;
     const { colors, roundness } = theme;
@@ -176,6 +176,7 @@ class Snackbar extends React.Component<Props, State> {
       <ThemedPortal>
         <SafeAreaView style={styles.wrapper}>
           <Animated.View
+            accessibilityLiveRegion="polite"
             style={{
               opacity: this.state.opacity,
               transform: [


Test patch:
diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
index 53186d87c..c54afd5c2 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
@@ -95,8 +95,12 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
     >
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 0"
-        accessibilityTraits="button"
+        accessibilityTraits={
+          Array [
+            "button",
+            "selected",
+          ]
+        }
         accessible={true}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
@@ -144,9 +148,11 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -182,9 +188,11 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -219,7 +227,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 1"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -268,9 +275,11 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -306,9 +315,11 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -343,7 +354,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 2"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -392,9 +402,11 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -430,9 +442,11 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -585,8 +599,12 @@ exports[`hides labels in shifting bottom navigation 1`] = `
       />
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 0"
-        accessibilityTraits="button"
+        accessibilityTraits={
+          Array [
+            "button",
+            "selected",
+          ]
+        }
         accessible={true}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
@@ -634,9 +652,11 @@ exports[`hides labels in shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -672,9 +692,11 @@ exports[`hides labels in shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -709,7 +731,6 @@ exports[`hides labels in shifting bottom navigation 1`] = `
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 1"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -758,9 +779,11 @@ exports[`hides labels in shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -796,9 +819,11 @@ exports[`hides labels in shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -833,7 +858,6 @@ exports[`hides labels in shifting bottom navigation 1`] = `
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 2"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -882,9 +906,11 @@ exports[`hides labels in shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -920,9 +946,11 @@ exports[`hides labels in shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -1055,8 +1083,12 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
     >
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 0"
-        accessibilityTraits="button"
+        accessibilityTraits={
+          Array [
+            "button",
+            "selected",
+          ]
+        }
         accessible={true}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
@@ -1179,7 +1211,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 1"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -1303,7 +1334,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 2"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -1545,8 +1575,12 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
       />
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 0"
-        accessibilityTraits="button"
+        accessibilityTraits={
+          Array [
+            "button",
+            "selected",
+          ]
+        }
         accessible={true}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
@@ -1653,7 +1687,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 1"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -1761,7 +1794,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 2"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -1869,7 +1901,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 3"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -1977,7 +2008,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 4"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -2183,8 +2213,12 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
     >
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 0"
-        accessibilityTraits="button"
+        accessibilityTraits={
+          Array [
+            "button",
+            "selected",
+          ]
+        }
         accessible={true}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
@@ -2232,9 +2266,11 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -2270,9 +2306,11 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -2425,7 +2463,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 1"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -2474,9 +2511,11 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -2512,9 +2551,11 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -2667,7 +2708,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 2"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -2716,9 +2756,11 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -2754,9 +2796,11 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -3027,8 +3071,12 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
       />
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 0"
-        accessibilityTraits="button"
+        accessibilityTraits={
+          Array [
+            "button",
+            "selected",
+          ]
+        }
         accessible={true}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
@@ -3076,9 +3124,11 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -3114,9 +3164,11 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -3213,7 +3265,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 1"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -3262,9 +3313,11 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -3300,9 +3353,11 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -3399,7 +3454,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 2"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -3448,9 +3502,11 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -3486,9 +3542,11 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -3683,8 +3741,12 @@ exports[`renders non-shifting bottom navigation 1`] = `
     >
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 0"
-        accessibilityTraits="button"
+        accessibilityTraits={
+          Array [
+            "button",
+            "selected",
+          ]
+        }
         accessible={true}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
@@ -3732,9 +3794,11 @@ exports[`renders non-shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -3770,9 +3834,11 @@ exports[`renders non-shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -3925,7 +3991,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 1"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -3974,9 +4039,11 @@ exports[`renders non-shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -4012,9 +4079,11 @@ exports[`renders non-shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -4167,7 +4236,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 2"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -4216,9 +4284,11 @@ exports[`renders non-shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -4254,9 +4324,11 @@ exports[`renders non-shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -4527,8 +4599,12 @@ exports[`renders shifting bottom navigation 1`] = `
       />
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 0"
-        accessibilityTraits="button"
+        accessibilityTraits={
+          Array [
+            "button",
+            "selected",
+          ]
+        }
         accessible={true}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
@@ -4576,9 +4652,11 @@ exports[`renders shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -4614,9 +4692,11 @@ exports[`renders shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -4713,7 +4793,6 @@ exports[`renders shifting bottom navigation 1`] = `
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 1"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -4762,9 +4841,11 @@ exports[`renders shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -4800,9 +4881,11 @@ exports[`renders shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -4899,7 +4982,6 @@ exports[`renders shifting bottom navigation 1`] = `
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 2"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -4948,9 +5030,11 @@ exports[`renders shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -4986,9 +5070,11 @@ exports[`renders shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -5085,7 +5171,6 @@ exports[`renders shifting bottom navigation 1`] = `
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 3"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -5134,9 +5219,11 @@ exports[`renders shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -5172,9 +5259,11 @@ exports[`renders shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -5271,7 +5360,6 @@ exports[`renders shifting bottom navigation 1`] = `
       </View>
       <View
         accessibilityComponentType="button"
-        accessibilityLabel="Route: 4"
         accessibilityTraits="button"
         accessible={true}
         onResponderGrant={[Function]}
@@ -5320,9 +5408,11 @@ exports[`renders shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
@@ -5358,9 +5448,11 @@ exports[`renders shifting bottom navigation 1`] = `
               }
             >
               <Text
+                accessibilityElementsHidden={true}
                 accessible={true}
                 allowFontScaling={false}
                 ellipsizeMode="tail"
+                importantForAccessibility="no-hide-descendants"
                 pointerEvents="none"
                 style={
                   Array [
diff --git a/src/components/__tests__/__snapshots__/Button.test.js.snap b/src/components/__tests__/__snapshots__/Button.test.js.snap
index db16da76d..92958c391 100644
--- a/src/components/__tests__/__snapshots__/Button.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Button.test.js.snap
@@ -24,6 +24,8 @@ exports[`renders button with color 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits="button"
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -130,6 +132,8 @@ exports[`renders button with icon 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits="button"
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -163,9 +167,11 @@ exports[`renders button with icon 1`] = `
         }
       >
         <Text
+          accessibilityElementsHidden={true}
           accessible={true}
           allowFontScaling={false}
           ellipsizeMode="tail"
+          importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
           style={
             Array [
@@ -278,6 +284,8 @@ exports[`renders contained contained with mode 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits="button"
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -384,6 +392,13 @@ exports[`renders disabled button 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits={
+      Array [
+        "button",
+        "disabled",
+      ]
+    }
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -490,6 +505,8 @@ exports[`renders loading button 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits="button"
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -609,6 +626,8 @@ exports[`renders outlined button with mode 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits="button"
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -715,6 +734,8 @@ exports[`renders text button by default 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits="button"
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -821,6 +842,8 @@ exports[`renders text button with mode 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits="button"
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
diff --git a/src/components/__tests__/__snapshots__/Chip.test.js.snap b/src/components/__tests__/__snapshots__/Chip.test.js.snap
index 23d01a16b..dceaa579f 100644
--- a/src/components/__tests__/__snapshots__/Chip.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Chip.test.js.snap
@@ -23,6 +23,12 @@ exports[`renders chip with icon 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits={
+      Array [
+        "button",
+      ]
+    }
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -57,9 +63,11 @@ exports[`renders chip with icon 1`] = `
         }
       >
         <Text
+          accessibilityElementsHidden={true}
           accessible={true}
           allowFontScaling={false}
           ellipsizeMode="tail"
+          importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
           style={
             Array [
@@ -160,6 +168,12 @@ exports[`renders chip with onPress 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits={
+      Array [
+        "button",
+      ]
+    }
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -262,6 +276,12 @@ exports[`renders deletable chip 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits={
+      Array [
+        "button",
+      ]
+    }
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -296,9 +316,11 @@ exports[`renders deletable chip 1`] = `
         }
       >
         <Text
+          accessibilityElementsHidden={true}
           accessible={true}
           allowFontScaling={false}
           ellipsizeMode="tail"
+          importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
           style={
             Array [
@@ -399,6 +421,13 @@ exports[`renders outlined disabled chip 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits={
+      Array [
+        "button",
+        "disabled",
+      ]
+    }
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -501,6 +530,13 @@ exports[`renders selected chip 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits={
+      Array [
+        "button",
+        "selected",
+      ]
+    }
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -535,9 +571,11 @@ exports[`renders selected chip 1`] = `
         }
       >
         <Text
+          accessibilityElementsHidden={true}
           accessible={true}
           allowFontScaling={false}
           ellipsizeMode="tail"
+          importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
           style={
             Array [
diff --git a/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap b/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap
index 3589ee2a9..2b7634b67 100644
--- a/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap
+++ b/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap
@@ -42,9 +42,11 @@ exports[`renders DrawerItem with icon 1`] = `
       }
     >
       <Text
+        accessibilityElementsHidden={true}
         accessible={true}
         allowFontScaling={false}
         ellipsizeMode="tail"
+        importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
         style={
           Array [
@@ -160,9 +162,11 @@ exports[`renders active DrawerItem 1`] = `
       }
     >
       <Text
+        accessibilityElementsHidden={true}
         accessible={true}
         allowFontScaling={false}
         ellipsizeMode="tail"
+        importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
         style={
           Array [
diff --git a/src/components/__tests__/__snapshots__/FAB.test.js.snap b/src/components/__tests__/__snapshots__/FAB.test.js.snap
index 82bd6a54f..61b5bebfd 100644
--- a/src/components/__tests__/__snapshots__/FAB.test.js.snap
+++ b/src/components/__tests__/__snapshots__/FAB.test.js.snap
@@ -28,6 +28,9 @@ exports[`renders extended FAB 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityLabel="Add items"
+    accessibilityTraits="button"
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -90,9 +93,11 @@ exports[`renders extended FAB 1`] = `
           }
         >
           <Text
+            accessibilityElementsHidden={true}
             accessible={true}
             allowFontScaling={false}
             ellipsizeMode="tail"
+            importantForAccessibility="no-hide-descendants"
             pointerEvents="none"
             style={
               Array [
@@ -194,6 +199,8 @@ exports[`renders normal FAB 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits="button"
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -256,9 +263,11 @@ exports[`renders normal FAB 1`] = `
           }
         >
           <Text
+            accessibilityElementsHidden={true}
             accessible={true}
             allowFontScaling={false}
             ellipsizeMode="tail"
+            importantForAccessibility="no-hide-descendants"
             pointerEvents="none"
             style={
               Array [
@@ -314,6 +323,8 @@ exports[`renders small FAB 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits="button"
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -376,9 +387,11 @@ exports[`renders small FAB 1`] = `
           }
         >
           <Text
+            accessibilityElementsHidden={true}
             accessible={true}
             allowFontScaling={false}
             ellipsizeMode="tail"
+            importantForAccessibility="no-hide-descendants"
             pointerEvents="none"
             style={
               Array [
diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
index 04d6f9f15..629b00b3e 100644
--- a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
@@ -3,6 +3,8 @@
 exports[`renders list accordion with children 1`] = `
 <View>
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits="button"
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -42,9 +44,11 @@ exports[`renders list accordion with children 1`] = `
         }
       >
         <Text
+          accessibilityElementsHidden={true}
           accessible={true}
           allowFontScaling={false}
           ellipsizeMode="tail"
+          importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
           style={
             Array [
@@ -137,9 +141,11 @@ exports[`renders list accordion with children 1`] = `
         }
       >
         <Text
+          accessibilityElementsHidden={true}
           accessible={true}
           allowFontScaling={false}
           ellipsizeMode="tail"
+          importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
           style={
             Array [
@@ -169,6 +175,8 @@ exports[`renders list accordion with children 1`] = `
 exports[`renders list accordion with icons 1`] = `
 <View>
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits="button"
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -208,9 +216,11 @@ exports[`renders list accordion with icons 1`] = `
         }
       >
         <Text
+          accessibilityElementsHidden={true}
           accessible={true}
           allowFontScaling={false}
           ellipsizeMode="tail"
+          importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
           style={
             Array [
@@ -303,9 +313,11 @@ exports[`renders list accordion with icons 1`] = `
         }
       >
         <Text
+          accessibilityElementsHidden={true}
           accessible={true}
           allowFontScaling={false}
           ellipsizeMode="tail"
+          importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
           style={
             Array [
@@ -335,6 +347,8 @@ exports[`renders list accordion with icons 1`] = `
 exports[`renders multiline list accordion 1`] = `
 <View>
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits="button"
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -481,9 +495,11 @@ exports[`renders multiline list accordion 1`] = `
         }
       >
         <Text
+          accessibilityElementsHidden={true}
           accessible={true}
           allowFontScaling={false}
           ellipsizeMode="tail"
+          importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
           style={
             Array [
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.js.snap b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
index 152c0160f..d61737b62 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
@@ -288,9 +288,11 @@ exports[`renders list item with avatar and icon 1`] = `
       }
     >
       <Text
+        accessibilityElementsHidden={true}
         accessible={true}
         allowFontScaling={false}
         ellipsizeMode="tail"
+        importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
         style={
           Array [
@@ -357,9 +359,11 @@ exports[`renders list item with icon 1`] = `
       }
     >
       <Text
+        accessibilityElementsHidden={true}
         accessible={true}
         allowFontScaling={false}
         ellipsizeMode="tail"
+        importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
         style={
           Array [
diff --git a/src/components/__tests__/__snapshots__/ListSection.test.js.snap b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
index db69bde4a..417593ef0 100644
--- a/src/components/__tests__/__snapshots__/ListSection.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
@@ -99,9 +99,11 @@ exports[`renders list section with title 1`] = `
         }
       >
         <Text
+          accessibilityElementsHidden={true}
           accessible={true}
           allowFontScaling={false}
           ellipsizeMode="tail"
+          importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
           style={
             Array [
@@ -226,9 +228,11 @@ exports[`renders list section with title 1`] = `
         }
       >
         <Text
+          accessibilityElementsHidden={true}
           accessible={true}
           allowFontScaling={false}
           ellipsizeMode="tail"
+          importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
           style={
             Array [
@@ -367,9 +371,11 @@ exports[`renders list section without title 1`] = `
         }
       >
         <Text
+          accessibilityElementsHidden={true}
           accessible={true}
           allowFontScaling={false}
           ellipsizeMode="tail"
+          importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
           style={
             Array [
@@ -494,9 +500,11 @@ exports[`renders list section without title 1`] = `
         }
       >
         <Text
+          accessibilityElementsHidden={true}
           accessible={true}
           allowFontScaling={false}
           ellipsizeMode="tail"
+          importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
           style={
             Array [
diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
index d4e4857b4..de971a6d4 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
@@ -23,6 +23,7 @@ exports[`renders not visible snackbar with content 1`] = `
     }
   >
     <View
+      accessibilityLiveRegion="polite"
       style={
         Object {
           "opacity": 0,
@@ -131,6 +132,7 @@ exports[`renders snackbar with Text as a child 1`] = `
     }
   >
     <View
+      accessibilityLiveRegion="polite"
       style={
         Object {
           "opacity": 0,
@@ -245,6 +247,7 @@ exports[`renders snackbar with action button 1`] = `
     }
   >
     <View
+      accessibilityLiveRegion="polite"
       style={
         Object {
           "opacity": 0,
@@ -349,6 +352,8 @@ exports[`renders snackbar with action button 1`] = `
           }
         >
           <View
+            accessibilityComponentType="button"
+            accessibilityTraits="button"
             accessible={true}
             isTVSelectable={true}
             onResponderGrant={[Function]}
@@ -460,6 +465,7 @@ exports[`renders snackbar with content 1`] = `
     }
   >
     <View
+      accessibilityLiveRegion="polite"
       style={
         Object {
           "opacity": 0,