[change] Remove accessibilityTraits and accessibilityComponentType props

These props are deprecated in React Native and replaced by accessibilityRole

Ref #1352

docs/guides/accessibility.md

@@ -67,10 +67,7 @@ announce text in the `Text` view because of its
 
 In some cases, we also want to alert the end user of the type of selected
 component (i.e., that it is a “button”). To provide more context to screen
-readers on the web, you should use the `accessibilityRole` property. (Note that
-React Native for Web also provides a compatibility mapping of equivalent
-`accessibilityTraits` and `accessibilityComponentType` values to
-`accessibilityRole`).
+readers on the web, you should use the `accessibilityRole` property.
 
 The `accessibilityRole` prop is used to infer an [analogous HTML
 element][html-aria-url] and ARIA `role`, where possible. In most cases, both

packages/react-native-web/src/exports/Text/TextPropTypes.js

@@ -10,10 +10,9 @@
 
 import StyleSheetPropType from '../../modules/StyleSheetPropType';
 import TextStylePropTypes from './TextStylePropTypes';
-import { any, array, bool, func, number, oneOf, oneOfType, string } from 'prop-types';
+import { any, bool, func, number, oneOf, string } from 'prop-types';
 
 const TextPropTypes = {
-  accessibilityComponentType: string,
   accessibilityLabel: string,
   accessibilityLiveRegion: oneOf(['assertive', 'none', 'polite']),
   accessibilityRole: oneOf([
@@ -26,7 +25,6 @@ const TextPropTypes = {
     'none',
     'text'
   ]),
-  accessibilityTraits: oneOfType([array, string]),
   accessible: bool,
   children: any,
   importantForAccessibility: oneOf(['auto', 'no', 'no-hide-descendants', 'yes']),

packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js

@@ -37,10 +37,8 @@ const TouchableWithoutFeedback = createReactClass({
   mixins: [TimerMixin, Touchable.Mixin],
 
   propTypes: {
-    accessibilityComponentType: ViewPropTypes.accessibilityComponentType,
     accessibilityLabel: string,
     accessibilityRole: ViewPropTypes.accessibilityRole,
-    accessibilityTraits: ViewPropTypes.accessibilityTraits,
     accessible: bool,
     children: any,
     /**

packages/react-native-web/src/exports/View/ViewPropTypes.js

@@ -11,7 +11,7 @@
 import EdgeInsetsPropType, { type EdgeInsetsProp } from '../EdgeInsetsPropType';
 import StyleSheetPropType from '../../modules/StyleSheetPropType';
 import ViewStylePropTypes from './ViewStylePropTypes';
-import { any, array, arrayOf, bool, func, object, oneOf, oneOfType, string } from 'prop-types';
+import { any, arrayOf, bool, func, object, oneOf, string } from 'prop-types';
 import { type StyleObj } from '../StyleSheet/StyleSheetTypes';
 
 const stylePropType = StyleSheetPropType(ViewStylePropTypes);
@@ -35,7 +35,6 @@ export type ViewProps = {
   accessibilityLiveRegion?: 'none' | 'polite' | 'assertive',
   accessibilityRole?: string,
   accessibilityStates?: Array<string>,
-  accessibilityTraits?: string | Array<string>,
   accessible?: boolean,
   children?: any,
   className?: string,
@@ -105,7 +104,6 @@ const ViewPropTypes = {
       'pressed'
     ])
   ),
-  accessibilityTraits: oneOfType([array, string]),
   accessible: bool,
   children: any,
   hitSlop: EdgeInsetsPropType,

packages/react-native-web/src/exports/View/filterSupportedProps.js

@@ -8,12 +8,10 @@
  */
 
 const supportedProps = {
-  accessibilityComponentType: true,
   accessibilityLabel: true,
   accessibilityLiveRegion: true,
   accessibilityRole: true,
   accessibilityStates: true,
-  accessibilityTraits: true,
   accessible: true,
   children: true,
   disabled: true,

packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAriaRole-test.js

@@ -11,21 +11,6 @@ describe('modules/AccessibilityUtil/propsToAriaRole', () => {
     expect(propsToAriaRole({ accessibilityRole: 'banner' })).toEqual('banner');
   });
 
-  test('when iOS/Android accessibility prop equals "button"', () => {
-    expect(propsToAriaRole({ accessibilityComponentType: 'button' })).toEqual('button');
-    expect(propsToAriaRole({ accessibilityTraits: 'button' })).toEqual('button');
-  });
-
-  test('prioritizes "accessibilityRole" when defined', () => {
-    expect(
-      propsToAriaRole({
-        accessibilityComponentType: 'button',
-        accessibilityRole: 'link',
-        accessibilityTraits: 'button'
-      })
-    ).toEqual('link');
-  });
-
   test('when "accessibilityRole" is a native-only value', () => {
     expect(propsToAriaRole({ accessibilityRole: 'none' })).toEqual('presentation');
     expect(propsToAriaRole({ accessibilityRole: 'imagebutton' })).toEqual(undefined);

packages/react-native-web/src/modules/AccessibilityUtil/propsToAriaRole.js

@@ -7,22 +7,6 @@
  * @flow
  */
 
-const accessibilityComponentTypeToRole = {
-  button: 'button',
-  none: 'presentation'
-};
-
-const accessibilityTraitsToRole = {
-  adjustable: 'slider',
-  button: 'button',
-  header: 'heading',
-  image: 'img',
-  link: 'link',
-  none: 'presentation',
-  search: 'search',
-  summary: 'region'
-};
-
 const accessibilityRoleToWebRole = {
   adjustable: 'slider',
   button: 'button',
@@ -38,16 +22,7 @@ const accessibilityRoleToWebRole = {
   text: null
 };
 
-/**
- * Provides compatibility with React Native's "accessibilityTraits" (iOS) and
- * "accessibilityComponentType" (Android), converting them to equivalent ARIA
- * roles.
- */
-const propsToAriaRole = ({
-  accessibilityComponentType,
-  accessibilityRole,
-  accessibilityTraits
-}: Object) => {
+const propsToAriaRole = ({ accessibilityRole }: Object) => {
   if (accessibilityRole) {
     const inferredRole = accessibilityRoleToWebRole[accessibilityRole];
     if (inferredRole !== null) {
@@ -55,13 +30,6 @@ const propsToAriaRole = ({
       return inferredRole || accessibilityRole;
     }
   }
-  if (accessibilityTraits) {
-    const trait = Array.isArray(accessibilityTraits) ? accessibilityTraits[0] : accessibilityTraits;
-    return accessibilityTraitsToRole[trait];
-  }
-  if (accessibilityComponentType) {
-    return accessibilityComponentTypeToRole[accessibilityComponentType];
-  }
 };
 
 export default propsToAriaRole;

packages/react-native-web/src/modules/createDOMProps/index.js

@@ -74,9 +74,7 @@ const createDOMProps = (component, props, styleResolver) => {
     testID,
     /* eslint-disable */
     accessible,
-    accessibilityComponentType,
     accessibilityRole,
-    accessibilityTraits,
     /* eslint-enable */
     ...domProps
   } = props;

packages/website/storybook/1-components/Text/TextScreen.js

@@ -68,9 +68,7 @@ const TextScreen = () => (
             Allows assistive technologies to present and support interaction with the view in a
             manner that is consistent with user expectations for similar views of that type. For
             example, marking a touchable view with an <Code>accessibilityRole</Code> of{' '}
-            <Code>button</Code>. For compatibility with React Native{' '}
-            <Code>accessibilityTraits</Code> and <Code>accessibilityComponentType</Code> are mapped
-            to <Code>accessibilityRole</Code>. (This is implemented using ARIA roles.)
+            <Code>button</Code>. (This is implemented using ARIA roles.)
           </AppText>
         }
       />

packages/website/storybook/1-components/View/ViewScreen.js

@@ -64,9 +64,7 @@ const ViewScreen = () => (
             Allows assistive technologies to present and support interaction with the view in a
             manner that is consistent with user expectations for similar views of that type. For
             example, marking a touchable view with an <Code>accessibilityRole</Code> of{' '}
-            <Code>button</Code>. For compatibility with React Native{' '}
-            <Code>accessibilityTraits</Code> and <Code>accessibilityComponentType</Code> are mapped
-            to <Code>accessibilityRole</Code>. (This is implemented using ARIA roles.)
+            <Code>button</Code>. (This is implemented using ARIA roles.)
           </AppText>
         }
       />
@@ -268,28 +266,6 @@ const ViewScreen = () => (
         typeInfo="?string"
         description="Used to locate this view in end-to-end tests. The test ID is rendered to a 'data-testid' DOM attribute"
       />
-
-      <DocItem
-        label="compat"
-        name="accessibilityComponentType"
-        typeInfo="?enum(roles)"
-        description={
-          <AppText>
-            (For compatibility with React Native. Equivalent to <Code>accessibilityRole</Code>.)
-          </AppText>
-        }
-      />
-
-      <DocItem
-        label="compat"
-        name="accessibilityTraits"
-        typeInfo="?enum(roles) | Array<role>"
-        description={
-          <AppText>
-            (For compatibility with React Native. Equivalent to <Code>accessibilityRole</Code>.)
-          </AppText>
-        }
-      />
     </Section>
 
     <Section title="More examples">

packages/website/storybook/2-apis/PanResponder/PanResponderScreen.js

@@ -13,7 +13,7 @@ const PanResponderScreen = () => (
       resilient to extra touches, and can be used to recognize simple multi-touch gestures. For more
       information, please refer to the React Native{' '}
       <AppText
-        accessibilityTraits="link"
+        accessibilityRole="link"
         href="https://facebook.github.io/react-native/docs/panresponder.html"
         style={{ color: '#1B95E0' }}
         target="_blank"

packages/website/storybook/ui-explorer/StyleList.js

@@ -5,9 +5,9 @@ import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 const StyleList = ({ stylePropTypes }) => (
-  <View accessibilityTraits="list">
+  <View accessibilityRole="list">
     {stylePropTypes.map(({ label, name, typeInfo }, i) => (
-      <AppText accessibilityTraits="listitem" key={i} style={styles.item}>
+      <AppText accessibilityRole="listitem" key={i} style={styles.item}>
         {label ? <Text style={styles.label}>{label}</Text> : null}
         <Text style={styles.name}>{name}</Text>
         {typeInfo ? ': ' : null}

packages/website/storybook/ui-explorer/TextList.js

@@ -5,9 +5,9 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
 const TextList = ({ items }) => (
-  <View accessibilityTraits="list" style={styles.list}>
+  <View accessibilityRole="list" style={styles.list}>
     {items.map((item, i) => (
-      <AppText accessibilityTraits="listitem" key={i} style={styles.item}>
+      <AppText accessibilityRole="listitem" key={i} style={styles.item}>
         <View style={styles.bullet} />
         {item}
       </AppText>