From 3d8e5a07466ed8ad367eed1f6a6c26a7516ab183 Mon Sep 17 00:00:00 2001
From: Clay Diffrient <cdiffrient@instructure.com>
Date: Sat, 8 Oct 2016 08:05:39 -0600
Subject: [PATCH] [added] Add contentLabel prop to put aria-label on modal
 content

This makes the modal better follow aria guidelines for dialogs.
It also gives screenreader users some identity for the modal after
it opens.

closes #236
---
 README.md                     | 9 +++++++--
 lib/components/Modal.js       | 3 ++-
 lib/components/ModalPortal.js | 3 ++-
 specs/Modal.spec.js           | 7 +++++++
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 372498ab..12af9257 100644
--- a/README.md
+++ b/README.md
@@ -19,6 +19,7 @@ npm install --save react-modal
   onRequestClose={requestCloseFn}
   closeTimeoutMS={n}
   style={customStyle}
+  contentLabel="Modal"
 >
   <h1>Modal Content</h1>
   <p>Etc.</p>
@@ -136,7 +137,9 @@ var App = React.createClass({
           isOpen={this.state.modalIsOpen}
           onAfterOpen={this.afterOpenModal}
           onRequestClose={this.closeModal}
-          style={customStyles} >
+          style={customStyles}
+          contentLabel="Example Modal"
+        >
 
           <h2 ref="subtitle">Hello</h2>
           <button onClick={this.closeModal}>close</button>
@@ -171,7 +174,9 @@ pass the 'shouldCloseOnOverlayClick' prop with 'false' value.
   onRequestClose={requestCloseFn}
   closeTimeoutMS={n}
   shouldCloseOnOverlayClick={false}
-  style={customStyle}>
+  style={customStyle}
+  contentLabel="No Overlay Click Modal"
+>
 
   <h1>Force Modal</h1>
   <p>Modal cannot be closed when clicking the overlay area</p>
diff --git a/lib/components/Modal.js b/lib/components/Modal.js
index 3bd28dd5..5a7c900b 100644
--- a/lib/components/Modal.js
+++ b/lib/components/Modal.js
@@ -37,7 +37,8 @@ var Modal = React.createClass({
     closeTimeoutMS: React.PropTypes.number,
     ariaHideApp: React.PropTypes.bool,
     shouldCloseOnOverlayClick: React.PropTypes.bool,
-    role: React.PropTypes.string
+    role: React.PropTypes.string,
+    contentLabel: React.PropTypes.string.isRequired
   },
 
   getDefaultProps: function () {
diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js
index 911ca6b4..2f73af5c 100644
--- a/lib/components/ModalPortal.js
+++ b/lib/components/ModalPortal.js
@@ -202,7 +202,8 @@ var ModalPortal = module.exports = React.createClass({
           onKeyDown: this.handleKeyDown,
           onMouseDown: this.handleContentMouseDown,
           onMouseUp: this.handleContentMouseUp,
-          role: this.props.role
+          role: this.props.role,
+          "aria-label": this.props.contentLabel
         },
           this.props.children
         )
diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
index 31b9a22b..eee8df08 100644
--- a/specs/Modal.spec.js
+++ b/specs/Modal.spec.js
@@ -65,6 +65,13 @@ describe('Modal', function () {
     unmountModal();
   });
 
+  it('renders the modal with a aria-label based on the contentLabel prop', function () {
+    var child = 'I am a child of Modal, and he has sent me here...';
+    var component = renderModal({isOpen: true, contentLabel: 'Special Modal'}, child);
+    equal(component.portal.refs.content.getAttribute('aria-label'), 'Special Modal');
+    unmountModal();
+  });
+
   it('has default props', function() {
     var node = document.createElement('div');
     Modal.setAppElement(document.createElement('div'));