chore: upgrade deps

2026-01-12 22:50:35 +08:00 · 2018-11-05 14:47:48 +01:00
parent 37d911118d
commit 5265fb4e52
39 changed files with 4366 additions and 3655 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +0,0 @@
-{
-  "presets": ["react-native"]
-}
--- a/.flowconfig
+++ b/.flowconfig
@@ -2,12 +2,6 @@
 ; We fork some components by platform
 .*/*[.]android.js

-; Ignore templates for 'react-native init'
-.*/local-cli/templates/.*
-
-; Ignore the Dangerfile
-<PROJECT_ROOT>/bots/dangerfile.js
-
 ; Ignore "BUCK" generated dirs
 <PROJECT_ROOT>/\.buckd/

@@ -25,58 +19,64 @@
 ; Ignore metro
 .*/node_modules/metro/.*

-; Ignore duplicate modules under example/
-.*/example/node_modules/fbjs/.*
-.*/example/node_modules/fbemitter/.*
-.*/example/node_modules/react/.*
-.*/example/node_modules/react-native/.*
-.*/example/\.buckd/
-
-; Ignore duplicate modules under docs/
-.*/docs/node_modules/fbjs/.*
-.*/docs/node_modules/react/.*
-
-; Ignore some modules we don't need to parse
-.*/node_modules/prettier/.*
-.*/node_modules/eslint.*
+; Ignore expo stuff
+.*/node_modules/xdl/.*
+.*/node_modules/@expo/traveling-fastlane-linux/.*
+.*/node_modules/@expo/traveling-fastlane-darwin/.*

 [untyped]
-.*/node_modules/metro/.*
-.*/node_modules/expo/.*
-.*/node_modules/react-navigation/.*
-.*/node_modules/react-native-gesture-handler/.*
-.*/node_modules/xdl/.*
+<PROJECT_ROOT>/example/node_modules/react-native

 [include]

 [libs]
 node_modules/react-native/Libraries/react-native/react-native-interface.js
-node_modules/react-native/flow-github
-node_modules/react-native/flow
+node_modules/react-native/flow/
+node_modules/react-native/flow-github/

 [options]
 emoji=true

-module.system=haste
-
-munge_underscores=true
+esproposal.optional_chaining=enable
+esproposal.nullish_coalescing=enable

 module.file_ext=.js
 module.file_ext=.android.js
 module.file_ext=.ios.js

+module.system=haste
+module.system.haste.use_name_reducers=true
+# get basename
+module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1'
+# strip .js or .js.flow suffix
+module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1'
+# strip .ios suffix
+module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1'
+module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1'
+module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
+module.system.haste.paths.blacklist=.*/__tests__/.*
+module.system.haste.paths.blacklist=.*/__mocks__/.*
+module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/Animated/src/polyfills/.*
+module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/Libraries/.*
+
+munge_underscores=true
+
 module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'

+module.file_ext=.js
+module.file_ext=.jsx
+module.file_ext=.json
+module.file_ext=.native.js
+
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState

-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*[react_native_oss|react_native_fb][a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*[react_native_oss|react_native_fb][a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError

 [version]
-^0.67.0
-
+^0.78.0
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+};
--- a/docs/pages/src/Home.js
+++ b/docs/pages/src/Home.js
@@ -42,8 +42,10 @@ export default class Home extends React.Component<{}> {
          </a>
        </div>
        <div {...styles(gallery)}>
-          {// eslint-disable-next-line react/no-array-index-key
-          screenshots.map((image, i) => <img key={i} src={image} alt="" />)}
+          {screenshots.map((image, i) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <img key={i} src={image} alt="" />
+          ))}
        </div>
      </div>
    );
--- a/example/.babelrc
+++ b/example/.babelrc
@@ -1,14 +0,0 @@
-{
-  "presets": [
-    "expo"
-  ],
-  "plugins": [
-    ["module-resolver", {
-      "alias": {
-        "react-native-paper": "../src/index",
-        "react-native-paper/types": "../types",
-        "react-native-vector-icons": "@expo/vector-icons"
-      }
-    }]
-  ]
-}
--- a/example/app.json
+++ b/example/app.json
@@ -5,7 +5,7 @@
      "Example app for React Native Paper: https://callstack.github.io/react-native-paper/",
    "slug": "react-native-paper-example",
    "privacy": "public",
-    "sdkVersion": "30.0.0",
+    "sdkVersion": "31.0.0",
    "version": "1.0.0",
    "orientation": "default",
    "primaryColor": "#cccccc",
@@ -16,7 +16,7 @@
    },
    "packagerOpts": {
      "assetExts": ["ttf"],
-      "config": "./rn-cli.config.js",
+      "config": "./metro.config.js",
      "projectRoots": ""
    }
  }
--- a/example/babel.config.js
+++ b/example/babel.config.js
@@ -0,0 +1,15 @@
+module.exports = {
+  presets: ['expo'],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        alias: {
+          'react-native-paper': '../src/index',
+          'react-native-paper/types': '../types',
+          'react-native-vector-icons': '@expo/vector-icons',
+        },
+      },
+    ],
+  ],
+};
--- a/example/metro.config.js
+++ b/example/metro.config.js
@@ -0,0 +1,28 @@
+// /* eslint-disable import/no-commonjs */
+
+const path = require('path');
+const glob = require('glob-to-regexp');
+const blacklist = require('metro-config/src/defaults/blacklist');
+const pak = require('../package.json');
+
+const dependencies = Object.keys(pak.dependencies);
+
+module.exports = {
+  projectRoot: __dirname,
+  watchFolders: [path.resolve(__dirname, '..')],
+
+  resolver: {
+    blacklistRE: blacklist([
+      glob(`${path.resolve(__dirname, '..')}/node_modules/*`),
+      glob(`${path.resolve(__dirname, '..')}/docs/node_modules/*`),
+    ]),
+
+    providesModuleNodeModules: [
+      'react-native',
+      'react',
+      '@expo/vector-icons',
+      '@babel/runtime',
+      ...dependencies,
+    ],
+  },
+};
--- a/example/package.json
+++ b/example/package.json
@@ -5,31 +5,32 @@
  "author": "",
  "private": true,
  "scripts": {
-    "start": "react-native-scripts start",
-    "android": "react-native-scripts android",
-    "ios": "react-native-scripts ios"
+    "start": "expo start",
+    "android": "expo android",
+    "ios": "expo ios"
  },
-  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
+  "main": "node_modules/expo/AppEntry.js",
  "dependencies": {
-    "@callstack/react-theme-provider": "^1.0.3",
-    "@expo/vector-icons": "^6.3.1",
+    "@callstack/react-theme-provider": "^1.0.7",
+    "@expo/vector-icons": "^8.0.0",
    "color": "^2.0.1",
-    "create-react-context": "^0.2.2",
-    "expo": "^30.0.0",
-    "react": "16.3.1",
+    "create-react-context": "^0.2.3",
+    "expo": "^31.0.3",
+    "react": "16.5.0",
    "react-lifecycles-compat": "^3.0.4",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
-    "react-navigation": "^2.0.4"
+    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",
+    "react-navigation": "^2.18.2"
  },
  "devDependencies": {
    "babel-plugin-module-resolver": "^3.1.1",
-    "babel-preset-expo": "^4.0.0",
-    "glob-to-regexp": "^0.4.0",
-    "react-native-scripts": "1.14.0"
+    "babel-preset-expo": "^5.0.0",
+    "expo-cli": "^2.2.6",
+    "glob-to-regexp": "^0.4.0"
  },
  "resolutions": {
+    "**/create-react-context": "0.2.3",
    "**/hoist-non-react-statics": "2.5.0",
    "**/react-lifecycles-compat": "3.0.4",
-    "**/react": "16.3.1"
+    "**/react": "16.5.0"
  }
 }
--- a/example/rn-cli.config.js
+++ b/example/rn-cli.config.js
@@ -1,23 +0,0 @@
-/* eslint-disable import/no-commonjs */
-
-const path = require('path');
-const glob = require('glob-to-regexp');
-const blacklist = require('metro/src/blacklist');
-const pak = require('../package.json');
-
-const dependencies = Object.keys(pak.dependencies);
-
-module.exports = {
-  getProjectRoots() {
-    return [__dirname, path.resolve(__dirname, '..')];
-  },
-  getProvidesModuleNodeModules() {
-    return ['react-native', 'react', '@expo/vector-icons', ...dependencies];
-  },
-  getBlacklistRE() {
-    return blacklist([
-      glob(`${path.resolve(__dirname, '..')}/node_modules/*`),
-      glob(`${path.resolve(__dirname, '..')}/docs/node_modules/*`),
-    ]);
-  },
-};
--- a/example/src/Dialogs/DialogWithLongText.js
+++ b/example/src/Dialogs/DialogWithLongText.js
@@ -19,11 +19,10 @@ const DialogWithLongText = ({
          <Paragraph>
            Material is the metaphor
            {'\n'}
-            {'\n'}
-            A material metaphor is the unifying theory of a rationalized space
-            and a system of motion. The material is grounded in tactile reality,
-            inspired by the study of paper and ink, yet technologically advanced
-            and open to imagination and magic.
+            {'\n'}A material metaphor is the unifying theory of a rationalized
+            space and a system of motion. The material is grounded in tactile
+            reality, inspired by the study of paper and ink, yet technologically
+            advanced and open to imagination and magic.
            {'\n'}
            {'\n'}
            Surfaces and edges of the material provide visual cues that are
--- a/example/yarn.lock
+++ b/example/yarn.lock
--- a/package.json
+++ b/package.json
@@ -7,9 +7,9 @@
  "files": [
    "src/",
    "dist/",
+    "typings/",
    "types.js",
-    "babel.js",
-    "typings/"
+    "babel.js"
  ],
  "repository": {
    "type": "git",
@@ -31,8 +31,6 @@
    "bootstrap"
  ],
  "scripts": {
-    "commitmsg": "node ./scripts/validate-commit-message.js $GIT_PARAMS",
-    "precommit": "yarn lint && yarn flow && yarn typescript && yarn test",
    "flow": "flow",
    "typescript": "node ./scripts/generate-ts-tests.js && tsc --noEmit --skipLibCheck --jsx react ./__ts-tests__/*",
    "lint": "eslint .",
@@ -41,42 +39,52 @@
    "bootstrap": "yarn && yarn --cwd example && yarn --cwd docs",
    "release": "release-it"
  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "node ./scripts/validate-commit-message.js $HUSKY_GIT_PARAMS",
+      "pre-commit": "yarn lint && yarn flow && yarn typescript && yarn test"
+    }
+  },
  "publishConfig": {
    "registry": "https://registry.npmjs.org/"
  },
  "dependencies": {
-    "@callstack/react-theme-provider": "^1.0.6",
+    "@callstack/react-theme-provider": "^1.0.7",
    "color": "^2.0.1",
-    "create-react-context": "^0.2.2",
-    "hoist-non-react-statics": "^2.5.0",
+    "create-react-context": "^0.2.3",
+    "hoist-non-react-statics": "^3.1.0",
    "react-lifecycles-compat": "^3.0.4"
  },
  "devDependencies": {
-    "@types/react": "^16.4.14",
-    "@types/react-native": "^0.56.23",
+    "@babel/core": "^7.1.2",
+    "@babel/runtime": "^7.1.2",
+    "@types/react": "^16.4.18",
+    "@types/react-native": "^0.57.7",
    "babel-cli": "^6.26.0",
-    "babel-plugin-tester": "^5.0.0",
-    "babel-preset-react-native": "^4.0.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^23.6.0",
+    "babel-plugin-tester": "^5.5.1",
    "chalk": "^2.4.1",
-    "conventional-changelog-cli": "^2.0.5",
+    "conventional-changelog-cli": "^2.0.11",
    "dedent": "^0.7.0",
    "eslint": "^4.19.1",
    "eslint-config-callstack-io": "^1.1.1",
-    "eslint-plugin-prettier": "^2.6.0",
-    "eslint-plugin-react-native": "^3.2.1",
-    "flow-bin": "~0.67.1",
+    "eslint-plugin-prettier": "^3.0.0",
+    "eslint-plugin-react-native": "^3.5.0",
+    "flow-bin": "~0.78.0",
    "glob": "^7.1.3",
-    "husky": "^0.14.3",
-    "jest": "^23.0.0",
-    "prettier": "^1.12.1",
-    "react": "16.3.1",
-    "react-dom": "16.3.1",
-    "react-native": "~0.55.4",
-    "react-native-vector-icons": "~4.6.0",
-    "react-test-renderer": "16.3.1",
-    "release-it": "^7.6.1",
+    "husky": "^1.1.3",
+    "jest": "^23.6.0",
+    "metro-react-native-babel-preset": "^0.49.0",
+    "prettier": "^1.14.3",
+    "react": "16.6.0-alpha.8af6728",
+    "react-dom": "16.6.0-alpha.8af6728",
+    "react-native": "~0.57.4",
+    "react-native-vector-icons": "~6.0.2",
+    "react-test-renderer": "16.6.0-alpha.8af6728",
+    "release-it": "^7.6.2",
    "rimraf": "^2.6.2",
-    "typescript": "^3.0.3"
+    "typescript": "^3.1.6"
  },
  "peerDependencies": {
    "react": "*",
@@ -89,5 +97,8 @@
      "<rootDir>/example/node_modules"
    ]
  },
+  "resolutions": {
+    "**/babel-core": "7.0.0-bridge.0"
+  },
  "sideEffects": false
 }
--- a/src/babel/fixtures/rewrite-imports/code.js
+++ b/src/babel/fixtures/rewrite-imports/code.js
@@ -1,3 +1,5 @@
+/* eslint-disable prettier/prettier */
+
 import { Text } from 'react-native';
 import {
  Provider as PaperProvider,
--- a/src/babel/fixtures/rewrite-imports/output.js
+++ b/src/babel/fixtures/rewrite-imports/output.js
@@ -1,10 +1,11 @@
+/* eslint-disable prettier/prettier */
 import { Text } from 'react-native';
-import PaperProvider from 'react-native-paper/src/core/Provider';
-import BottomNavigation from 'react-native-paper/src/components/BottomNavigation';
-import Button from 'react-native-paper/src/components/Button';
-import FAB from 'react-native-paper/src/components/FAB/FAB';
-import Appbar from 'react-native-paper/src/components/Appbar/Appbar';
-import * as Colors from 'react-native-paper/src/styles/colors';
+import PaperProvider from "react-native-paper/src/core/Provider";
+import BottomNavigation from "react-native-paper/src/components/BottomNavigation";
+import Button from "react-native-paper/src/components/Button";
+import FAB from "react-native-paper/src/components/FAB/FAB";
+import Appbar from "react-native-paper/src/components/Appbar/Appbar";
+import * as Colors from "react-native-paper/src/styles/colors";
 import { NonExistent, NonExistentSecond as Stuff } from 'react-native-paper';
-import { ThemeProvider } from 'react-native-paper/src/core/theming';
-import { withTheme } from 'react-native-paper/src/core/theming';
+import { ThemeProvider } from "react-native-paper/src/core/theming";
+import { withTheme } from "react-native-paper/src/core/theming";
--- a/src/babel/tests/index.js
+++ b/src/babel/tests/index.js
@@ -10,4 +10,8 @@ tester({
  plugin: require('../index'),
  pluginName: 'react-native-paper/babel',
  fixtures: path.join(__dirname, '..', '__fixtures__'),
+  babelOptions: {
+    babelrc: false,
+    configFile: false,
+  },
 });
--- a/src/components/Appbar/AppbarHeader.js
+++ b/src/components/Appbar/AppbarHeader.js
@@ -33,10 +33,10 @@ type Props = {
 const DEFAULT_STATUSBAR_HEIGHT_EXPO =
  global.__expo && global.__expo.Constants
    ? global.__expo.Constants.statusBarHeight
-    : undefined;
+    : 0;
 const DEFAULT_STATUSBAR_HEIGHT = Platform.select({
  android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
-  ios: Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : undefined,
+  ios: Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0,
 });

 /**
@@ -87,15 +87,10 @@ const DEFAULT_STATUSBAR_HEIGHT = Platform.select({
 class AppbarHeader extends React.Component<Props> {
  static displayName = 'Appbar.Header';

-  static defaultProps = {
-    // TODO: handle orientation changes
-    statusBarHeight: DEFAULT_STATUSBAR_HEIGHT,
-  };
-
  render() {
    const {
      // Don't use default props since we check it to know whether we should use SafeAreaView
-      statusBarHeight = 0,
+      statusBarHeight = DEFAULT_STATUSBAR_HEIGHT,
      style,
      ...rest
    } = this.props;
@@ -106,8 +101,7 @@ class AppbarHeader extends React.Component<Props> {
      elevation = 4,
      backgroundColor = colors.primary,
      ...restStyle
-    } =
-      StyleSheet.flatten(style) || {};
+    } = StyleSheet.flatten(style) || {};

    // Let the user override the behaviour
    const Wrapper =
--- a/src/components/BottomNavigation.js
+++ b/src/components/BottomNavigation.js
@@ -231,7 +231,7 @@ const FAR_FAR_AWAY = 9999;
 const Touchable =
  Platform.OS === 'android'
    ? TouchableRipple
-    : ({ style, children, ...rest }) => (
+    : ({ style, children, borderless, rippleColor, ...rest }) => (
        <TouchableWithoutFeedback {...rest}>
          <View style={style}>{children}</View>
        </TouchableWithoutFeedback>
--- a/src/components/Chip.js
+++ b/src/components/Chip.js
@@ -141,8 +141,7 @@ class Chip extends React.Component<Props, State> {
        : dark
          ? '#383838'
          : '#ebebeb',
-    } =
-      StyleSheet.flatten(style) || {};
+    } = StyleSheet.flatten(style) || {};

    const borderColor =
      mode === 'outlined'
--- a/src/components/FAB/FABGroup.js
+++ b/src/components/FAB/FABGroup.js
@@ -241,7 +241,7 @@ class FABGroup extends React.Component<Props, State> {
        <View pointerEvents={open ? 'box-none' : 'none'}>
          {actions.map((it, i) => (
            <Animated.View
-                key={i} //eslint-disable-line
+              key={i} // eslint-disable-line react/no-array-index-key
              style={[
                {
                  opacity: opacities[i],
--- a/src/components/ProgressBar/ProgressBar.js
+++ b/src/components/ProgressBar/ProgressBar.js
@@ -53,11 +53,8 @@ class ProgressBar extends React.Component<Props> {

    return (
      <ProgressBarComponent
-        styleAttr="Horizontal"
-        indeterminate={false}
        progress={progress}
        progressTintColor={tintColor}
-        color={tintColor}
        style={[styles.progressBarHeight, style]}
        trackTintColor={trackTintColor}
      />
--- a/src/components/ProgressBar/ProgressBarComponent.android.js
+++ b/src/components/ProgressBar/ProgressBarComponent.android.js
@@ -1,3 +1,18 @@
 /* @flow */

-export { ProgressBarAndroid as default } from 'react-native';
+import * as React from 'react';
+import { ProgressBarAndroid } from 'react-native';
+
+export default function BaseProgressBarAndroid({
+  progressTintColor,
+  ...rest
+}: *) {
+  return (
+    <ProgressBarAndroid
+      {...rest}
+      styleAttr="Horizontal"
+      indeterminate={false}
+      color={progressTintColor}
+    />
+  );
+}
--- a/src/components/Switch.js
+++ b/src/components/Switch.js
@@ -7,7 +7,7 @@ import setColor from 'color';
 import { withTheme } from '../core/theming';
 import type { Theme } from '../types';

-type Props = {
+type Props = React.ElementProps<NativeSwitch> & {
  /**
   * Disable toggling the switch.
   */
--- a/src/components/TextInput.js
+++ b/src/components/TextInput.js
@@ -40,7 +40,7 @@ type RenderProps = {
  value?: string,
 };

-type Props = {
+type Props = React.ElementProps<NativeTextInput> & {
  /**
   * Mode of the TextInput.
   * - `flat` - flat input with an underline.
--- a/src/components/tests/Typography/snapshots/Caption.test.js.snap
+++ b/src/components/tests/Typography/snapshots/Caption.test.js.snap
@@ -2,9 +2,6 @@

 exports[`renders caption applying style 1`] = `
 <Text
-  accessible={true}
-  allowFontScaling={true}
-  ellipsizeMode="tail"
  style={
    Array [
      Object {
@@ -75,9 +72,6 @@ exports[`renders caption applying style 1`] = `

 exports[`renders caption with children as content 1`] = `
 <Text
-  accessible={true}
-  allowFontScaling={true}
-  ellipsizeMode="tail"
  style={
    Array [
      Object {
--- a/src/components/tests/snapshots/Banner.test.js.snap
+++ b/src/components/tests/snapshots/Banner.test.js.snap
@@ -51,9 +51,6 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
      }
    >
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        style={
          Array [
            Object {
@@ -169,9 +166,6 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
        />
      </View>
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        style={
          Array [
            Object {
@@ -244,8 +238,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
        }
      >
        <View
-          accessibilityComponentType="button"
-          accessibilityTraits="button"
+          accessibilityRole="button"
          accessible={true}
          isTVSelectable={true}
          onResponderGrant={[Function]}
@@ -270,9 +263,6 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
            }
          >
            <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
              numberOfLines={1}
              style={
                Array [
@@ -376,9 +366,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
      }
    >
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        style={
          Array [
            Object {
@@ -451,8 +438,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
        }
      >
        <View
-          accessibilityComponentType="button"
-          accessibilityTraits="button"
+          accessibilityRole="button"
          accessible={true}
          isTVSelectable={true}
          onResponderGrant={[Function]}
@@ -477,9 +463,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
            }
          >
            <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
              numberOfLines={1}
              style={
                Array [
@@ -560,8 +543,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
        }
      >
        <View
-          accessibilityComponentType="button"
-          accessibilityTraits="button"
+          accessibilityRole="button"
          accessible={true}
          isTVSelectable={true}
          onResponderGrant={[Function]}
@@ -586,9 +568,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
            }
          >
            <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
              numberOfLines={1}
              style={
                Array [
@@ -713,9 +692,6 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
        />
      </View>
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        style={
          Array [
            Object {
@@ -810,9 +786,6 @@ exports[`renders visible banner, without action buttons and without image 1`] =
      }
    >
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        style={
          Array [
            Object {
--- a/src/components/tests/snapshots/BottomNavigation.test.js.snap
+++ b/src/components/tests/snapshots/BottomNavigation.test.js.snap
--- a/src/components/tests/snapshots/Button.test.js.snap
+++ b/src/components/tests/snapshots/Button.test.js.snap
@@ -22,8 +22,7 @@ exports[`renders button with color 1`] = `
  }
 >
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits="button"
+    accessibilityRole="button"
    accessible={true}
    isTVSelectable={true}
    onResponderGrant={[Function]}
@@ -48,9 +47,6 @@ exports[`renders button with color 1`] = `
      }
    >
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
@@ -131,8 +127,7 @@ exports[`renders button with icon 1`] = `
  }
 >
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits="button"
+    accessibilityRole="button"
    accessible={true}
    isTVSelectable={true}
    onResponderGrant={[Function]}
@@ -167,9 +162,7 @@ exports[`renders button with icon 1`] = `
      >
        <Text
          accessibilityElementsHidden={true}
-          accessible={true}
          allowFontScaling={false}
-          ellipsizeMode="tail"
          importantForAccessibility="no-hide-descendants"
          pointerEvents="none"
          style={
@@ -195,6 +188,7 @@ exports[`renders button with icon 1`] = `
                "fontStyle": "normal",
                "fontWeight": "normal",
              },
+              Object {},
            ]
          }
        >
@@ -202,9 +196,6 @@ exports[`renders button with icon 1`] = `
        </Text>
      </View>
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
@@ -285,8 +276,7 @@ exports[`renders contained contained with mode 1`] = `
  }
 >
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits="button"
+    accessibilityRole="button"
    accessible={true}
    isTVSelectable={true}
    onResponderGrant={[Function]}
@@ -311,9 +301,6 @@ exports[`renders contained contained with mode 1`] = `
      }
    >
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
@@ -387,10 +374,9 @@ exports[`renders disabled button 1`] = `
  }
 >
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits={
+    accessibilityRole="button"
+    accessibilityStates={
      Array [
-        "button",
        "disabled",
      ]
    }
@@ -418,9 +404,6 @@ exports[`renders disabled button 1`] = `
      }
    >
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
@@ -501,8 +484,7 @@ exports[`renders loading button 1`] = `
  }
 >
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits="button"
+    accessibilityRole="button"
    accessible={true}
    isTVSelectable={true}
    onResponderGrant={[Function]}
@@ -540,9 +522,6 @@ exports[`renders loading button 1`] = `
        }
      />
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
@@ -623,8 +602,7 @@ exports[`renders outlined button with mode 1`] = `
  }
 >
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits="button"
+    accessibilityRole="button"
    accessible={true}
    isTVSelectable={true}
    onResponderGrant={[Function]}
@@ -649,9 +627,6 @@ exports[`renders outlined button with mode 1`] = `
      }
    >
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
@@ -732,8 +707,7 @@ exports[`renders text button by default 1`] = `
  }
 >
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits="button"
+    accessibilityRole="button"
    accessible={true}
    isTVSelectable={true}
    onResponderGrant={[Function]}
@@ -758,9 +732,6 @@ exports[`renders text button by default 1`] = `
      }
    >
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
@@ -841,8 +812,7 @@ exports[`renders text button with mode 1`] = `
  }
 >
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits="button"
+    accessibilityRole="button"
    accessible={true}
    isTVSelectable={true}
    onResponderGrant={[Function]}
@@ -867,9 +837,6 @@ exports[`renders text button with mode 1`] = `
      }
    >
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
--- a/src/components/tests/snapshots/Checkbox.test.js.snap
+++ b/src/components/tests/snapshots/Checkbox.test.js.snap
@@ -2,8 +2,7 @@

 exports[`renders checked Checkbox with color 1`] = `
 <View
-  accessibilityComponentType="button"
-  accessibilityTraits="button"
+  accessibilityRole="button"
  accessible={true}
  isTVSelectable={true}
  onResponderGrant={[Function]}
@@ -28,9 +27,7 @@ exports[`renders checked Checkbox with color 1`] = `
  >
    <Text
      accessibilityElementsHidden={true}
-      accessible={true}
      allowFontScaling={false}
-      ellipsizeMode="tail"
      importantForAccessibility="no-hide-descendants"
      pointerEvents="none"
      style={
@@ -56,6 +53,7 @@ exports[`renders checked Checkbox with color 1`] = `
            "fontStyle": "normal",
            "fontWeight": "normal",
          },
+          Object {},
        ]
      }
    >
@@ -67,8 +65,7 @@ exports[`renders checked Checkbox with color 1`] = `

 exports[`renders checked Checkbox with onPress 1`] = `
 <View
-  accessibilityComponentType="button"
-  accessibilityTraits="button"
+  accessibilityRole="button"
  accessible={true}
  isTVSelectable={true}
  onResponderGrant={[Function]}
@@ -93,9 +90,7 @@ exports[`renders checked Checkbox with onPress 1`] = `
  >
    <Text
      accessibilityElementsHidden={true}
-      accessible={true}
      allowFontScaling={false}
-      ellipsizeMode="tail"
      importantForAccessibility="no-hide-descendants"
      pointerEvents="none"
      style={
@@ -121,6 +116,7 @@ exports[`renders checked Checkbox with onPress 1`] = `
            "fontStyle": "normal",
            "fontWeight": "normal",
          },
+          Object {},
        ]
      }
    >
@@ -132,8 +128,7 @@ exports[`renders checked Checkbox with onPress 1`] = `

 exports[`renders indeterminate Checkbox 1`] = `
 <View
-  accessibilityComponentType="button"
-  accessibilityTraits="button"
+  accessibilityRole="button"
  accessible={true}
  isTVSelectable={true}
  onResponderGrant={[Function]}
@@ -158,9 +153,7 @@ exports[`renders indeterminate Checkbox 1`] = `
  >
    <Text
      accessibilityElementsHidden={true}
-      accessible={true}
      allowFontScaling={false}
-      ellipsizeMode="tail"
      importantForAccessibility="no-hide-descendants"
      pointerEvents="none"
      style={
@@ -186,6 +179,7 @@ exports[`renders indeterminate Checkbox 1`] = `
            "fontStyle": "normal",
            "fontWeight": "normal",
          },
+          Object {},
        ]
      }
    >
@@ -197,8 +191,7 @@ exports[`renders indeterminate Checkbox 1`] = `

 exports[`renders indeterminate Checkbox with color 1`] = `
 <View
-  accessibilityComponentType="button"
-  accessibilityTraits="button"
+  accessibilityRole="button"
  accessible={true}
  isTVSelectable={true}
  onResponderGrant={[Function]}
@@ -223,9 +216,7 @@ exports[`renders indeterminate Checkbox with color 1`] = `
  >
    <Text
      accessibilityElementsHidden={true}
-      accessible={true}
      allowFontScaling={false}
-      ellipsizeMode="tail"
      importantForAccessibility="no-hide-descendants"
      pointerEvents="none"
      style={
@@ -251,6 +242,7 @@ exports[`renders indeterminate Checkbox with color 1`] = `
            "fontStyle": "normal",
            "fontWeight": "normal",
          },
+          Object {},
        ]
      }
    >
@@ -262,8 +254,7 @@ exports[`renders indeterminate Checkbox with color 1`] = `

 exports[`renders unchecked Checkbox with color 1`] = `
 <View
-  accessibilityComponentType="button"
-  accessibilityTraits="button"
+  accessibilityRole="button"
  accessible={true}
  isTVSelectable={true}
  onResponderGrant={[Function]}
@@ -288,9 +279,7 @@ exports[`renders unchecked Checkbox with color 1`] = `
  >
    <Text
      accessibilityElementsHidden={true}
-      accessible={true}
      allowFontScaling={false}
-      ellipsizeMode="tail"
      importantForAccessibility="no-hide-descendants"
      pointerEvents="none"
      style={
@@ -316,6 +305,7 @@ exports[`renders unchecked Checkbox with color 1`] = `
            "fontStyle": "normal",
            "fontWeight": "normal",
          },
+          Object {},
        ]
      }
    >
@@ -327,8 +317,7 @@ exports[`renders unchecked Checkbox with color 1`] = `

 exports[`renders unchecked Checkbox with onPress 1`] = `
 <View
-  accessibilityComponentType="button"
-  accessibilityTraits="button"
+  accessibilityRole="button"
  accessible={true}
  isTVSelectable={true}
  onResponderGrant={[Function]}
@@ -353,9 +342,7 @@ exports[`renders unchecked Checkbox with onPress 1`] = `
  >
    <Text
      accessibilityElementsHidden={true}
-      accessible={true}
      allowFontScaling={false}
-      ellipsizeMode="tail"
      importantForAccessibility="no-hide-descendants"
      pointerEvents="none"
      style={
@@ -381,6 +368,7 @@ exports[`renders unchecked Checkbox with onPress 1`] = `
            "fontStyle": "normal",
            "fontWeight": "normal",
          },
+          Object {},
        ]
      }
    >
--- a/src/components/tests/snapshots/Chip.test.js.snap
+++ b/src/components/tests/snapshots/Chip.test.js.snap
@@ -14,12 +14,8 @@ exports[`renders chip with icon 1`] = `
  }
 >
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits={
-      Array [
-        "button",
-      ]
-    }
+    accessibilityRole="button"
+    accessibilityStates={Array []}
    accessible={true}
    isTVSelectable={true}
    onResponderGrant={[Function]}
@@ -55,9 +51,7 @@ exports[`renders chip with icon 1`] = `
      >
        <Text
          accessibilityElementsHidden={true}
-          accessible={true}
          allowFontScaling={false}
-          ellipsizeMode="tail"
          importantForAccessibility="no-hide-descendants"
          pointerEvents="none"
          style={
@@ -83,6 +77,7 @@ exports[`renders chip with icon 1`] = `
                "fontStyle": "normal",
                "fontWeight": "normal",
              },
+              Object {},
            ]
          }
        >
@@ -90,9 +85,6 @@ exports[`renders chip with icon 1`] = `
        </Text>
      </View>
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
@@ -162,12 +154,8 @@ exports[`renders chip with onPress 1`] = `
  }
 >
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits={
-      Array [
-        "button",
-      ]
-    }
+    accessibilityRole="button"
+    accessibilityStates={Array []}
    accessible={true}
    isTVSelectable={true}
    onResponderGrant={[Function]}
@@ -192,9 +180,6 @@ exports[`renders chip with onPress 1`] = `
      }
    >
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
@@ -264,12 +249,8 @@ exports[`renders deletable chip 1`] = `
  }
 >
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits={
-      Array [
-        "button",
-      ]
-    }
+    accessibilityRole="button"
+    accessibilityStates={Array []}
    accessible={true}
    isTVSelectable={true}
    onResponderGrant={[Function]}
@@ -305,9 +286,7 @@ exports[`renders deletable chip 1`] = `
      >
        <Text
          accessibilityElementsHidden={true}
-          accessible={true}
          allowFontScaling={false}
-          ellipsizeMode="tail"
          importantForAccessibility="no-hide-descendants"
          pointerEvents="none"
          style={
@@ -333,6 +312,7 @@ exports[`renders deletable chip 1`] = `
                "fontStyle": "normal",
                "fontWeight": "normal",
              },
+              Object {},
            ]
          }
        >
@@ -340,9 +320,6 @@ exports[`renders deletable chip 1`] = `
        </Text>
      </View>
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
@@ -412,10 +389,9 @@ exports[`renders outlined disabled chip 1`] = `
  }
 >
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits={
+    accessibilityRole="button"
+    accessibilityStates={
      Array [
-        "button",
        "disabled",
      ]
    }
@@ -443,9 +419,6 @@ exports[`renders outlined disabled chip 1`] = `
      }
    >
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
@@ -515,10 +488,9 @@ exports[`renders selected chip 1`] = `
  }
 >
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits={
+    accessibilityRole="button"
+    accessibilityStates={
      Array [
-        "button",
        "selected",
      ]
    }
@@ -557,9 +529,7 @@ exports[`renders selected chip 1`] = `
      >
        <Text
          accessibilityElementsHidden={true}
-          accessible={true}
          allowFontScaling={false}
-          ellipsizeMode="tail"
          importantForAccessibility="no-hide-descendants"
          pointerEvents="none"
          style={
@@ -585,6 +555,7 @@ exports[`renders selected chip 1`] = `
                "fontStyle": "normal",
                "fontWeight": "normal",
              },
+              Object {},
            ]
          }
        >
@@ -592,9 +563,6 @@ exports[`renders selected chip 1`] = `
        </Text>
      </View>
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
--- a/src/components/tests/snapshots/DrawerItem.test.js.snap
+++ b/src/components/tests/snapshots/DrawerItem.test.js.snap
@@ -17,8 +17,7 @@ exports[`renders DrawerItem with icon 1`] = `
  }
 >
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits="button"
+    accessibilityRole="button"
    accessible={true}
    isTVSelectable={true}
    onResponderGrant={[Function]}
@@ -44,9 +43,7 @@ exports[`renders DrawerItem with icon 1`] = `
    >
      <Text
        accessibilityElementsHidden={true}
-        accessible={true}
        allowFontScaling={false}
-        ellipsizeMode="tail"
        importantForAccessibility="no-hide-descendants"
        pointerEvents="none"
        style={
@@ -72,15 +69,13 @@ exports[`renders DrawerItem with icon 1`] = `
              "fontStyle": "normal",
              "fontWeight": "normal",
            },
+            Object {},
          ]
        }
      >
        
      </Text>
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
@@ -150,10 +145,9 @@ exports[`renders active DrawerItem 1`] = `
  }
 >
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits={
+    accessibilityRole="button"
+    accessibilityStates={
      Array [
-        "button",
        "selected",
      ]
    }
@@ -182,9 +176,7 @@ exports[`renders active DrawerItem 1`] = `
    >
      <Text
        accessibilityElementsHidden={true}
-        accessible={true}
        allowFontScaling={false}
-        ellipsizeMode="tail"
        importantForAccessibility="no-hide-descendants"
        pointerEvents="none"
        style={
@@ -210,15 +202,13 @@ exports[`renders active DrawerItem 1`] = `
              "fontStyle": "normal",
              "fontWeight": "normal",
            },
+            Object {},
          ]
        }
      >
        
      </Text>
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
@@ -288,8 +278,7 @@ exports[`renders basic DrawerItem 1`] = `
  }
 >
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits="button"
+    accessibilityRole="button"
    accessible={true}
    isTVSelectable={true}
    onResponderGrant={[Function]}
@@ -314,9 +303,6 @@ exports[`renders basic DrawerItem 1`] = `
      }
    >
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
--- a/src/components/tests/snapshots/FAB.test.js.snap
+++ b/src/components/tests/snapshots/FAB.test.js.snap
@@ -18,9 +18,8 @@ exports[`renders extended FAB 1`] = `
  }
 >
  <View
-    accessibilityComponentType="button"
    accessibilityLabel="Add items"
-    accessibilityTraits="button"
+    accessibilityRole="button"
    accessible={true}
    isTVSelectable={true}
    onResponderGrant={[Function]}
@@ -84,9 +83,7 @@ exports[`renders extended FAB 1`] = `
        >
          <Text
            accessibilityElementsHidden={true}
-            accessible={true}
            allowFontScaling={false}
-            ellipsizeMode="tail"
            importantForAccessibility="no-hide-descendants"
            pointerEvents="none"
            style={
@@ -112,6 +109,7 @@ exports[`renders extended FAB 1`] = `
                  "fontStyle": "normal",
                  "fontWeight": "normal",
                },
+                Object {},
              ]
            }
          >
@@ -120,9 +118,6 @@ exports[`renders extended FAB 1`] = `
        </View>
      </View>
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        style={
          Array [
            Object {
@@ -191,8 +186,7 @@ exports[`renders normal FAB 1`] = `
  }
 >
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits="button"
+    accessibilityRole="button"
    accessible={true}
    isTVSelectable={true}
    onResponderGrant={[Function]}
@@ -256,9 +250,7 @@ exports[`renders normal FAB 1`] = `
        >
          <Text
            accessibilityElementsHidden={true}
-            accessible={true}
            allowFontScaling={false}
-            ellipsizeMode="tail"
            importantForAccessibility="no-hide-descendants"
            pointerEvents="none"
            style={
@@ -284,6 +276,7 @@ exports[`renders normal FAB 1`] = `
                  "fontStyle": "normal",
                  "fontWeight": "normal",
                },
+                Object {},
              ]
            }
          >
@@ -314,8 +307,7 @@ exports[`renders small FAB 1`] = `
  }
 >
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits="button"
+    accessibilityRole="button"
    accessible={true}
    isTVSelectable={true}
    onResponderGrant={[Function]}
@@ -379,9 +371,7 @@ exports[`renders small FAB 1`] = `
        >
          <Text
            accessibilityElementsHidden={true}
-            accessible={true}
            allowFontScaling={false}
-            ellipsizeMode="tail"
            importantForAccessibility="no-hide-descendants"
            pointerEvents="none"
            style={
@@ -407,6 +397,7 @@ exports[`renders small FAB 1`] = `
                  "fontStyle": "normal",
                  "fontWeight": "normal",
                },
+                Object {},
              ]
            }
          >
--- a/src/components/tests/snapshots/IconButton.test.js.snap
+++ b/src/components/tests/snapshots/IconButton.test.js.snap
@@ -2,10 +2,9 @@

 exports[`renders disabled icon button 1`] = `
 <View
-  accessibilityComponentType="button"
-  accessibilityTraits={
+  accessibilityRole="button"
+  accessibilityStates={
    Array [
-      "button",
      "disabled",
    ]
  }
@@ -47,9 +46,7 @@ exports[`renders disabled icon button 1`] = `
  >
    <Text
      accessibilityElementsHidden={true}
-      accessible={true}
      allowFontScaling={false}
-      ellipsizeMode="tail"
      importantForAccessibility="no-hide-descendants"
      pointerEvents="none"
      style={
@@ -75,6 +72,7 @@ exports[`renders disabled icon button 1`] = `
            "fontStyle": "normal",
            "fontWeight": "normal",
          },
+          Object {},
        ]
      }
    >
@@ -86,8 +84,7 @@ exports[`renders disabled icon button 1`] = `

 exports[`renders icon button by default 1`] = `
 <View
-  accessibilityComponentType="button"
-  accessibilityTraits="button"
+  accessibilityRole="button"
  accessible={true}
  hitSlop={
    Object {
@@ -124,9 +121,7 @@ exports[`renders icon button by default 1`] = `
  >
    <Text
      accessibilityElementsHidden={true}
-      accessible={true}
      allowFontScaling={false}
-      ellipsizeMode="tail"
      importantForAccessibility="no-hide-descendants"
      pointerEvents="none"
      style={
@@ -152,6 +147,7 @@ exports[`renders icon button by default 1`] = `
            "fontStyle": "normal",
            "fontWeight": "normal",
          },
+          Object {},
        ]
      }
    >
@@ -163,8 +159,7 @@ exports[`renders icon button by default 1`] = `

 exports[`renders icon button with color 1`] = `
 <View
-  accessibilityComponentType="button"
-  accessibilityTraits="button"
+  accessibilityRole="button"
  accessible={true}
  hitSlop={
    Object {
@@ -201,9 +196,7 @@ exports[`renders icon button with color 1`] = `
  >
    <Text
      accessibilityElementsHidden={true}
-      accessible={true}
      allowFontScaling={false}
-      ellipsizeMode="tail"
      importantForAccessibility="no-hide-descendants"
      pointerEvents="none"
      style={
@@ -229,6 +222,7 @@ exports[`renders icon button with color 1`] = `
            "fontStyle": "normal",
            "fontWeight": "normal",
          },
+          Object {},
        ]
      }
    >
@@ -240,8 +234,7 @@ exports[`renders icon button with color 1`] = `

 exports[`renders icon button with size 1`] = `
 <View
-  accessibilityComponentType="button"
-  accessibilityTraits="button"
+  accessibilityRole="button"
  accessible={true}
  hitSlop={
    Object {
@@ -278,9 +271,7 @@ exports[`renders icon button with size 1`] = `
  >
    <Text
      accessibilityElementsHidden={true}
-      accessible={true}
      allowFontScaling={false}
-      ellipsizeMode="tail"
      importantForAccessibility="no-hide-descendants"
      pointerEvents="none"
      style={
@@ -306,6 +297,7 @@ exports[`renders icon button with size 1`] = `
            "fontStyle": "normal",
            "fontWeight": "normal",
          },
+          Object {},
        ]
      }
    >
--- a/src/components/tests/snapshots/ListAccordion.test.js.snap
+++ b/src/components/tests/snapshots/ListAccordion.test.js.snap
@@ -3,8 +3,7 @@
 exports[`renders list accordion with children 1`] = `
 <View>
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits="button"
+    accessibilityRole="button"
    accessible={true}
    isTVSelectable={true}
    onResponderGrant={[Function]}
@@ -47,9 +46,7 @@ exports[`renders list accordion with children 1`] = `
      >
        <Text
          accessibilityElementsHidden={true}
-          accessible={true}
          allowFontScaling={false}
-          ellipsizeMode="tail"
          importantForAccessibility="no-hide-descendants"
          pointerEvents="none"
          style={
@@ -75,6 +72,7 @@ exports[`renders list accordion with children 1`] = `
                "fontStyle": "normal",
                "fontWeight": "normal",
              },
+              Object {},
            ]
          }
        >
@@ -95,9 +93,6 @@ exports[`renders list accordion with children 1`] = `
        }
      >
        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
          numberOfLines={1}
          style={
            Array [
@@ -156,9 +151,7 @@ exports[`renders list accordion with children 1`] = `
      >
        <Text
          accessibilityElementsHidden={true}
-          accessible={true}
          allowFontScaling={false}
-          ellipsizeMode="tail"
          importantForAccessibility="no-hide-descendants"
          pointerEvents="none"
          style={
@@ -184,6 +177,7 @@ exports[`renders list accordion with children 1`] = `
                "fontStyle": "normal",
                "fontWeight": "normal",
              },
+              Object {},
            ]
          }
        >
@@ -198,8 +192,7 @@ exports[`renders list accordion with children 1`] = `
 exports[`renders list accordion with left items 1`] = `
 <View>
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits="button"
+    accessibilityRole="button"
    accessible={true}
    isTVSelectable={true}
    onResponderGrant={[Function]}
@@ -242,9 +235,7 @@ exports[`renders list accordion with left items 1`] = `
      >
        <Text
          accessibilityElementsHidden={true}
-          accessible={true}
          allowFontScaling={false}
-          ellipsizeMode="tail"
          importantForAccessibility="no-hide-descendants"
          pointerEvents="none"
          style={
@@ -270,6 +261,7 @@ exports[`renders list accordion with left items 1`] = `
                "fontStyle": "normal",
                "fontWeight": "normal",
              },
+              Object {},
            ]
          }
        >
@@ -290,9 +282,6 @@ exports[`renders list accordion with left items 1`] = `
        }
      >
        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
          numberOfLines={1}
          style={
            Array [
@@ -351,9 +340,7 @@ exports[`renders list accordion with left items 1`] = `
      >
        <Text
          accessibilityElementsHidden={true}
-          accessible={true}
          allowFontScaling={false}
-          ellipsizeMode="tail"
          importantForAccessibility="no-hide-descendants"
          pointerEvents="none"
          style={
@@ -379,6 +366,7 @@ exports[`renders list accordion with left items 1`] = `
                "fontStyle": "normal",
                "fontWeight": "normal",
              },
+              Object {},
            ]
          }
        >
@@ -393,8 +381,7 @@ exports[`renders list accordion with left items 1`] = `
 exports[`renders multiline list accordion 1`] = `
 <View>
  <View
-    accessibilityComponentType="button"
-    accessibilityTraits="button"
+    accessibilityRole="button"
    accessible={true}
    isTVSelectable={true}
    onResponderGrant={[Function]}
@@ -434,9 +421,6 @@ exports[`renders multiline list accordion 1`] = `
        }
      >
        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
          numberOfLines={1}
          style={
            Array [
@@ -483,9 +467,6 @@ exports[`renders multiline list accordion 1`] = `
          Expandable list item
        </Text>
        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
          numberOfLines={2}
          style={
            Array [
@@ -548,9 +529,7 @@ exports[`renders multiline list accordion 1`] = `
      >
        <Text
          accessibilityElementsHidden={true}
-          accessible={true}
          allowFontScaling={false}
-          ellipsizeMode="tail"
          importantForAccessibility="no-hide-descendants"
          pointerEvents="none"
          style={
@@ -576,6 +555,7 @@ exports[`renders multiline list accordion 1`] = `
                "fontStyle": "normal",
                "fontWeight": "normal",
              },
+              Object {},
            ]
          }
        >
--- a/src/components/tests/snapshots/ListItem.test.js.snap
+++ b/src/components/tests/snapshots/ListItem.test.js.snap
@@ -26,11 +26,7 @@ exports[`renders list item with left and right items 1`] = `
      }
    }
  >
-    <Text
-      accessible={true}
-      allowFontScaling={true}
-      ellipsizeMode="tail"
-    >
+    <Text>
      GG
    </Text>
    <View
@@ -48,9 +44,6 @@ exports[`renders list item with left and right items 1`] = `
      }
    >
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
@@ -97,9 +90,6 @@ exports[`renders list item with left and right items 1`] = `
        First Item
      </Text>
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={2}
        style={
          Array [
@@ -163,9 +153,7 @@ exports[`renders list item with left and right items 1`] = `
    >
      <Text
        accessibilityElementsHidden={true}
-        accessible={true}
        allowFontScaling={false}
-        ellipsizeMode="tail"
        importantForAccessibility="no-hide-descendants"
        pointerEvents="none"
        style={
@@ -191,6 +179,7 @@ exports[`renders list item with left and right items 1`] = `
              "fontStyle": "normal",
              "fontWeight": "normal",
            },
+            Object {},
          ]
        }
      >
@@ -244,9 +233,7 @@ exports[`renders list item with left item 1`] = `
    >
      <Text
        accessibilityElementsHidden={true}
-        accessible={true}
        allowFontScaling={false}
-        ellipsizeMode="tail"
        importantForAccessibility="no-hide-descendants"
        pointerEvents="none"
        style={
@@ -272,6 +259,7 @@ exports[`renders list item with left item 1`] = `
              "fontStyle": "normal",
              "fontWeight": "normal",
            },
+            Object {},
          ]
        }
      >
@@ -293,9 +281,6 @@ exports[`renders list item with left item 1`] = `
      }
    >
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
@@ -387,9 +372,6 @@ exports[`renders list item with right item 1`] = `
      }
    >
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
@@ -436,11 +418,7 @@ exports[`renders list item with right item 1`] = `
        First Item
      </Text>
    </View>
-    <Text
-      accessible={true}
-      allowFontScaling={true}
-      ellipsizeMode="tail"
-    >
+    <Text>
      GG
    </Text>
  </View>
@@ -488,9 +466,6 @@ exports[`renders list item with title and description 1`] = `
      }
    >
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={1}
        style={
          Array [
@@ -537,9 +512,6 @@ exports[`renders list item with title and description 1`] = `
        First Item
      </Text>
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        numberOfLines={2}
        style={
          Array [
--- a/src/components/tests/snapshots/ListSection.test.js.snap
+++ b/src/components/tests/snapshots/ListSection.test.js.snap
@@ -12,9 +12,6 @@ exports[`renders list section with title 1`] = `
  }
 >
  <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
    numberOfLines={1}
    style={
      Array [
@@ -104,9 +101,7 @@ exports[`renders list section with title 1`] = `
      >
        <Text
          accessibilityElementsHidden={true}
-          accessible={true}
          allowFontScaling={false}
-          ellipsizeMode="tail"
          importantForAccessibility="no-hide-descendants"
          pointerEvents="none"
          style={
@@ -132,6 +127,7 @@ exports[`renders list section with title 1`] = `
                "fontStyle": "normal",
                "fontWeight": "normal",
              },
+              Object {},
            ]
          }
        >
@@ -153,9 +149,6 @@ exports[`renders list section with title 1`] = `
        }
      >
        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
          numberOfLines={1}
          style={
            Array [
@@ -246,9 +239,7 @@ exports[`renders list section with title 1`] = `
      >
        <Text
          accessibilityElementsHidden={true}
-          accessible={true}
          allowFontScaling={false}
-          ellipsizeMode="tail"
          importantForAccessibility="no-hide-descendants"
          pointerEvents="none"
          style={
@@ -274,6 +265,7 @@ exports[`renders list section with title 1`] = `
                "fontStyle": "normal",
                "fontWeight": "normal",
              },
+              Object {},
            ]
          }
        >
@@ -295,9 +287,6 @@ exports[`renders list section with title 1`] = `
        }
      >
        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
          numberOfLines={1}
          style={
            Array [
@@ -402,9 +391,7 @@ exports[`renders list section without title 1`] = `
      >
        <Text
          accessibilityElementsHidden={true}
-          accessible={true}
          allowFontScaling={false}
-          ellipsizeMode="tail"
          importantForAccessibility="no-hide-descendants"
          pointerEvents="none"
          style={
@@ -430,6 +417,7 @@ exports[`renders list section without title 1`] = `
                "fontStyle": "normal",
                "fontWeight": "normal",
              },
+              Object {},
            ]
          }
        >
@@ -451,9 +439,6 @@ exports[`renders list section without title 1`] = `
        }
      >
        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
          numberOfLines={1}
          style={
            Array [
@@ -544,9 +529,7 @@ exports[`renders list section without title 1`] = `
      >
        <Text
          accessibilityElementsHidden={true}
-          accessible={true}
          allowFontScaling={false}
-          ellipsizeMode="tail"
          importantForAccessibility="no-hide-descendants"
          pointerEvents="none"
          style={
@@ -572,6 +555,7 @@ exports[`renders list section without title 1`] = `
                "fontStyle": "normal",
                "fontWeight": "normal",
              },
+              Object {},
            ]
          }
        >
@@ -593,9 +577,6 @@ exports[`renders list section without title 1`] = `
        }
      >
        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
          numberOfLines={1}
          style={
            Array [
--- a/src/components/tests/snapshots/Portal.test.js.snap
+++ b/src/components/tests/snapshots/Portal.test.js.snap
@@ -10,11 +10,7 @@ Array [
      }
    }
  >
-    <Text
-      accessible={true}
-      allowFontScaling={true}
-      ellipsizeMode="tail"
-    >
+    <Text>
      Outside content
    </Text>
  </View>,
@@ -31,11 +27,7 @@ Array [
      }
    }
  >
-    <Text
-      accessible={true}
-      allowFontScaling={true}
-      ellipsizeMode="tail"
-    >
+    <Text>
      Portal content
    </Text>
  </View>,
--- a/src/components/tests/snapshots/Snackbar.test.js.snap
+++ b/src/components/tests/snapshots/Snackbar.test.js.snap
@@ -74,9 +74,6 @@ exports[`renders snackbar with Text as a child 1`] = `
      }
    >
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        style={
          Array [
            Object {
@@ -123,11 +120,7 @@ exports[`renders snackbar with Text as a child 1`] = `
          }
        }
      >
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-        >
+        <Text>
          Snackbar content
        </Text>
      </Text>
@@ -182,9 +175,6 @@ exports[`renders snackbar with action button 1`] = `
      }
    >
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        style={
          Array [
            Object {
@@ -256,8 +246,7 @@ exports[`renders snackbar with action button 1`] = `
        }
      >
        <View
-          accessibilityComponentType="button"
-          accessibilityTraits="button"
+          accessibilityRole="button"
          accessible={true}
          isTVSelectable={true}
          onResponderGrant={[Function]}
@@ -282,9 +271,6 @@ exports[`renders snackbar with action button 1`] = `
            }
          >
            <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
              numberOfLines={1}
              style={
                Array [
@@ -394,9 +380,6 @@ exports[`renders snackbar with content 1`] = `
      }
    >
      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
        style={
          Array [
            Object {
--- a/yarn.lock
+++ b/yarn.lock