- Adding warning to Modal component to let users know when Settings.setAppElement was not set.

- Add ariaHideApp element as a way to opt out of having to set App Element. To opt out, ariaHideApp=false must be set.

Author: David

components/app-launcher/index.jsx

@@ -31,6 +31,7 @@ const defaultProps = {
 	assistiveText: {
 		trigger: 'Open App Launcher',
 	},
+	ariaHideApp: true,
 	title: 'App Launcher',
 };
 
@@ -82,6 +83,10 @@ const AppLauncher = createReactClass({
 		assistiveText: PropTypes.shape({
 			trigger: PropTypes.string,
 		}),
+		/**
+		 * Boolean indicating if the appElement should be hidden.
+		 */
+		ariaHideApp: PropTypes.bool,
 		/**
 		 * One or more `<AppLauncherSection />`s each containing one or more `<AppLauncherTile />`s
 		 */
@@ -248,6 +253,7 @@ const AppLauncher = createReactClass({
 					</button>
 				</div>
 				<Modal
+					ariaHideApp={this.props.ariaHideApp}
 					contentClassName="slds-modal__content slds-app-launcher__content slds-p-around--medium"
 					contentStyle={{ minHeight: modalContentStaticHeight }}
 					isOpen={isOpen}

components/component-docs.json

@@ -374,6 +374,17 @@
                     "computed": false
                 }
             },
+            "ariaHideApp": {
+                "type": {
+                    "name": "bool"
+                },
+                "required": false,
+                "description": "Boolean indicating if the appElement should be hidden. _Tested with snapshot testing._",
+                "defaultValue": {
+                    "value": "true",
+                    "computed": false
+                }
+            },
             "children": {
                 "type": {
                     "name": "node"
@@ -7336,6 +7347,17 @@
                     "computed": false
                 }
             },
+            "ariaHideApp": {
+                "type": {
+                    "name": "bool"
+                },
+                "required": false,
+                "description": "Boolean indicating if the appElement should be hidden. _Tested with snapshot testing._",
+                "defaultValue": {
+                    "value": "true",
+                    "computed": false
+                }
+            },
             "assistiveText": {
                 "type": {
                     "name": "shape",

components/modal/index.jsx

@@ -24,6 +24,8 @@ import shortid from 'shortid';
 // This component's `checkProps` which issues warnings to developers about properties when in development mode (similar to React's built in development tools)
 import checkProps from './check-props';
 
+import checkAppElementIsSet from '../../utilities/warning/check-app-element-set';
+
 import Button from '../button';
 
 import { MODAL } from '../../utilities/constants';
@@ -33,6 +35,10 @@ const propTypes = {
 	 * Vertical alignment of Modal.
 	 */
 	align: PropTypes.oneOf(['top', 'center']),
+	/**
+	 * Boolean indicating if the appElement should be hidden.
+	 */
+	ariaHideApp: PropTypes.bool,
 	/**
 	 * **Assistive text for accessibility.**
 	 * This object is merged with the default props object on every render.
@@ -150,6 +156,7 @@ const defaultProps = {
 		closeButton: 'Close',
 	},
 	align: 'center',
+	ariaHideApp: true,
 	dismissible: true,
 };
 
@@ -181,6 +188,9 @@ class Modal extends React.Component {
 	componentWillMount () {
 		this.generatedId = shortid.generate();
 		checkProps(MODAL, this.props);
+		if (this.props.ariaHideApp) {
+			checkAppElementIsSet();
+		}
 	}
 
 	componentDidMount () {
@@ -450,6 +460,7 @@ class Modal extends React.Component {
 
 		return (
 			<ReactModal
+				ariaHideApp={this.props.ariaHideApp}
 				contentLabel="Modal"
 				isOpen={this.props.isOpen}
 				onRequestClose={this.closeModal}

utilities/warning/check-app-element-set.js

@@ -0,0 +1,24 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
+/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+/* eslint-disable import/no-mutable-exports */
+
+import warning from 'warning';
+import Settings from '../../components/settings';
+
+let checkAppElementIsSet = function () {};
+
+if (process.env.NODE_ENV !== 'production') {
+	checkAppElementIsSet = function () {
+		const appElement = Settings.getAppElement();
+		/* eslint-disable max-len */
+		warning(
+			!!appElement,
+			'[Design System React] App element is not defined. Please use Settings.setAppElement(el).' +
+				' By default, `Modal` will add `aria-hidden=true` to the `body` tag, but this disables some assistive technologies.' +
+				' To prevent this you can add Settings.setAppElement(el) to your application with `el` being the root node of your application' +
+				' that you would like to hide from assistive technologies when the `Modal` is open.'
+		);
+	};
+}
+
+export default checkAppElementIsSet;