diff --git a/packages/react-native-web/src/exports/Button/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Button/__tests__/__snapshots__/index-test.js.snap index b947cf44..f0c0e578 100644 --- a/packages/react-native-web/src/exports/Button/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/Button/__tests__/__snapshots__/index-test.js.snap @@ -35,6 +35,7 @@ exports[`components/Button prop "disabled" 1`] = ` class="css-view-1dbjc4n r-backgroundColor-11mpjr4 r-borderRadius-1jkafct r-transitionProperty-1i6wzkk r-userSelect-lrvibr" role="button" style="transition-duration: 0s;" + tabindex="-1" >
`; -exports[`components/Image prop "accessible" 1`] = ` -
-
-
-`; - exports[`components/Image prop "blurRadius" 1`] = `
`; +exports[`components/Image prop "focusable" 1`] = ` +
+
+
+`; + exports[`components/Image prop "nativeID" 1`] = `
{ expect(container.firstChild).toMatchSnapshot(); }); - test('prop "accessible"', () => { - const { container } = render(); - expect(container.firstChild).toMatchSnapshot(); - }); - test('prop "blurRadius"', () => { const defaultSource = { uri: 'https://google.com/favicon.ico' }; const { container } = render(); @@ -83,6 +78,11 @@ describe('components/Image', () => { expect(container.firstChild).toMatchSnapshot(); }); + test('prop "focusable"', () => { + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); + }); + test('prop "nativeID"', () => { const { container } = render(); expect(container.firstChild).toMatchSnapshot(); diff --git a/packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap index 52417b3b..3c1abf40 100644 --- a/packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap @@ -132,6 +132,7 @@ exports[`components/Pressable prop "disabled" 1`] = `
`; diff --git a/packages/react-native-web/src/exports/createElement/__tests__/index-test.js b/packages/react-native-web/src/exports/createElement/__tests__/index-test.js index 6ff5d737..c94b02c0 100644 --- a/packages/react-native-web/src/exports/createElement/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/createElement/__tests__/index-test.js @@ -515,7 +515,7 @@ describe('exports/createElement', () => { const { container: isFalseFocusableRole } = render( createElement('div', { accessibilityRole: 'button', focusable: false }) ); - expect(getAttribute(isFalseFocusableRole, 'tabindex')).toBeNull(); + expect(getAttribute(isFalseFocusableRole, 'tabindex')).toBe('-1'); }); }); }); 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 5b5019ce..2055f0a8 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 @@ -27,7 +27,7 @@ describe('modules/createDOMProps', () => { test('when "focusable" is false', () => { expect(createProps({ accessibilityRole, focusable: false })).toEqual( - expect.not.objectContaining({ tabIndex: '-1' }) + expect.objectContaining({ tabIndex: '-1' }) ); }); @@ -58,8 +58,8 @@ describe('modules/createDOMProps', () => { }); test('when "focusable" is false', () => { - expect(createProps({ accessibilityRole, focusable: false })).not.toEqual( - expect.objectContaining({ tabIndex: '0' }) + expect(createProps({ accessibilityRole, focusable: false })).toEqual( + expect.objectContaining({ tabIndex: '-1' }) ); }); @@ -92,7 +92,9 @@ describe('modules/createDOMProps', () => { }); test('when "focusable" is false', () => { - expect(createProps({ focusable: false })).toEqual({}); + expect(createProps({ focusable: false })).toEqual( + expect.objectContaining({ tabIndex: '-1' }) + ); }); }); }); diff --git a/packages/react-native-web/src/modules/createDOMProps/index.js b/packages/react-native-web/src/modules/createDOMProps/index.js index ffc51262..98e11c9e 100644 --- a/packages/react-native-web/src/modules/createDOMProps/index.js +++ b/packages/react-native-web/src/modules/createDOMProps/index.js @@ -346,6 +346,9 @@ const createDOMProps = (elementType, props) => { // FOCUS // "focusable" indicates that an element may be a keyboard tab-stop. const _focusable = focusable != null ? focusable : accessible; + if (_focusable === false) { + domProps.tabIndex = '-1'; + } if ( // These native elements are focusable by default elementType === 'a' ||