revisit accessibilityRole=button to button mapping

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

@@ -1,75 +1,73 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/Button prop "accessibilityLabel" 1`] = `
-<div
+<button
   aria-label="accessibility label"
-  class="css-cursor-18t94o4 css-view-1dbjc4n r-backgroundColor-14sbq61 r-borderRadius-1jkafct r-cursor-1loqt21 r-touchAction-1otgn73 r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
+  class="css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n r-backgroundColor-14sbq61 r-borderRadius-1jkafct r-cursor-1loqt21 r-touchAction-1otgn73 r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
   role="button"
   style="transition-duration: 0s;"
-  tabindex="0"
 >
   <div
     class="css-text-901oao r-color-jwli3a r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw"
     dir="auto"
   />
-</div>
+</button>
 `;
 
 exports[`components/Button prop "color" 1`] = `
-<div
-  class="css-cursor-18t94o4 css-view-1dbjc4n r-borderRadius-1jkafct r-cursor-1loqt21 r-touchAction-1otgn73 r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
+<button
+  class="css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n r-borderRadius-1jkafct r-cursor-1loqt21 r-touchAction-1otgn73 r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
   role="button"
   style="background-color: rgb(0, 0, 255); transition-duration: 0s;"
-  tabindex="0"
 >
   <div
     class="css-text-901oao r-color-jwli3a r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw"
     dir="auto"
   />
-</div>
+</button>
 `;
 
 exports[`components/Button prop "disabled" 1`] = `
-<div
+<button
   aria-disabled="true"
-  class="css-view-1dbjc4n r-backgroundColor-11mpjr4 r-borderRadius-1jkafct r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
+  class="css-reset-4rbku5 css-view-1dbjc4n r-backgroundColor-11mpjr4 r-borderRadius-1jkafct r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
+  disabled=""
   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"
     dir="auto"
   />
-</div>
+</button>
 `;
 
 exports[`components/Button prop "testID" 1`] = `
-<div
-  class="css-cursor-18t94o4 css-view-1dbjc4n r-backgroundColor-14sbq61 r-borderRadius-1jkafct r-cursor-1loqt21 r-touchAction-1otgn73 r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
+<button
+  class="css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n r-backgroundColor-14sbq61 r-borderRadius-1jkafct r-cursor-1loqt21 r-touchAction-1otgn73 r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
   data-testid="123"
   role="button"
   style="transition-duration: 0s;"
-  tabindex="0"
 >
   <div
     class="css-text-901oao r-color-jwli3a r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw"
     dir="auto"
   />
-</div>
+</button>
 `;
 
 exports[`components/Button prop "title" 1`] = `
-<div
-  class="css-cursor-18t94o4 css-view-1dbjc4n r-backgroundColor-14sbq61 r-borderRadius-1jkafct r-cursor-1loqt21 r-touchAction-1otgn73 r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
+<button
+  class="css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n r-backgroundColor-14sbq61 r-borderRadius-1jkafct r-cursor-1loqt21 r-touchAction-1otgn73 r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
   role="button"
   style="transition-duration: 0s;"
-  tabindex="0"
 >
   <div
     class="css-text-901oao r-color-jwli3a r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw"
     dir="auto"
   >
     Click me
   </div>
-</div>
+</button>
 `;

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

@@ -113,10 +113,9 @@ exports[`components/Pressable prop "accessibilityRole" value alters HTML element
 `;
 
 exports[`components/Pressable prop "accessibilityRole" value is "button" 1`] = `
-<div
-  class="css-cursor-18t94o4 css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
+<button
+  class="css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n r-cursor-1loqt21 r-touchAction-1otgn73"
   role="button"
-  tabindex="0"
 />
 `;
 

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

@@ -59,11 +59,10 @@ exports[`components/Text prop "accessibilityRole" value alters HTML element 1`]
 `;
 
 exports[`components/Text prop "accessibilityRole" value is "button" 1`] = `
-<div
-  class="css-cursor-18t94o4 css-text-901oao"
+<button
+  class="css-reset-4rbku5 css-cursor-18t94o4 css-text-901oao"
   dir="auto"
   role="button"
-  tabindex="0"
 />
 `;
 

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

@@ -53,10 +53,9 @@ exports[`components/View prop "accessibilityRole" value alters HTML element 1`]
 `;
 
 exports[`components/View prop "accessibilityRole" value is "button" 1`] = `
-<div
-  class="css-cursor-18t94o4 css-view-1dbjc4n"
+<button
+  class="css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n"
   role="button"
-  tabindex="0"
 />
 `;
 

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

@@ -341,8 +341,9 @@ describe('exports/createElement', () => {
       const { container: isEmpty } = render(createElement('div', { accessibilityRole: null }));
       expect(getAttribute(isEmpty, 'role')).toBeNull();
       const { container: hasValue } = render(createElement('div', { accessibilityRole: 'button' }));
+      expect(hasValue.firstChild.nodeName).toBe('BUTTON');
       expect(getAttribute(hasValue, 'role')).toBe('button');
-      expect(getAttribute(hasValue, 'tabIndex')).toBe('0');
+      expect(getAttribute(hasValue, 'tabIndex')).toBeNull();
       const { container: roleIsNone } = render(createElement('div', { accessibilityRole: 'none' }));
       expect(getAttribute(roleIsNone, 'role')).toBe('presentation');
     });
@@ -481,12 +482,12 @@ describe('exports/createElement', () => {
       const { container: isFocusableRole } = render(
         createElement('div', { accessibilityRole: 'button', focusable: true })
       );
-      expect(getAttribute(isFocusableRole, 'tabindex')).toBe('0');
+      expect(getAttribute(isFocusableRole, 'tabindex')).toBeNull();
 
       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/AccessibilityUtil/__tests__/propsToAccessibilityComponent-test.js

@@ -8,7 +8,7 @@ describe('modules/AccessibilityUtil/propsToAccessibilityComponent', () => {
   });
 
   test('when "accessibilityRole" is "button"', () => {
-    expect(propsToAccessibilityComponent({ accessibilityRole: 'button' })).toBeUndefined();
+    expect(propsToAccessibilityComponent({ accessibilityRole: 'button' })).toEqual('button');
   });
 
   test('when "accessibilityRole" is "heading"', () => {

packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js

@@ -27,7 +27,8 @@ const roleComponents = {
   main: 'main',
   navigation: 'nav',
   region: 'section',
-  strong: 'strong'
+  strong: 'strong',
+  button: 'button'
 };
 
 const emptyObject = {};