Repository: callstack/react-native-paper
Pull request #410 (2018-06-04 14:30:59)

fix: ref set to null on updates
<!-- Please provide enough information so that others can review your pull request. -->
<!-- Keep pull requests small and focused on a single change. -->

### Motivation

The ref function is called twice on updates (see https://reactjs.org/docs/refs-and-the-dom.html#caveats-with-callback-refs). This behaviour causes the variable `this._manager` sometimes to be null during rendering and in that case actions are pushed to the queue again. Since the queue is only processed once (during componentDidMount), somes changes will never be visible. The simple solution is to bind the ref-function as mentioned in the link above.

### Test plan

Dynamically change `visible` parameter of Modal. The Modal won't be visible on the second time.


callstack-bot: Hey @jaulz, thank you for your pull request 🤗. The documentation from this branch can be viewed [here](https://3231-71323749-gh.circle-artifacts.com/0/docs/index.html).

Patch:
diff --git a/example/App.js b/example/App.js
index 6a26cf47a..dcefa96c6 100644
--- a/example/App.js
+++ b/example/App.js
@@ -49,7 +49,13 @@ class PaperExample extends React.Component<{}, State> {
     return (
       <PaperProvider theme={this.state.theme}>
         <ThemeToggleContext.Provider value={this._toggleTheme}>
-          <App />
+          <App
+            persistenceKey={
+              process.env.NODE_ENV !== 'production'
+                ? 'NavigationStateDEV'
+                : null
+            }
+          />
         </ThemeToggleContext.Provider>
         <KeepAwake />
       </PaperProvider>
diff --git a/example/yarn.lock b/example/yarn.lock
index 0e3ba13f1..8c6d67108 100644
--- a/example/yarn.lock
+++ b/example/yarn.lock
@@ -2120,7 +2120,11 @@ deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
 
-deepmerge@2.1.0, deepmerge@^1.3.0, deepmerge@^1.5.1, deepmerge@^2.1.0:
+deepmerge@^1.3.0, deepmerge@^1.5.1:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
+
+deepmerge@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.1.0.tgz#511a54fff405fc346f0240bb270a3e9533a31102"
 
@@ -3012,7 +3016,7 @@ hoek@4.x.x:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
 
-hoist-non-react-statics@2.5.0, hoist-non-react-statics@^2.2.0, hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0:
+hoist-non-react-statics@^2.2.0, hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40"
 
@@ -4870,7 +4874,7 @@ react-google-maps@^7.3.0:
     scriptjs "2.5.8"
     warning "3.0.0"
 
-react-lifecycles-compat@3.0.4, react-lifecycles-compat@^3, react-lifecycles-compat@^3.0.4:
+react-lifecycles-compat@^3, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
 
diff --git a/package.json b/package.json
index 94388fba2..c69e00334 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-paper",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.4",
   "description": "Material design for React Native",
   "main": "src/index.js",
   "files": [
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..e914a14ce 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
@@ -618,10 +623,10 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
                 ? shifting
                   ? active.interpolate({
                       inputRange: [0, 1],
-                      outputRange: [10, 0],
+                      outputRange: [7, 0],
                     })
                   : 0
-                : 10;
+                : 7;
 
               // We render the active icon and label on top of inactive ones and cross-fade them on change.
               // This trick gives the illusion that we are animating between active and inactive colors.
@@ -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 d096e6981..e4a8ed9a2 100644
--- a/src/components/Chip.js
+++ b/src/components/Chip.js
@@ -6,6 +6,7 @@ import {
   StyleSheet,
   Animated,
   TouchableWithoutFeedback,
+  Platform,
 } from 'react-native';
 import color from 'color';
 import Icon from './Icon';
@@ -46,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.
    */
@@ -122,6 +127,7 @@ class Chip extends React.Component<Props, State> {
       avatar,
       selected,
       disabled,
+      accessibilityLabel,
       onPress,
       onClose,
       style,
@@ -162,12 +168,22 @@ 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={[
           styles.container,
           {
-            elevation: this.state.elevation,
+            elevation: Platform.OS === 'android' ? this.state.elevation : 0,
             backgroundColor: selected
               ? selectedBackgroundColor
               : backgroundColor,
@@ -185,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 ? (
@@ -228,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>
@@ -260,6 +283,7 @@ const styles = StyleSheet.create({
   },
   text: {
     height: 24,
+    lineHeight: 24,
     textAlignVertical: 'center',
     marginVertical: 4,
   },
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/Icon.js b/src/components/Icon.js
index 76010aee8..030a41962 100644
--- a/src/components/Icon.js
+++ b/src/components/Icon.js
@@ -80,6 +80,8 @@ const Icon = ({ source, color, size, ...rest }: Props) => {
         size={size}
         style={styles.icon}
         pointerEvents="none"
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
       />
     );
   } else if (isImageSource(source)) {
@@ -95,6 +97,8 @@ const Icon = ({ source, color, size, ...rest }: Props) => {
             resizeMode: 'contain',
           },
         ]}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
       />
     );
   } else if (typeof source === 'function') {
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/Portal/PortalHost.js b/src/components/Portal/PortalHost.js
index 8b4f4f09b..c0a3140f5 100644
--- a/src/components/Portal/PortalHost.js
+++ b/src/components/Portal/PortalHost.js
@@ -49,6 +49,10 @@ export default class PortalHost extends React.Component<Props> {
     }
   }
 
+  _setManager = (manager: ?Object) => {
+    this._manager = manager;
+  };
+
   _mount = (children: React.Node) => {
     const key = this._nextKey++;
 
@@ -101,11 +105,7 @@ export default class PortalHost extends React.Component<Props> {
         }}
       >
         {this.props.children}
-        <PortalManager
-          ref={c => {
-            this._manager = c;
-          }}
-        />
+        <PortalManager ref={this._setManager} />
       </PortalContext.Provider>
     );
   }
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..64b3cff88 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]}
@@ -123,7 +127,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                 "marginTop": 2,
                 "transform": Array [
                   Object {
-                    "translateY": 10,
+                    "translateY": 7,
                   },
                 ],
                 "width": 24,
@@ -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]}
@@ -247,7 +254,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                 "marginTop": 2,
                 "transform": Array [
                   Object {
-                    "translateY": 10,
+                    "translateY": 7,
                   },
                 ],
                 "width": 24,
@@ -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]}
@@ -371,7 +381,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                 "marginTop": 2,
                 "transform": Array [
                   Object {
-                    "translateY": 10,
+                    "translateY": 7,
                   },
                 ],
                 "width": 24,
@@ -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]}
@@ -613,7 +631,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                 "marginTop": 2,
                 "transform": Array [
                   Object {
-                    "translateY": 10,
+                    "translateY": 7,
                   },
                 ],
                 "width": 24,
@@ -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]}
@@ -737,7 +758,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                 "marginTop": 2,
                 "transform": Array [
                   Object {
-                    "translateY": 10,
+                    "translateY": 7,
                   },
                 ],
                 "width": 24,
@@ -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]}
@@ -861,7 +885,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                 "marginTop": 2,
                 "transform": Array [
                   Object {
-                    "translateY": 10,
+                    "translateY": 7,
                   },
                 ],
                 "width": 24,
@@ -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]}
@@ -1681,7 +1714,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                 "marginTop": 2,
                 "transform": Array [
                   Object {
-                    "translateY": 10,
+                    "translateY": 7,
                   },
                 ],
                 "width": 24,
@@ -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]}
@@ -1789,7 +1821,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                 "marginTop": 2,
                 "transform": Array [
                   Object {
-                    "translateY": 10,
+                    "translateY": 7,
                   },
                 ],
                 "width": 24,
@@ -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]}
@@ -1897,7 +1928,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                 "marginTop": 2,
                 "transform": Array [
                   Object {
-                    "translateY": 10,
+                    "translateY": 7,
                   },
                 ],
                 "width": 24,
@@ -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]}
@@ -2005,7 +2035,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                 "marginTop": 2,
                 "transform": Array [
                   Object {
-                    "translateY": 10,
+                    "translateY": 7,
                   },
                 ],
                 "width": 24,
@@ -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]}
@@ -3241,7 +3292,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                 "marginTop": 2,
                 "transform": Array [
                   Object {
-                    "translateY": 10,
+                    "translateY": 7,
                   },
                 ],
                 "width": 24,
@@ -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]}
@@ -3427,7 +3481,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                 "marginTop": 2,
                 "transform": Array [
                   Object {
-                    "translateY": 10,
+                    "translateY": 7,
                   },
                 ],
                 "width": 24,
@@ -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]}
@@ -4741,7 +4820,7 @@ exports[`renders shifting bottom navigation 1`] = `
                 "marginTop": 2,
                 "transform": Array [
                   Object {
-                    "translateY": 10,
+                    "translateY": 7,
                   },
                 ],
                 "width": 24,
@@ -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]}
@@ -4927,7 +5009,7 @@ exports[`renders shifting bottom navigation 1`] = `
                 "marginTop": 2,
                 "transform": Array [
                   Object {
-                    "translateY": 10,
+                    "translateY": 7,
                   },
                 ],
                 "width": 24,
@@ -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]}
@@ -5113,7 +5198,7 @@ exports[`renders shifting bottom navigation 1`] = `
                 "marginTop": 2,
                 "transform": Array [
                   Object {
-                    "translateY": 10,
+                    "translateY": 7,
                   },
                 ],
                 "width": 24,
@@ -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]}
@@ -5299,7 +5387,7 @@ exports[`renders shifting bottom navigation 1`] = `
                 "marginTop": 2,
                 "transform": Array [
                   Object {
-                    "translateY": 10,
+                    "translateY": 7,
                   },
                 ],
                 "width": 24,
@@ -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 b39013d67..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 [
@@ -95,6 +103,7 @@ exports[`renders chip with icon 1`] = `
             Array [
               Object {
                 "height": 24,
+                "lineHeight": 24,
                 "marginVertical": 4,
                 "textAlignVertical": "center",
               },
@@ -159,6 +168,12 @@ exports[`renders chip with onPress 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits={
+      Array [
+        "button",
+      ]
+    }
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -196,6 +211,7 @@ exports[`renders chip with onPress 1`] = `
             Array [
               Object {
                 "height": 24,
+                "lineHeight": 24,
                 "marginVertical": 4,
                 "textAlignVertical": "center",
               },
@@ -260,6 +276,12 @@ exports[`renders deletable chip 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits={
+      Array [
+        "button",
+      ]
+    }
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -294,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 [
@@ -332,6 +356,7 @@ exports[`renders deletable chip 1`] = `
             Array [
               Object {
                 "height": 24,
+                "lineHeight": 24,
                 "marginVertical": 4,
                 "textAlignVertical": "center",
               },
@@ -396,6 +421,13 @@ exports[`renders outlined disabled chip 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits={
+      Array [
+        "button",
+        "disabled",
+      ]
+    }
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -433,6 +465,7 @@ exports[`renders outlined disabled chip 1`] = `
             Array [
               Object {
                 "height": 24,
+                "lineHeight": 24,
                 "marginVertical": 4,
                 "textAlignVertical": "center",
               },
@@ -497,6 +530,13 @@ exports[`renders selected chip 1`] = `
   }
 >
   <View
+    accessibilityComponentType="button"
+    accessibilityTraits={
+      Array [
+        "button",
+        "selected",
+      ]
+    }
     accessible={true}
     isTVSelectable={true}
     onResponderGrant={[Function]}
@@ -531,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 [
@@ -569,6 +611,7 @@ exports[`renders selected chip 1`] = `
             Array [
               Object {
                 "height": 24,
+                "lineHeight": 24,
                 "marginVertical": 4,
                 "textAlignVertical": "center",
               },
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,