[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

Author: claydiffrient

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 () {

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
         )

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'));