diff --git a/src/modules/createDOMElement/__tests__/__snapshots__/index-test.js.snap b/src/modules/createDOMElement/__tests__/__snapshots__/index-test.js.snap index a29c0c72..2a0ea6fd 100644 --- a/src/modules/createDOMElement/__tests__/__snapshots__/index-test.js.snap +++ b/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`] = ` +

+`; + +exports[`modules/createDOMElement prop "accessibilityRole" headings 2`] = ` +

+`; + exports[`modules/createDOMElement prop "accessibilityRole" link and target="_blank" 1`] = ` { 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', { diff --git a/src/modules/createDOMElement/index.js b/src/modules/createDOMElement/index.js index 7bcc3f1a..3f964fde 100644 --- a/src/modules/createDOMElement/index.js +++ b/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));