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" >

Modal Content

Etc.

@@ -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" + >

Hello

@@ -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" +>

Force Modal

Modal cannot be closed when clicking the overlay area

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