Skip to content

Commit 3d8e5a0

Browse files
committedOct 15, 2016
[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
1 parent 11c1fd6 commit 3d8e5a0

File tree

4 files changed

+18
-4
lines changed

4 files changed

+18
-4
lines changed
 

‎README.md

+7-2
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ npm install --save react-modal
1919
onRequestClose={requestCloseFn}
2020
closeTimeoutMS={n}
2121
style={customStyle}
22+
contentLabel="Modal"
2223
>
2324
<h1>Modal Content</h1>
2425
<p>Etc.</p>
@@ -136,7 +137,9 @@ var App = React.createClass({
136137
isOpen={this.state.modalIsOpen}
137138
onAfterOpen={this.afterOpenModal}
138139
onRequestClose={this.closeModal}
139-
style={customStyles} >
140+
style={customStyles}
141+
contentLabel="Example Modal"
142+
>
140143

141144
<h2 ref="subtitle">Hello</h2>
142145
<button onClick={this.closeModal}>close</button>
@@ -171,7 +174,9 @@ pass the 'shouldCloseOnOverlayClick' prop with 'false' value.
171174
onRequestClose={requestCloseFn}
172175
closeTimeoutMS={n}
173176
shouldCloseOnOverlayClick={false}
174-
style={customStyle}>
177+
style={customStyle}
178+
contentLabel="No Overlay Click Modal"
179+
>
175180

176181
<h1>Force Modal</h1>
177182
<p>Modal cannot be closed when clicking the overlay area</p>

‎lib/components/Modal.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@ var Modal = React.createClass({
3737
closeTimeoutMS: React.PropTypes.number,
3838
ariaHideApp: React.PropTypes.bool,
3939
shouldCloseOnOverlayClick: React.PropTypes.bool,
40-
role: React.PropTypes.string
40+
role: React.PropTypes.string,
41+
contentLabel: React.PropTypes.string.isRequired
Has comments. Original line has comments.
4142
},
4243

4344
getDefaultProps: function () {

‎lib/components/ModalPortal.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,8 @@ var ModalPortal = module.exports = React.createClass({
202202
onKeyDown: this.handleKeyDown,
203203
onMouseDown: this.handleContentMouseDown,
204204
onMouseUp: this.handleContentMouseUp,
205-
role: this.props.role
205+
role: this.props.role,
206+
"aria-label": this.props.contentLabel
206207
},
207208
this.props.children
208209
)

‎specs/Modal.spec.js

+7
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,13 @@ describe('Modal', function () {
6565
unmountModal();
6666
});
6767

68+
it('renders the modal with a aria-label based on the contentLabel prop', function () {
69+
var child = 'I am a child of Modal, and he has sent me here...';
70+
var component = renderModal({isOpen: true, contentLabel: 'Special Modal'}, child);
71+
equal(component.portal.refs.content.getAttribute('aria-label'), 'Special Modal');
72+
unmountModal();
73+
});
74+
6875
it('has default props', function() {
6976
var node = document.createElement('div');
7077
Modal.setAppElement(document.createElement('div'));

0 commit comments

Comments
 (0)
Please sign in to comment.