[fix] createElement uses provided function component

If the component provided to 'createElement' is not a string alias for a
DOM component, it will no longer attempt to replace that component with
a DOM component inferred from the 'accessibility{Component,Role,Traits}'
prop.

Fix #895

Author: necolas

packages/react-native-web/src/exports/AppRegistry/index.js

@@ -67,7 +67,7 @@ export default class AppRegistry {
           appParameters.initialProps || emptyObject,
           appParameters.rootTag,
           wrapperComponentProvider && wrapperComponentProvider(appParameters),
-          appParameters.callback,
+          appParameters.callback
         )
     };
     return appKey;

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

@@ -1,7 +1,8 @@
 /* eslint-env jasmine, jest */
 
 import createElement from '..';
-import { shallow, render } from 'enzyme';
+import React from 'react';
+import { render, shallow } from 'enzyme';
 
 describe('modules/createElement', () => {
   test('it renders different DOM elements', () => {
@@ -23,9 +24,20 @@ describe('modules/createElement', () => {
     });
   });
 
-  describe('when ARIA role is "button"', () => {
+  describe('prop "accessibilityRole"', () => {
+    test('and string component type', () => {
+      const component = shallow(createElement('span', { accessibilityRole: 'link' }));
+      expect(component.find('a').length).toBe(1);
+    });
+
+    test('and function component type', () => {
+      const Custom = () => <div />;
+      const component = shallow(createElement(Custom, { accessibilityRole: 'link' }));
+      expect(component.find('div').length).toBe(1);
+    });
+
     [{ disabled: true }, { disabled: false }].forEach(({ disabled }) => {
-      describe(`and disabled is "${disabled}"`, () => {
+      describe(`value is "button" and disabled is "${disabled}"`, () => {
         [{ name: 'Enter', which: 13 }, { name: 'Space', which: 32 }].forEach(({ name, which }) => {
           test(`"onClick" is ${disabled ? 'not ' : ''}called when "${name}" is pressed`, () => {
             const onClick = jest.fn();

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

@@ -83,7 +83,10 @@ const adjustProps = domProps => {
 
 const createElement = (component, props, ...children) => {
   // use equivalent platform elements where possible
-  const accessibilityComponent = AccessibilityUtil.propsToAccessibilityComponent(props);
+  let accessibilityComponent;
+  if (component && component.constructor === String) {
+    accessibilityComponent = AccessibilityUtil.propsToAccessibilityComponent(props);
+  }
   const Component = accessibilityComponent || component;
   const domProps = createDOMProps(Component, props);
   adjustProps(domProps);