Bug/react modal default

docs.md

@@ -1653,6 +1653,8 @@ Note: this component requires custom styles. These styles can be imported from t
 ### Parameters
 
 *   `onClose` **[Function][139]** A handler for closing the modal. May be triggered via the close button, and outside click, or a key press.
+*   `className` **([String][138] | [Object][144])** Additional class to append to the base class of the modal (modal-inner). See [React Modal's style documentation][167] for more details. (optional, default `""`)
+*   `overlayClassName` **([String][138] | [Object][144])** Additional class to append to the base class of the modal overlay (modal-fade-screen). See [React Modal's style documentation][167] for more details. (optional, default `""`)
 *   `isOpen` **[Boolean][140]** A flag for showing the modal. (optional, default `true`)
 *   `preventClose` **[Boolean][140]** A flag for preventing the modal from being closed (close button, escape, or overlay click). (optional, default `false`)
 
@@ -2011,3 +2013,5 @@ function MyView () {
 [165]: https://github.com/reactjs/react-modal
 
 [166]: https://github.com/reactjs/react-modal/issues/25
+
+[167]: http://reactcommunity.org/react-modal/styles/classes/#for-the-content-and-overlay

migration-guides/v7.0.0.md

@@ -17,6 +17,7 @@ This version contains the following breaking changes:
 13. `<FlashMessageContainer />` component invokes `onDismiss` with redux-flash message object and allows message-specific overrides
 14. `<Button />` and `<SubmitButton />` now accept a forwarded ref
 15. `<Modal />` no longer overwrites the default modal or overlay class
+16. `<Modal />` targets #root instead of the body
 
 The required changes for each item are detailed below.
 
@@ -367,4 +368,16 @@ Prior to v7, passing in a custom class name to the modal would override the defa
   // add additional custom styles
 }
 ```
-This logic applies to both the `className` and `overlayClassName` props, whether the use passes in a string or an object.
+This logic applies to both the `className` and `overlayClassName` props, whether the use passes in a string or an object.
+
+## 16. `<Modal />` targets #root instead of the body
+To make the Modal component more accessible, content needs to be hidden while the modal is open. `react-modal` accomplishes this by applying this attribute to the `appElement`, defined by the user. Previously, this library was relying on `body` to serve as that element. However, Firefox will ignore _all_ content when the body has that applied. Now, the `#root` selector is used.
+
+This should work seamlessly with any project that started from the LPL client template. If for whatever reason your application does **not** have an element with an id of `root`, then you can either add that id to one of the top-most elements or you can override the `appElement` prop with a target that's appropriate for your application. E.g.,
+
+```jsx
+function LocalModal(props) {
+  const el = document.querySelector('#main')
+  return <Modal appElement={el} {...props} />
+}
+```

src/modal.js

@@ -14,6 +14,8 @@ import classnames from 'classnames'
  * @name Modal
  * @type Function
  * @param {Function} onClose - A handler for closing the modal. May be triggered via the close button, and outside click, or a key press.
+ * @param {String|Object} [className=""] - Additional class to append to the base class of the modal (modal-inner). See [React Modal's style documentation](http://reactcommunity.org/react-modal/styles/classes/#for-the-content-and-overlay) for more details.
+ * @param {String|Object} [overlayClassName=""] - Additional class to append to the base class of the modal overlay (modal-fade-screen). See [React Modal's style documentation](http://reactcommunity.org/react-modal/styles/classes/#for-the-content-and-overlay) for more details.
  * @param {Boolean} [isOpen=true] - A flag for showing the modal.
  * @param {Boolean} [preventClose=false] - A flag for preventing the modal from being closed (close button, escape, or overlay click).
  *
@@ -56,6 +58,8 @@ const propTypes = {
 }
 
 const defaultProps = {
+  className: "",
+  overlayClassName: "",
   isOpen: true,
   preventClose: false,
 }
@@ -64,7 +68,7 @@ function getRootElement() {
   // Skip in SSR mode
   if (isServer()) return
   // eslint-disable-next-line no-undef
-  return window.document.querySelector('body')
+  return window.document.querySelector('#root')
 }
 
 function wrapClassName(base, additional) {
@@ -88,7 +92,7 @@ function Modal({ isOpen, onClose, preventClose, children, className, overlayClas
       overlayClassName={wrapClassName("modal-fade-screen", overlayClassName)}
       bodyOpenClassName="modal-open"
       appElement={getRootElement()}
-      ariaHideApp={isServer()} // Opt out of setting appElement on the server.
+      ariaHideApp={!isServer()} // Opt out of manipulating appElement on the server.
       shouldCloseOnEsc={canClose}
       shouldCloseOnOverlayClick={canClose}
       {...rest}