Omit redundant role="heading" on native heading elements (#2898)

Author: bencripps

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

@@ -477,6 +477,23 @@ describe('exports/createElement', () => {
       expect(getAttribute(roleIsNone, 'role')).toBe('presentation');
     });
 
+    test('accessibilityRole "header" renders a native heading without role="heading"', () => {
+      const { container: heading } = render(
+        createElement('div', { accessibilityRole: 'header' })
+      );
+      expect(heading.firstChild.nodeName).toBe('H1');
+      expect(getAttribute(heading, 'role')).toBeNull();
+
+      const { container: levelTwo } = render(
+        createElement('div', {
+          accessibilityRole: 'header',
+          'aria-level': 2
+        })
+      );
+      expect(levelTwo.firstChild.nodeName).toBe('H2');
+      expect(getAttribute(levelTwo, 'role')).toBeNull();
+    });
+
     test('accessibilityRoleDescription', () => {
       const { container: isEmpty } = render(
         createElement('div', { accessibilityRoleDescription: null })

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

@@ -241,6 +241,17 @@ describe('modules/createDOMProps', () => {
     expect(props.role).toEqual('button');
   });
 
+  test('omits redundant role="heading" on native heading elements', () => {
+    expect(
+      createDOMProps('h1', { accessibilityRole: 'header' }).role
+    ).toBeUndefined();
+    expect(
+      createDOMProps('h3', { role: 'heading', 'aria-level': 3 }).role
+    ).toBeUndefined();
+    // Non-heading hosts still receive the ARIA role.
+    expect(createDOMProps('div', { role: 'heading' }).role).toEqual('heading');
+  });
+
   test('prop "nativeID" becomes "id"', () => {
     const nativeID = 'Example.nativeID';
     const props = createProps({ nativeID });

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

@@ -377,8 +377,21 @@ const createDOMProps = (elementType, props, options) => {
   }
 
   if (role != null) {
-    // 'presentation' synonym has wider browser support
-    domProps['role'] = role === 'none' ? 'presentation' : role;
+    // h1-h6 already have the heading role. An explicit role="heading" on
+    // them fails heading audits such as axe "page-has-heading-one".
+    const isNativeHeading =
+      role === 'heading' &&
+      (elementType === 'h1' ||
+        elementType === 'h2' ||
+        elementType === 'h3' ||
+        elementType === 'h4' ||
+        elementType === 'h5' ||
+        elementType === 'h6');
+
+    if (!isNativeHeading) {
+      // 'presentation' synonym has wider browser support
+      domProps['role'] = role === 'none' ? 'presentation' : role;
+    }
   }
 
   const _ariaRoleDescription =