[change] Map 'button' and 'paragraph' role to HTML elements

Fix #1899
Close #1944

Author: necolas

packages/react-native-web-docs/src/pages/docs/concepts/accessibility.md

@@ -277,13 +277,11 @@ The value of the `accessibilityRole` prop is used to infer an [analogous HTML el
 </View>
 /*
 <article>
-  <div role="paragraph">This is an article</div>
+  <p>This is an article</p>
 </article>
 */
 ```
 
-The `"paragraph"` role isn't mapped to a `<p>` tag because it's an HTML conformance error to include block-level children within the element; both `Text` and `View` support block-level children.
-
 If the `"heading"` role is combined with an `accessibilityLevel`, the equivalent HTML heading element is rendered. Otherwise, it is rendered as `<h1>`.
 
 ```jsx

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

@@ -1,76 +1,78 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/Button prop "accessibilityLabel" 1`] = `
-<div
+<button
   aria-label="accessibility label"
   class="css-view-175oi2r r-transitionProperty-1i6wzkk r-userSelect-lrvibr r-cursor-1loqt21 r-touchAction-1otgn73 r-backgroundColor-14sbq61 r-borderRadius-1jkafct"
   role="button"
   style="transition-duration: 0s;"
-  tabindex="0"
+  type="button"
 >
   <div
     class="css-text-1rynq56 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
+<button
   class="css-view-175oi2r r-transitionProperty-1i6wzkk r-userSelect-lrvibr r-cursor-1loqt21 r-touchAction-1otgn73 r-borderRadius-1jkafct"
   role="button"
   style="background-color: rgb(0, 0, 255); transition-duration: 0s;"
-  tabindex="0"
+  type="button"
 >
   <div
     class="css-text-1rynq56 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-175oi2r r-transitionProperty-1i6wzkk r-userSelect-lrvibr r-borderRadius-1jkafct r-backgroundColor-11mpjr4 r-pointerEvents-633pao"
+  disabled=""
   role="button"
   style="transition-duration: 0s;"
   tabindex="-1"
+  type="button"
 >
   <div
     class="css-text-1rynq56 r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw r-color-c68hjy"
     dir="auto"
   />
-</div>
+</button>
 `;
 
 exports[`components/Button prop "testID" 1`] = `
-<div
+<button
   class="css-view-175oi2r r-transitionProperty-1i6wzkk r-userSelect-lrvibr r-cursor-1loqt21 r-touchAction-1otgn73 r-backgroundColor-14sbq61 r-borderRadius-1jkafct"
   data-testid="123"
   role="button"
   style="transition-duration: 0s;"
-  tabindex="0"
+  type="button"
 >
   <div
     class="css-text-1rynq56 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
+<button
   class="css-view-175oi2r r-transitionProperty-1i6wzkk r-userSelect-lrvibr r-cursor-1loqt21 r-touchAction-1otgn73 r-backgroundColor-14sbq61 r-borderRadius-1jkafct"
   role="button"
   style="transition-duration: 0s;"
-  tabindex="0"
+  type="button"
 >
   <div
     class="css-text-1rynq56 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

@@ -134,10 +134,10 @@ exports[`components/Pressable prop "accessibilityRole" value alters HTML element
 `;
 
 exports[`components/Pressable prop "accessibilityRole" value is "button" 1`] = `
-<div
+<button
   class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   role="button"
-  tabindex="0"
+  type="button"
 />
 `;
 

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

@@ -52,11 +52,11 @@ exports[`components/Text prop "accessibilityRole" value alters HTML element 1`]
 `;
 
 exports[`components/Text prop "accessibilityRole" value is "button" 1`] = `
-<div
+<button
   class="css-text-1rynq56"
   dir="auto"
   role="button"
-  tabindex="0"
+  type="button"
 />
 `;
 

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

@@ -46,10 +46,10 @@ exports[`components/View prop "accessibilityRole" value alters HTML element 1`]
 `;
 
 exports[`components/View prop "accessibilityRole" value is "button" 1`] = `
-<div
+<button
   class="css-view-175oi2r"
   role="button"
-  tabindex="0"
+  type="button"
 />
 `;
 

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

@@ -471,7 +471,6 @@ describe('exports/createElement', () => {
         createElement('div', { accessibilityRole: 'button' })
       );
       expect(getAttribute(hasValue, 'role')).toBe('button');
-      expect(getAttribute(hasValue, 'tabIndex')).toBe('0');
       const { container: roleIsNone } = render(
         createElement('div', { accessibilityRole: 'none' })
       );
@@ -649,11 +648,6 @@ describe('exports/createElement', () => {
       );
       expect(getAttribute(isTrueNativelyFocusable, 'tabindex')).toBeNull();
 
-      const { container: isFocusableRole } = render(
-        createElement('div', { accessibilityRole: 'button', focusable: true })
-      );
-      expect(getAttribute(isFocusableRole, 'tabindex')).toBe('0');
-
       const { container: isFalseFocusableRole } = render(
         createElement('div', { accessibilityRole: 'button', focusable: false })
       );

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

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

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

@@ -13,6 +13,7 @@ const roleComponents = {
   article: 'article',
   banner: 'header',
   blockquote: 'blockquote',
+  button: 'button',
   code: 'code',
   complementary: 'aside',
   contentinfo: 'footer',
@@ -25,6 +26,7 @@ const roleComponents = {
   listitem: 'li',
   main: 'main',
   navigation: 'nav',
+  paragraph: 'p',
   region: 'section',
   strong: 'strong'
 };

packages/react-native-web/src/modules/createDOMProps/index.js

@@ -349,6 +349,9 @@ const createDOMProps = (elementType, props, options) => {
     domProps['data-testid'] = testID;
   }
 
+  if (domProps.type == null && elementType === 'button') {
+    domProps.type = 'button';
+  }
   return domProps;
 };