File tree 4 files changed +18
-4
lines changed
4 files changed +18
-4
lines changed Original file line number Diff line number Diff line change @@ -19,6 +19,7 @@ npm install --save react-modal
19
19
onRequestClose ={requestCloseFn}
20
20
closeTimeoutMS ={n}
21
21
style ={customStyle}
22
+ contentLabel =" Modal"
22
23
>
23
24
<h1 >Modal Content</h1 >
24
25
<p >Etc.</p >
@@ -136,7 +137,9 @@ var App = React.createClass({
136
137
isOpen= {this .state .modalIsOpen }
137
138
onAfterOpen= {this .afterOpenModal }
138
139
onRequestClose= {this .closeModal }
139
- style= {customStyles} >
140
+ style= {customStyles}
141
+ contentLabel= " Example Modal"
142
+ >
140
143
141
144
< h2 ref= " subtitle" > Hello< / h2>
142
145
< button onClick= {this .closeModal }> close< / button>
@@ -171,7 +174,9 @@ pass the 'shouldCloseOnOverlayClick' prop with 'false' value.
171
174
onRequestClose ={requestCloseFn}
172
175
closeTimeoutMS ={n}
173
176
shouldCloseOnOverlayClick ={false}
174
- style ={customStyle}>
177
+ style ={customStyle}
178
+ contentLabel =" No Overlay Click Modal"
179
+ >
175
180
176
181
<h1 >Force Modal</h1 >
177
182
<p >Modal cannot be closed when clicking the overlay area</p >
Original file line number Diff line number Diff line change @@ -37,7 +37,8 @@ var Modal = React.createClass({
37
37
closeTimeoutMS : React . PropTypes . number ,
38
38
ariaHideApp : React . PropTypes . bool ,
39
39
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. 41
42
} ,
42
43
43
44
getDefaultProps : function ( ) {
Original file line number Diff line number Diff line change @@ -202,7 +202,8 @@ var ModalPortal = module.exports = React.createClass({
202
202
onKeyDown : this . handleKeyDown ,
203
203
onMouseDown : this . handleContentMouseDown ,
204
204
onMouseUp : this . handleContentMouseUp ,
205
- role : this . props . role
205
+ role : this . props . role ,
206
+ "aria-label" : this . props . contentLabel
206
207
} ,
207
208
this . props . children
208
209
)
Original file line number Diff line number Diff line change @@ -65,6 +65,13 @@ describe('Modal', function () {
65
65
unmountModal ( ) ;
66
66
} ) ;
67
67
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
+
68
75
it ( 'has default props' , function ( ) {
69
76
var node = document . createElement ( 'div' ) ;
70
77
Modal . setAppElement ( document . createElement ( 'div' ) ) ;
You can’t perform that action at this time.