[fix] Modal should pass through View props

Fix #2314

packages/react-native-web/src/exports/Modal/ModalContent.js

@@ -8,24 +8,27 @@
  * @flow
  */
 
+import type { ViewProps } from '../View';
+
 import * as React from 'react';
 import View from '../View';
 import StyleSheet from '../StyleSheet';
 import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
 const { canUseDOM } = ExecutionEnvironment;
 
-export type ModalContentProps = {|
+export type ModalContentProps = {
+  ...ViewProps,
   active?: ?(boolean | (() => boolean)),
   children?: any,
   onRequestClose?: ?() => void,
   transparent?: ?boolean
-|};
+};
 
 const ModalContent: React.AbstractComponent<
   ModalContentProps,
   React.ElementRef<typeof View>
 > = React.forwardRef((props, forwardedRef) => {
-  const { active, children, onRequestClose, transparent } = props;
+  const { active, children, onRequestClose, transparent, ...rest } = props;
 
   React.useEffect(() => {
     if (canUseDOM) {
@@ -48,6 +51,7 @@ const ModalContent: React.AbstractComponent<
 
   return (
     <View
+      {...rest}
       accessibilityModal={true}
       accessibilityRole={active ? 'dialog' : null}
       ref={forwardedRef}

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/Modal forwards props 1`] = `
+<div
+  aria-label="label"
+  aria-labelledby="labelledby"
+  aria-modal="true"
+  class="css-view-175oi2r r-bottom-1p0dtai r-left-1d2f490 r-position-1xcajam r-right-zchlnj r-top-ipm5af r-backgroundColor-14lw9ot"
+  data-testid="root"
+  role="dialog"
+>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0 r-top-ipm5af"
+  />
+</div>
+`;

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

@@ -23,6 +23,13 @@ describe('components/Modal', () => {
     expect(insideElement).not.toBe(document.body);
   });
 
+  test('forwards props', () => {
+    const { getByTestId } = render(
+      <Modal accessibilityLabel="label" accessibilityLabelledBy="labelledby" testID="root" />
+    );
+    expect(getByTestId('root')).toMatchSnapshot();
+  });
+
   test('render children when visible', () => {
     const { getByTestId } = render(
       <Modal visible={true}>
@@ -218,7 +225,7 @@ describe('components/Modal', () => {
     }
   });
 
-  test('creates view with role="modal" when active', () => {
+  test('creates view with role="dialog" when active', () => {
     const { baseElement } = render(
       <Modal visible={true}>
         <a href={'#hello'}>Hello</a>

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

@@ -8,13 +8,16 @@
  * @flow
  */
 
+import type { ViewProps } from '../View';
+
 import * as React from 'react';
 import ModalPortal from './ModalPortal';
 import ModalAnimation from './ModalAnimation';
 import ModalContent from './ModalContent';
 import ModalFocusTrap from './ModalFocusTrap';
 
-export type ModalProps = {|
+export type ModalProps = {
+  ...ViewProps,
   animationType?: 'none' | 'slide' | 'fade',
   children: any,
   hardwareAccelerated?: ?boolean,
@@ -29,7 +32,7 @@ export type ModalProps = {|
   >,
   transparent?: ?boolean,
   visible?: ?boolean
-|};
+};
 
 let uniqueModalIdentifier = 0;
 
@@ -80,7 +83,8 @@ const Modal: React.AbstractComponent<
     onRequestClose,
     onShow,
     transparent,
-    visible = true
+    visible = true,
+    ...rest
   } = props;
 
   // Set a unique model identifier so we can correctly route
@@ -117,6 +121,7 @@ const Modal: React.AbstractComponent<
       >
         <ModalFocusTrap active={isActive}>
           <ModalContent
+            {...rest}
             active={isActive}
             onRequestClose={onRequestClose}
             ref={forwardedRef}