feat(modals): Modals are more accessible

Adds tabbing within an open modal and aria roles and states. Signed-off-by: Kenny Wang <kwang@pivotal.io>
pivotal-cf · Aug 20, 2015 · 08de4ff · 08de4ff
1 parent 255ccf9
commit 08de4ff
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 22 deletions.
diff --git a/spec/pivotal-ui-react/modals/modals_spec.js b/spec/pivotal-ui-react/modals/modals_spec.js
@@ -21,7 +21,6 @@ describe('Modals', function() {
   });
 
   describe('default behavior', function() {
-    var subject;
     beforeEach(function() {
       var MyModal = React.createClass({
         propTypes: {
@@ -53,28 +52,14 @@ describe('Modals', function() {
         }
       });
 
-      subject = React.render(<MyModal />, root);
+      React.render(<MyModal />, root);
     });
 
 
     it('is closed by default', function() {
       expect('#root .modal').not.toExist();
     });
 
-    describe('when mounting', function() {
-      it('adds the key up event listener', function() {
-        expect(document.body.addEventListener).toHaveBeenCalledWith('keyup', subject.refs.modal.onKeyUp, false);
-      });
-    });
-
-    describe('when unmounting', function() {
-      it('removes the key up event listener', function() {
-        var onKeyUp = subject.refs.modal.onKeyUp;
-        React.unmountComponentAtNode(root);
-        expect(document.body.removeEventListener).toHaveBeenCalledWith('keyup', onKeyUp);
-      });
-    });
-
     function itOpensTheModal() {
       it('renders a modal', function() {
         expect('.modal').toExist();

diff --git a/src/pivotal-ui-react/modals/modals.js b/src/pivotal-ui-react/modals/modals.js
@@ -50,10 +50,12 @@ var Modal = React.createClass({
   },
 
   componentDidMount() {
-    document.body.addEventListener('keyup', this.onKeyUp, false);
+    document.body.addEventListener('focus', this.ignoreKey, true);
+    document.body.addEventListener('keyup', this.onKeyUp, true);
   },
 
   componentWillUnmount() {
+    document.body.removeEventListener('focus', this.ignoreKey);
     document.body.removeEventListener('keyup', this.onKeyUp);
   },
 
@@ -63,15 +65,16 @@ var Modal = React.createClass({
 
   componentWillUpdate(nextProps, nextState) {
     if (nextState.isVisible) {
-       document.body.classList.add('modal-open');
+      document.body.classList.add('modal-open');
     }
     else {
-       document.body.classList.remove('modal-open');
+      document.body.classList.remove('modal-open');
     }
   },
 
   open() {
     this.setState({isVisible: true});
+    React.findDOMNode(this.refs.modalTransitions).focus();
   },
 
   close() {
@@ -84,6 +87,13 @@ var Modal = React.createClass({
     }
   },
 
+  ignoreKey(e) {
+    if ((this.state.isVisible) && (!(React.findDOMNode(this.refs.modalTransitions).contains(e.target)))) {
+      e.preventDefault();
+      React.findDOMNode(this.refs.modalTransitions).focus();
+    }
+  },
+
   onKeyUp(e) {
     if (e.keyCode === 27) {
       this.close();
@@ -95,15 +105,16 @@ var Modal = React.createClass({
     let backdrop = null;
     if (this.state.isVisible) {
       modal = (
-        <div className="modal modal-basic" style={{ display: 'block'}} key="bananas" ref="modal" onClick={this.childrenClick}>
+        <div className="modal modal-basic" style={{ display: 'block'}} key="bananas" ref="modal"
+             onClick={this.childrenClick} role="dialog">
           <div className="modal-dialog">
             <div {...mergeProps(this.props, {className: 'modal-content'})}>
               <div className="modal-header">
                 <button type="button" className="close" onClick={this.close}>
                   <span>×</span>
                   <span className="sr-only">Close</span>
                 </button>
-                <DefaultH4 className="modal-title">{this.props.title}</DefaultH4>
+                <DefaultH4 className="modal-title" id="modalTitle">{this.props.title}</DefaultH4>
               </div>
                 {this.props.children}
             </div>
@@ -114,7 +125,7 @@ var Modal = React.createClass({
     }
 
     return (
-      <div>
+      <div tabIndex="-1" ref="modalTransitions" aria-labelledby="modalTitle">
         <ReactCSSTransitionGroup transitionName="modal-backdrop-fade">{backdrop}</ReactCSSTransitionGroup>
         <ReactCSSTransitionGroup transitionName="modal-fade">{modal}</ReactCSSTransitionGroup>
       </div>