@@ -93,7 +84,6 @@ exports[`components/Pressable press interaction 2`] = `
exports[`components/Pressable press interaction 3`] = `
@@ -103,7 +93,6 @@ exports[`components/Pressable prop "accessibilityLabel" value is set 1`] = `
`;
@@ -112,7 +101,6 @@ exports[`components/Pressable prop "accessibilityLiveRegion" value is set 1`] =
`;
@@ -120,7 +108,6 @@ exports[`components/Pressable prop "accessibilityLiveRegion" value is set 1`] =
exports[`components/Pressable prop "accessibilityRole" value alters HTML element 1`] = `
`;
@@ -128,7 +115,6 @@ exports[`components/Pressable prop "accessibilityRole" value alters HTML element
exports[`components/Pressable prop "accessibilityRole" value is "button" 1`] = `
@@ -137,7 +123,6 @@ exports[`components/Pressable prop "accessibilityRole" value is "button" 1`] = `
exports[`components/Pressable prop "accessibilityRole" value is set 1`] = `
@@ -154,7 +139,6 @@ exports[`components/Pressable prop "disabled" 1`] = `
exports[`components/Pressable prop "nativeID" value is set 1`] = `
@@ -163,7 +147,6 @@ exports[`components/Pressable prop "nativeID" value is set 1`] = `
exports[`components/Pressable prop "pointerEvents" 1`] = `
`;
@@ -171,7 +154,6 @@ exports[`components/Pressable prop "pointerEvents" 1`] = `
exports[`components/Pressable prop "style" value is set 1`] = `
@@ -180,7 +162,6 @@ exports[`components/Pressable prop "style" value is set 1`] = `
exports[`components/Pressable prop "testID" value is set 1`] = `
diff --git a/packages/react-native-web/src/exports/Pressable/index.js b/packages/react-native-web/src/exports/Pressable/index.js
index adb19edc..ff30d106 100644
--- a/packages/react-native-web/src/exports/Pressable/index.js
+++ b/packages/react-native-web/src/exports/Pressable/index.js
@@ -77,7 +77,6 @@ type Props = $ReadOnly<{|
*/
function Pressable(props: Props, forwardedRef): React.Node {
const {
- accessible,
children,
delayLongPress,
delayPressIn,
@@ -134,7 +133,6 @@ function Pressable(props: Props, forwardedRef): React.Node {
useHover(hostRef, { contain: true, disabled, onHoverChange: setHovered });
- const accessibilityState = { disabled, ...props.accessibilityState };
const interactionState = { hovered, focused, pressed };
function createFocusHandler(callback, value) {
@@ -152,9 +150,8 @@ function Pressable(props: Props, forwardedRef): React.Node {
@@ -54,7 +53,6 @@ exports[`components/Text prop "accessibilityRole" value alters HTML element 1`]
exports[`components/Text prop "accessibilityRole" value is "button" 1`] = `
;
const forwardPropsList = {
+ accessibilityDisabled: true,
accessibilityLabel: true,
accessibilityLiveRegion: true,
accessibilityRole: true,
accessibilityState: true,
accessibilityValue: true,
- accessible: true,
children: true,
disabled: true,
focusable: true,
- importantForAccessibility: true,
nativeID: true,
onBlur: true,
onFocus: true,
@@ -67,7 +66,6 @@ const pickProps = props => pick(props, forwardPropsList);
function TouchableWithoutFeedback(props: Props, forwardedRef): React.Node {
const {
- accessible,
delayPressIn,
delayPressOut,
delayLongPress,
@@ -112,9 +110,8 @@ function TouchableWithoutFeedback(props: Props, forwardedRef): React.Node {
const element = React.Children.only(props.children);
const children = [element.props.children];
const supportedProps = pickProps(props);
- supportedProps.accessible = accessible !== false;
- supportedProps.accessibilityState = { disabled, ...props.accessibilityState };
- supportedProps.focusable = focusable !== false && onPress !== undefined;
+ supportedProps.accessibilityDisabled = disabled;
+ supportedProps.focusable = !disabled && focusable !== false;
supportedProps.ref = useMergeRefs(forwardedRef, hostRef, element.ref);
const elementProps = Object.assign(supportedProps, pressEventHandlers);
diff --git a/packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap
index 21eb16f6..8e343cf3 100644
--- a/packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap
@@ -40,7 +40,6 @@ exports[`components/View prop "accessibilityLiveRegion" value is set 1`] = `
exports[`components/View prop "accessibilityRole" value alters HTML element 1`] = `
`;
@@ -48,7 +47,6 @@ exports[`components/View prop "accessibilityRole" value alters HTML element 1`]
exports[`components/View prop "accessibilityRole" value is "button" 1`] = `
diff --git a/packages/react-native-web/src/exports/View/index.js b/packages/react-native-web/src/exports/View/index.js
index 7e66bd04..8271ba24 100644
--- a/packages/react-native-web/src/exports/View/index.js
+++ b/packages/react-native-web/src/exports/View/index.js
@@ -23,16 +23,15 @@ import StyleSheet from '../StyleSheet';
import TextAncestorContext from '../Text/TextAncestorContext';
const forwardPropsList = {
+ accessibilityDisabled: true,
accessibilityLabel: true,
accessibilityLiveRegion: true,
accessibilityRole: true,
accessibilityState: true,
accessibilityValue: true,
- accessible: true,
children: true,
classList: true,
- disabled: true,
- importantForAccessibility: true,
+ focusable: true,
nativeID: true,
onBlur: true,
onClick: true,
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 afd41868..caa26083 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
@@ -15,95 +15,65 @@ describe('modules/createDOMProps', () => {
test('default case', () => {
expect(createProps({ accessibilityRole })).toEqual(
- expect.objectContaining({ 'data-focusable': true })
+ expect.not.objectContaining({ tabIndex: '-1' })
);
});
- test('when "accessible" is true', () => {
- expect(createProps({ accessibilityRole, accessible: true })).toEqual(
- expect.objectContaining({ 'data-focusable': true })
+ test('when "focusable" is true', () => {
+ expect(createProps({ accessibilityRole, focusable: true })).toEqual(
+ expect.not.objectContaining({ tabIndex: '-1' })
);
});
- test('when "accessible" is false', () => {
- expect(createProps({ accessibilityRole, accessible: false })).toEqual(
- expect.objectContaining({ tabIndex: '-1' })
+ test('when "focusable" is false', () => {
+ expect(createProps({ accessibilityRole, focusable: false })).toEqual(
+ expect.not.objectContaining({ tabIndex: '-1' })
);
});
- test('when "disabled" is true', () => {
- expect(createProps({ accessibilityRole, disabled: true })).toEqual(
- expect.objectContaining({ 'aria-disabled': true, disabled: true, tabIndex: '-1' })
+ test('when "accessibilityDisabled" is true', () => {
+ expect(createProps({ accessibilityRole, accessibilityDisabled: true })).toEqual(
+ expect.objectContaining({ 'aria-disabled': true })
);
});
test('when "disabled" is false', () => {
- expect(createProps({ accessibilityRole, disabled: false })).toEqual(
- expect.objectContaining({ 'data-focusable': true })
+ expect(createProps({ accessibilityRole, accessibilityDisabled: false })).toEqual(
+ expect.not.objectContaining({ tabIndex: '-1' })
);
});
-
- test('when "importantForAccessibility" is "no"', () => {
- expect(createProps({ accessibilityRole, importantForAccessibility: 'no' })).toEqual(
- expect.objectContaining({ tabIndex: '-1' })
- );
- });
-
- test('when "importantForAccessibility" is "no-hide-descendants"', () => {
- expect(
- createProps({
- accessibilityRole,
- importantForAccessibility: 'no-hide-descendants'
- })
- ).toEqual(expect.objectContaining({ tabIndex: '-1' }));
- });
});
const testFocusableRole = accessibilityRole => {
test('default case', () => {
expect(createProps({ accessibilityRole })).toEqual(
- expect.objectContaining({ 'data-focusable': true, tabIndex: '0' })
+ expect.objectContaining({ tabIndex: '0' })
);
});
- test('when "accessible" is true', () => {
- expect(createProps({ accessibilityRole, accessible: true })).toEqual(
- expect.objectContaining({ 'data-focusable': true, tabIndex: '0' })
+ test('when "focusable" is true', () => {
+ expect(createProps({ accessibilityRole, focusable: true })).toEqual(
+ expect.objectContaining({ tabIndex: '0' })
);
});
- test('when "accessible" is false', () => {
- expect(createProps({ accessibilityRole, accessible: false })).not.toEqual(
- expect.objectContaining({ 'data-focusable': true, tabIndex: '0' })
+ test('when "focusable" is false', () => {
+ expect(createProps({ accessibilityRole, focusable: false })).not.toEqual(
+ expect.objectContaining({ tabIndex: '0' })
);
});
- test('when "disabled" is true', () => {
- expect(createProps({ accessibilityRole, disabled: true })).toEqual(
+ test('when "accessibilityDisabled" is true', () => {
+ expect(createProps({ accessibilityRole, accessibilityDisabled: true })).toEqual(
expect.objectContaining({ 'aria-disabled': true, disabled: true })
);
});
- test('when "disabled" is false', () => {
- expect(createProps({ accessibilityRole, disabled: false })).toEqual(
- expect.objectContaining({ 'data-focusable': true, tabIndex: '0' })
+ test('when "accessibilityDisabled" is false', () => {
+ expect(createProps({ accessibilityRole, accessibilityDisabled: false })).toEqual(
+ expect.objectContaining({ tabIndex: '0' })
);
});
-
- test('when "importantForAccessibility" is "no"', () => {
- expect(createProps({ accessibilityRole, importantForAccessibility: 'no' })).not.toEqual(
- expect.objectContaining({ 'data-focusable': true, tabIndex: '0' })
- );
- });
-
- test('when "importantForAccessibility" is "no-hide-descendants"', () => {
- expect(
- createProps({
- accessibilityRole,
- importantForAccessibility: 'no-hide-descendants'
- })
- ).not.toEqual(expect.objectContaining({ 'data-focusable': true, tabIndex: '0' }));
- });
};
describe('"accessibilityRole" of "button"', () => {
@@ -115,36 +85,27 @@ describe('modules/createDOMProps', () => {
});
describe('with unfocusable accessibilityRole', () => {
- test('when "accessible" is true', () => {
- expect(createProps({ accessible: true })).toEqual(
- expect.objectContaining({ 'data-focusable': true, tabIndex: '0' })
+ test('when "focusable" is true', () => {
+ expect(createProps({ focusable: true })).toEqual(
+ expect.objectContaining({ tabIndex: '0' })
);
});
- test('when "accessible" is false', () => {
- expect(createProps({ accessible: false })).toEqual({});
- });
-
- test('when "importantForAccessibility" is "no"', () => {
- expect(createProps({ importantForAccessibility: 'no' })).toEqual({});
- expect(createProps({ accessible: true, importantForAccessibility: 'no' })).not.toEqual(
- expect.objectContaining({ 'data-focusable': true, tabIndex: '0' })
- );
- });
-
- test('when "importantForAccessibility" is "no-hide-descendants"', () => {
- expect(
- createProps({ accessible: true, importantForAccessibility: 'no-hide-descendants' })
- ).not.toEqual(expect.objectContaining({ 'data-focusable': true, tabIndex: '0' }));
+ test('when "focusable" is false', () => {
+ expect(createProps({ focusable: false })).toEqual({});
});
});
});
describe('prop "onClick"', () => {
- const callsOnClick = (component, accessibilityRole, disabled = false) => {
+ const callsOnClick = (component, accessibilityRole, accessibilityDisabled = false) => {
const onClick = jest.fn();
const event = { stopPropagation: jest.fn() };
- const finalProps = createDOMProps(component, { accessibilityRole, disabled, onClick });
+ const finalProps = createDOMProps(component, {
+ accessibilityRole,
+ accessibilityDisabled,
+ onClick
+ });
finalProps.onClick(event);
return onClick.mock.calls.length === 1;
};
@@ -180,13 +141,13 @@ describe('modules/createDOMProps', () => {
});
describe('prop "onKeyDown"', () => {
- const callsOnClick = key => (component, accessibilityRole, disabled = false) => {
+ const callsOnClick = key => (component, accessibilityRole, accessibilityDisabled = false) => {
const onClick = jest.fn();
const onKeyDown = jest.fn();
const event = { key, preventDefault: jest.fn() };
const finalProps = createDOMProps(component, {
accessibilityRole,
- disabled,
+ accessibilityDisabled,
onClick,
onKeyDown
});
@@ -236,8 +197,8 @@ describe('modules/createDOMProps', () => {
const onClick = jest.fn();
const event = { key: 'Enter', preventDefault: jest.fn() };
const finalProps = createDOMProps('div', {
- accessible: true,
accessibilityRole: 'article',
+ focusable: true,
onClick
});
finalProps.onKeyDown(event);
@@ -313,11 +274,6 @@ describe('modules/createDOMProps', () => {
expect(props.className).toEqual(className);
});
- test('prop "importantForAccessibility" becomes "aria-hidden"', () => {
- const props = createProps({ importantForAccessibility: 'no-hide-descendants' });
- expect(props['aria-hidden']).toEqual(true);
- });
-
test('prop "nativeID" becomes "id"', () => {
const nativeID = 'Example.nativeID';
const props = createProps({ nativeID });
diff --git a/packages/react-native-web/src/modules/createDOMProps/index.js b/packages/react-native-web/src/modules/createDOMProps/index.js
index f1af5976..285858e4 100644
--- a/packages/react-native-web/src/modules/createDOMProps/index.js
+++ b/packages/react-native-web/src/modules/createDOMProps/index.js
@@ -56,15 +56,14 @@ const createDOMProps = (component, props) => {
}
const {
+ accessibilityDisabled,
accessibilityLabel,
accessibilityLiveRegion,
accessibilityState,
accessibilityValue,
- accessible,
classList,
dataSet,
- disabled: providedDisabled,
- importantForAccessibility,
+ focusable,
nativeID,
pointerEvents,
style: providedStyle,
@@ -76,7 +75,7 @@ const createDOMProps = (component, props) => {
} = props;
const disabled =
- (accessibilityState != null && accessibilityState.disabled === true) || providedDisabled;
+ (accessibilityState != null && accessibilityState.disabled === true) || accessibilityDisabled;
const role = AccessibilityUtil.propsToAriaRole(props);
const isNativeInteractiveElement =
role === 'link' ||
@@ -142,36 +141,40 @@ const createDOMProps = (component, props) => {
}
}
- // legacy fallbacks
- if (importantForAccessibility === 'no-hide-descendants') {
- domProps['aria-hidden'] = true;
- }
if (disabled === true) {
domProps['aria-disabled'] = true;
domProps.disabled = true;
}
// FOCUS
- // Assume that 'link' is focusable by default (uses
).
- // Assume that 'button' is not (uses ) but must be treated as such.
- const focusable =
- !disabled &&
- importantForAccessibility !== 'no' &&
- importantForAccessibility !== 'no-hide-descendants';
- if (isNativeInteractiveElement) {
- if (accessible === false || !focusable) {
+ // "focusable" indicates that an element may be a keyboard tab-stop.
+ if (
+ // These native elements are focusable by default
+ component === 'a' ||
+ component === 'button' ||
+ component === 'input' ||
+ component === 'select' ||
+ component === 'textarea'
+ ) {
+ if (focusable === false || accessibilityDisabled === true) {
domProps.tabIndex = '-1';
- } else {
- domProps['data-focusable'] = true;
}
- } else if (role === 'button' || role === 'menuitem' || role === 'textbox') {
- if (accessible !== false && focusable) {
- domProps['data-focusable'] = true;
+ } else if (
+ // These roles are made focusable by default
+ role === 'button' ||
+ role === 'checkbox' ||
+ role === 'link' ||
+ role === 'menuitem' ||
+ role === 'radio' ||
+ role === 'textbox' ||
+ role === 'switch'
+ ) {
+ if (focusable !== false) {
domProps.tabIndex = '0';
}
} else {
- if (accessible === true && focusable) {
- domProps['data-focusable'] = true;
+ // Everything else must explicitly set the prop
+ if (focusable === true) {
domProps.tabIndex = '0';
}
}
@@ -222,11 +225,11 @@ const createDOMProps = (component, props) => {
isNativeInteractiveElement ||
role === 'button' ||
role === 'menuitem' ||
- (accessible === true && focusable)
+ (focusable === true && !accessibilityDisabled)
) {
const onClick = domProps.onClick;
if (onClick != null) {
- if (disabled) {
+ if (accessibilityDisabled) {
// Prevent click propagating if the element is disabled. See #1757
domProps.onClick = function(e) {
e.stopPropagation();