diff --git a/packages/docs/src/components/TextInput/TextInput.stories.mdx b/packages/docs/src/components/TextInput/TextInput.stories.mdx index d0ff1118..f470ceb9 100644 --- a/packages/docs/src/components/TextInput/TextInput.stories.mdx +++ b/packages/docs/src/components/TextInput/TextInput.stories.mdx @@ -14,7 +14,6 @@ some props are exclusive to or excluded from `multiline`. | Name | Type | Default | | ------------------------- | --------- | ------- | | accessibilityLabel | ?string | | -| accessibilityRelationship | ?Object | | | accessibilityState | ?Object | | | autoCapitalize | ?string | 'sentences' | | autoComplete | ?string | 'on' | diff --git a/packages/docs/src/components/View/View.stories.mdx b/packages/docs/src/components/View/View.stories.mdx index f422edf6..1d9d8fb9 100644 --- a/packages/docs/src/components/View/View.stories.mdx +++ b/packages/docs/src/components/View/View.stories.mdx @@ -17,7 +17,6 @@ Please also refer to the in-depth "Accessibility" and "Style" guides. | ------------------------- | --------- | ------- | | accessibilityLabel | ?string | | | accessibilityLiveRegion | ?string | | -| accessibilityRelationship | ?Object | | | accessibilityRole | ?string | | | accessibilityState | ?Object | | | accessibilityValue | ?Object | | diff --git a/packages/docs/src/guides/accessibility.stories.mdx b/packages/docs/src/guides/accessibility.stories.mdx index 8fd92d7a..61030865 100644 --- a/packages/docs/src/guides/accessibility.stories.mdx +++ b/packages/docs/src/guides/accessibility.stories.mdx @@ -44,10 +44,6 @@ announce the change. (This is implemented using `aria-live`.) ``` -### accessibilityRelationship: ?object - -... - ### accessibilityRole: ?string Indicates to assistive technologies how to describe the view, e.g., that it is a "button". diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js index 75fe13d3..0994a45e 100644 --- a/packages/react-native-web/src/exports/Image/index.js +++ b/packages/react-native-web/src/exports/Image/index.js @@ -136,7 +136,6 @@ function resolveAssetUri(source): ?string { const Image = forwardRef((props, ref) => { const { accessibilityLabel, - accessibilityRelationship, accessibilityRole, accessibilityState, accessible, @@ -276,7 +275,6 @@ const Image = forwardRef((props, ref) => { return ( ((props, forwardedRef) => { const { accessibilityLabel, - accessibilityRelationship, accessibilityRole, accessibilityState, children, @@ -146,7 +145,6 @@ const ScrollViewBase = forwardRef((props, forwardedRef) => { return ( pick(props, forwardPropsList); diff --git a/packages/react-native-web/src/exports/Text/types.js b/packages/react-native-web/src/exports/Text/types.js index 7d7982df..fbdf7b40 100644 --- a/packages/react-native-web/src/exports/Text/types.js +++ b/packages/react-native-web/src/exports/Text/types.js @@ -63,15 +63,6 @@ export type TextStyle = { export type TextProps = { ...ViewProps, - accessibilityRelationship?: { - activedescendant?: ?string, - controls?: ?string, - describedby?: ?string, - details?: ?string, - haspopup?: ?string, - labelledby?: ?string, - owns?: ?string - }, accessibilityRole?: | 'button' | 'header' diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js index 4e1a8f6f..9c68a7d5 100644 --- a/packages/react-native-web/src/exports/TextInput/index.js +++ b/packages/react-native-web/src/exports/TextInput/index.js @@ -48,7 +48,6 @@ const setSelection = (node, selection) => { const forwardPropsList = { accessibilityLabel: true, accessibilityLiveRegion: true, - accessibilityRelationship: true, accessibilityRole: true, accessibilityState: true, accessibilityValue: true, @@ -91,15 +90,14 @@ const forwardPropsList = { testID: true, type: true, // unstable + dataSet: true, onMouseDown: true, onMouseEnter: true, onMouseLeave: true, onMouseMove: true, onMouseOver: true, onMouseOut: true, - onMouseUp: true, - unstable_ariaSet: true, - unstable_dataSet: true + onMouseUp: true }; const pickProps = props => pick(props, forwardPropsList); diff --git a/packages/react-native-web/src/exports/View/index.js b/packages/react-native-web/src/exports/View/index.js index 99c6974a..1db96aae 100644 --- a/packages/react-native-web/src/exports/View/index.js +++ b/packages/react-native-web/src/exports/View/index.js @@ -25,7 +25,6 @@ import TextAncestorContext from '../Text/TextAncestorContext'; const forwardPropsList = { accessibilityLabel: true, accessibilityLiveRegion: true, - accessibilityRelationship: true, accessibilityRole: true, accessibilityState: true, accessibilityValue: true, @@ -55,6 +54,7 @@ const forwardPropsList = { style: true, testID: true, // unstable + dataSet: true, onMouseDown: true, onMouseEnter: true, onMouseLeave: true, @@ -66,9 +66,7 @@ const forwardPropsList = { onWheel: true, href: true, rel: true, - target: true, - unstable_ariaSet: true, - unstable_dataSet: true + target: true }; const pickProps = props => pick(props, forwardPropsList); diff --git a/packages/react-native-web/src/exports/View/types.js b/packages/react-native-web/src/exports/View/types.js index dc5ef4f3..9cfb4a35 100644 --- a/packages/react-native-web/src/exports/View/types.js +++ b/packages/react-native-web/src/exports/View/types.js @@ -61,15 +61,6 @@ export type ViewStyle = { export type ViewProps = { accessibilityLabel?: ?string, accessibilityLiveRegion?: 'none' | 'polite' | 'assertive', - accessibilityRelationship?: { - activedescendant?: ?string, - controls?: ?string, - describedby?: ?string, - details?: ?string, - haspopup?: ?string, - labelledby?: ?string, - owns?: ?string - }, accessibilityRole?: ?string, accessibilityState?: { busy?: ?boolean, @@ -123,6 +114,7 @@ export type ViewProps = { style?: GenericStyleProp, testID?: ?string, // unstable + dataSet?: ?Object, onMouseDown?: (e: any) => void, onMouseEnter?: (e: any) => void, onMouseLeave?: (e: any) => void, @@ -142,7 +134,5 @@ export type ViewProps = { onWheel?: (e: any) => void, href?: ?string, rel?: ?string, - target?: ?string, - unstable_ariaSet?: Object, - unstable_dataSet?: Object + target?: ?string }; diff --git a/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAccessibilityComponent-test.js b/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAccessibilityComponent-test.js index 8ac3cd4e..d2b58c39 100644 --- a/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAccessibilityComponent-test.js +++ b/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAccessibilityComponent-test.js @@ -19,7 +19,7 @@ describe('modules/AccessibilityUtil/propsToAccessibilityComponent', () => { expect( propsToAccessibilityComponent({ accessibilityRole: 'heading', - unstable_ariaSet: { level: 3 } + 'aria-level': 3 }) ).toEqual('h3'); }); diff --git a/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js b/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js index 5144a039..a8f92176 100644 --- a/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js +++ b/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js @@ -34,9 +34,8 @@ const propsToAccessibilityComponent = (props: Object = emptyObject) => { const role = propsToAriaRole(props); if (role) { if (role === 'heading') { - const ariaSet = props.unstable_ariaSet; - if (ariaSet != null && ariaSet.level) { - const level = ariaSet.level; + const level = props['aria-level']; + if (level != null) { return `h${level}`; } return 'h1'; diff --git a/packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap index f056cdac..7a6aac89 100644 --- a/packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap @@ -14,20 +14,6 @@ exports[`modules/createDOMProps includes cursor style for pressable roles 1`] = exports[`modules/createDOMProps includes cursor style for pressable roles 2`] = `"css-cursor-18t94o4"`; -exports[`modules/createDOMProps prop "accessibilityRelationship" values are "id" string 1`] = ` -Object { - "aria-activedescendant": "id", - "aria-controls": "id", - "aria-describedby": "id", - "aria-details": "id", - "aria-haspopup": "id", - "aria-labelledby": "id", - "aria-owns": "id", -} -`; - -exports[`modules/createDOMProps prop "accessibilityRelationship" values are "undefined" 1`] = `Object {}`; - exports[`modules/createDOMProps prop "accessibilityState" values are "false" 1`] = ` Object { "aria-busy": false, diff --git a/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js b/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js index 41def13b..729e7633 100644 --- a/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js +++ b/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js @@ -195,32 +195,6 @@ describe('modules/createDOMProps', () => { }); }); - describe('prop "accessibilityRelationship"', () => { - function createAccessibilityRelationship(value) { - return { - activedescendant: value, - controls: value, - describedby: value, - details: value, - haspopup: value, - labelledby: value, - owns: value - }; - } - - test('values are "undefined"', () => { - const accessibilityRelationship = createAccessibilityRelationship(undefined); - const props = createProps({ accessibilityRelationship }); - expect(props).toMatchSnapshot(); - }); - - test('values are "id" string', () => { - const accessibilityRelationship = createAccessibilityRelationship('id'); - const props = createProps({ accessibilityRelationship }); - expect(props).toMatchSnapshot(); - }); - }); - test('prop "className" is preserved', () => { const className = 'external-class-name'; const props = createProps({ className }); diff --git a/packages/react-native-web/src/modules/createDOMProps/index.js b/packages/react-native-web/src/modules/createDOMProps/index.js index 55174aa9..c4c34dec 100644 --- a/packages/react-native-web/src/modules/createDOMProps/index.js +++ b/packages/react-native-web/src/modules/createDOMProps/index.js @@ -50,13 +50,7 @@ const pointerEventsStyles = StyleSheet.create({ } }); -const defaultStyleResolver = (style, classList) => styleResolver.resolve(style, classList); - -const createDOMProps = (component, props, styleResolver) => { - if (!styleResolver) { - styleResolver = defaultStyleResolver; - } - +const createDOMProps = (component, props) => { if (!props) { props = emptyObject; } @@ -64,11 +58,11 @@ const createDOMProps = (component, props, styleResolver) => { const { accessibilityLabel, accessibilityLiveRegion, - accessibilityRelationship, accessibilityState, accessibilityValue, accessible, classList, + dataSet, disabled: providedDisabled, importantForAccessibility, nativeID, @@ -78,8 +72,6 @@ const createDOMProps = (component, props, styleResolver) => { /* eslint-disable */ accessibilityRole, /* eslint-enable */ - unstable_ariaSet, - unstable_dataSet, ...domProps } = props; @@ -95,23 +87,11 @@ const createDOMProps = (component, props, styleResolver) => { component === 'textarea' || domProps.contentEditable != null; - // unstable_ariaSet - if (unstable_ariaSet != null) { - for (const prop in unstable_ariaSet) { - if (hasOwnProperty.call(unstable_ariaSet, prop)) { - const value = unstable_ariaSet[prop]; - if (value != null) { - domProps[`aria-${prop}`] = value; - } - } - } - } - - // unstable_dataSet - if (unstable_dataSet != null) { - for (const prop in unstable_dataSet) { - if (hasOwnProperty.call(unstable_dataSet, prop)) { - const value = unstable_dataSet[prop]; + // dataSet + if (dataSet != null) { + for (const prop in dataSet) { + if (hasOwnProperty.call(dataSet, prop)) { + const value = dataSet[prop]; if (value != null) { domProps[`data-${prop}`] = value; } @@ -129,16 +109,6 @@ const createDOMProps = (component, props, styleResolver) => { domProps['aria-live'] = accessibilityLiveRegion === 'none' ? 'off' : accessibilityLiveRegion; } - // accessibilityRelationship - if (accessibilityRelationship != null) { - for (const prop in accessibilityRelationship) { - const value = accessibilityRelationship[prop]; - if (value != null) { - domProps[`aria-${prop}`] = value; - } - } - } - // accessibilityRole if (role != null) { domProps.role = role; @@ -224,7 +194,7 @@ const createDOMProps = (component, props, styleResolver) => { const finalClassList = [needsReset && classes.reset, needsCursor && classes.cursor, classList]; // Resolve styles - const { className, style } = styleResolver(reactNativeStyle, finalClassList); + const { className, style } = styleResolver.resolve(reactNativeStyle, finalClassList); if (className != null && className !== '') { domProps.className = className; diff --git a/packages/react-native-web/src/modules/pick/index.js b/packages/react-native-web/src/modules/pick/index.js index a53ad436..8bdf5c1a 100644 --- a/packages/react-native-web/src/modules/pick/index.js +++ b/packages/react-native-web/src/modules/pick/index.js @@ -11,7 +11,11 @@ export default function pick(obj: Object, list: { [string]: boolean }): Object { const nextObj = {}; for (const key in obj) { if (obj.hasOwnProperty(key)) { - if (list[key] === true) { + if ( + list[key] === true || + // Temporary until ARIA is mapped to explicit props + key.indexOf('aria-') === 0 + ) { nextObj[key] = obj[key]; } }