[change] Remove accessibilityTraits and accessibilityComponentType props

These props are deprecated in React Native and replaced by accessibilityRole

Ref necolas#1352

Author: necolas

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']),

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,
     /**

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,

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,

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);

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,30 +22,14 @@ 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) {
       // ignore roles that don't map to web
       return inferredRole || accessibilityRole;
     }
   }
-  if (accessibilityTraits) {
-    const trait = Array.isArray(accessibilityTraits) ? accessibilityTraits[0] : accessibilityTraits;
-    return accessibilityTraitsToRole[trait];
-  }
-  if (accessibilityComponentType) {
-    return accessibilityComponentTypeToRole[accessibilityComponentType];
-  }
 };
 
 export default propsToAriaRole;

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;