diff --git a/package.json b/package.json index ffd5a42b..d4906739 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,7 @@ "dependencies": { "classnames": "^2.1.3", "dom-helpers": "^2.2.4", - "react-prop-types": "^0.2.1" + "react-prop-types": "^0.2.1", + "warning": "^2.0.0" } } diff --git a/src/Modal.js b/src/Modal.js index b4b74ac8..5fb0efcf 100644 --- a/src/Modal.js +++ b/src/Modal.js @@ -1,5 +1,6 @@ /*eslint-disable react/prop-types */ import React, { cloneElement } from 'react'; +import warning from 'warning'; import elementType from 'react-prop-types/lib/elementType'; import Portal from './Portal'; @@ -154,11 +155,16 @@ const Modal = React.createClass({ return null; } - if (dialog.props.role === undefined) { - dialog = cloneElement(dialog, { role: 'document' }); + let { role, tabIndex } = dialog.props; + + if (role === undefined || tabIndex === undefined) { + dialog = cloneElement(dialog, { + role: role === undefined ? 'document' : role, + tabIndex: tabIndex == null ? '-1' : tabIndex + }); } - if ( Transition ) { + if (Transition) { dialog = (
- Message + + Message , focusableContainer); @@ -311,7 +311,9 @@ describe('Modal', function () { render( - +
+ +
, focusableContainer); @@ -325,14 +327,31 @@ describe('Modal', function () { document.activeElement.should.equal(focusableContainer); render( - - + +
+ +
, focusableContainer); focusableContainer.focus(); document.activeElement.className.should.contain('modal'); }); + + it('Should warn if the modal content is not focusable', function () { + let Dialog = ()=> ({ render(){ return
; } }); + + sinon.stub(console, 'error'); + + render( + + + + , focusableContainer); + + expect(console.error).to.have.been.calledOnce; + console.error.restore(); + }); }); });