[change] use 'aria-level' to determine DOM heading tag

Fix #401
Close #402

src/modules/createDOMElement/__tests__/__snapshots__/index-test.js.snap

@@ -45,6 +45,19 @@ exports[`modules/createDOMElement prop "accessibilityRole" compatibility with ac
 />
 `;
 
+exports[`modules/createDOMElement prop "accessibilityRole" headings 1`] = `
+<h1
+  role="heading"
+/>
+`;
+
+exports[`modules/createDOMElement prop "accessibilityRole" headings 2`] = `
+<h3
+  aria-level="3"
+  role="heading"
+/>
+`;
+
 exports[`modules/createDOMElement prop "accessibilityRole" link and target="_blank" 1`] = `
 <a
   rel=" noopener noreferrer"

src/modules/createDOMElement/__tests__/index-test.js

@@ -34,6 +34,16 @@ describe('modules/createDOMElement', () => {
       expect(component.toJSON()).toMatchSnapshot();
     });
 
+    test('headings', () => {
+      let component = renderer.create(createDOMElement('div', { accessibilityRole: 'heading' }));
+      expect(component.toJSON()).toMatchSnapshot();
+
+      component = renderer.create(
+        createDOMElement('div', { accessibilityRole: 'heading', 'aria-level': '3' })
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
     test('link and target="_blank"', () => {
       const component = renderer.create(
         createDOMElement('span', {

src/modules/createDOMElement/index.js

@@ -15,7 +15,6 @@ const roleComponents = {
   complementary: 'aside',
   contentinfo: 'footer',
   form: 'form',
-  heading: 'h1',
   link: 'a',
   list: 'ul',
   listitem: 'li',
@@ -52,10 +51,18 @@ const wrapEventHandler = handler => e => {
   return handler(e);
 };
 
+const getAccessibilityComponent = (props = emptyObject) => {
+  const role = getAccessibilityRole(props);
+  if (role === 'heading') {
+    const level = props['aria-level'] || 1;
+    return `h${level}`;
+  }
+  return roleComponents[role]
+};
+
 const createDOMElement = (component, rnProps) => {
   // use equivalent platform elements where possible
-  const role = getAccessibilityRole(rnProps || emptyObject);
-  const accessibilityComponent = role && roleComponents[role];
+  const accessibilityComponent = getAccessibilityComponent(rnProps);
   const Component = accessibilityComponent || component;
 
   const domProps = createDOMProps(rnProps, style => StyleRegistry.resolve(style));