[fix] Allow focusable={false} to set tabIndex="-1"

Close #2046

Author: necolas

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"
 >
   <div
     class="css-text-901oao r-color-c68hjy r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw"

packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap

@@ -18,16 +18,6 @@ exports[`components/Image prop "accessibilityLabel" 1`] = `
 </div>
 `;
 
-exports[`components/Image prop "accessible" 1`] = `
-<div
-  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
-`;
-
 exports[`components/Image prop "blurRadius" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
@@ -132,6 +122,17 @@ exports[`components/Image prop "draggable" 1`] = `
 </div>
 `;
 
+exports[`components/Image prop "focusable" 1`] = `
+<div
+  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  tabindex="0"
+>
+  <div
+    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+  />
+</div>
+`;
+
 exports[`components/Image prop "nativeID" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"

packages/react-native-web/src/exports/Image/__tests__/index-test.js

@@ -29,11 +29,6 @@ describe('components/Image', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  test('prop "accessible"', () => {
-    const { container } = render(<Image accessible={false} />);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
   test('prop "blurRadius"', () => {
     const defaultSource = { uri: 'https://google.com/favicon.ico' };
     const { container } = render(<Image blurRadius={5} defaultSource={defaultSource} />);
@@ -83,6 +78,11 @@ describe('components/Image', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  test('prop "focusable"', () => {
+    const { container } = render(<Image focusable={true} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   test('prop "nativeID"', () => {
     const { container } = render(<Image nativeID="nativeID" />);
     expect(container.firstChild).toMatchSnapshot();

packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap

@@ -132,6 +132,7 @@ exports[`components/Pressable prop "disabled" 1`] = `
 <div
   aria-disabled="true"
   class="css-view-1dbjc4n"
+  tabindex="-1"
 />
 `;
 

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

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' })
+        );
       });
     });
   });

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' ||