diff --git a/docs/guides/accessibility.md b/docs/guides/accessibility.md index b30f7d6d..ef470aab 100644 --- a/docs/guides/accessibility.md +++ b/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 diff --git a/packages/react-native-web/src/exports/Text/TextPropTypes.js b/packages/react-native-web/src/exports/Text/TextPropTypes.js index 4ddae9aa..9adeb3f0 100644 --- a/packages/react-native-web/src/exports/Text/TextPropTypes.js +++ b/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']), diff --git a/packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js b/packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js index a2eb9b73..bb0d3554 100644 --- a/packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js +++ b/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, /** diff --git a/packages/react-native-web/src/exports/View/ViewPropTypes.js b/packages/react-native-web/src/exports/View/ViewPropTypes.js index 1cc2e457..b3d654e4 100644 --- a/packages/react-native-web/src/exports/View/ViewPropTypes.js +++ b/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, - accessibilityTraits?: string | Array, accessible?: boolean, children?: any, className?: string, @@ -105,7 +104,6 @@ const ViewPropTypes = { 'pressed' ]) ), - accessibilityTraits: oneOfType([array, string]), accessible: bool, children: any, hitSlop: EdgeInsetsPropType, diff --git a/packages/react-native-web/src/exports/View/filterSupportedProps.js b/packages/react-native-web/src/exports/View/filterSupportedProps.js index cf480dc0..dcd2f22f 100644 --- a/packages/react-native-web/src/exports/View/filterSupportedProps.js +++ b/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, diff --git a/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAriaRole-test.js b/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAriaRole-test.js index 0685c145..fd69aec8 100644 --- a/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAriaRole-test.js +++ b/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); diff --git a/packages/react-native-web/src/modules/AccessibilityUtil/propsToAriaRole.js b/packages/react-native-web/src/modules/AccessibilityUtil/propsToAriaRole.js index 3112b3b0..834afcb7 100644 --- a/packages/react-native-web/src/modules/AccessibilityUtil/propsToAriaRole.js +++ b/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; diff --git a/packages/react-native-web/src/modules/createDOMProps/index.js b/packages/react-native-web/src/modules/createDOMProps/index.js index caf60ea6..65b35c64 100644 --- a/packages/react-native-web/src/modules/createDOMProps/index.js +++ b/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; diff --git a/packages/website/storybook/1-components/Text/TextScreen.js b/packages/website/storybook/1-components/Text/TextScreen.js index c3bc5a8e..69da2cc6 100644 --- a/packages/website/storybook/1-components/Text/TextScreen.js +++ b/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 accessibilityRole of{' '} - button. For compatibility with React Native{' '} - accessibilityTraits and accessibilityComponentType are mapped - to accessibilityRole. (This is implemented using ARIA roles.) + button. (This is implemented using ARIA roles.) } /> diff --git a/packages/website/storybook/1-components/View/ViewScreen.js b/packages/website/storybook/1-components/View/ViewScreen.js index abc94112..7e78ab53 100644 --- a/packages/website/storybook/1-components/View/ViewScreen.js +++ b/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 accessibilityRole of{' '} - button. For compatibility with React Native{' '} - accessibilityTraits and accessibilityComponentType are mapped - to accessibilityRole. (This is implemented using ARIA roles.) + button. (This is implemented using ARIA roles.) } /> @@ -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" /> - - - (For compatibility with React Native. Equivalent to accessibilityRole.) - - } - /> - - - (For compatibility with React Native. Equivalent to accessibilityRole.) - - } - />
diff --git a/packages/website/storybook/2-apis/PanResponder/PanResponderScreen.js b/packages/website/storybook/2-apis/PanResponder/PanResponderScreen.js index 9b6fd158..d784e22e 100644 --- a/packages/website/storybook/2-apis/PanResponder/PanResponderScreen.js +++ b/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{' '} ( - + {stylePropTypes.map(({ label, name, typeInfo }, i) => ( - + {label ? {label} : null} {name} {typeInfo ? ': ' : null} diff --git a/packages/website/storybook/ui-explorer/TextList.js b/packages/website/storybook/ui-explorer/TextList.js index e5164442..8b724a18 100644 --- a/packages/website/storybook/ui-explorer/TextList.js +++ b/packages/website/storybook/ui-explorer/TextList.js @@ -5,9 +5,9 @@ import React from 'react'; import { StyleSheet, View } from 'react-native'; const TextList = ({ items }) => ( - + {items.map((item, i) => ( - + {item}