Skip to content

Commit c844719

Browse files
committed
keep focus on modal if no tabbable elements are within it
add a test case
1 parent 23eee3b commit c844719

File tree

2 files changed

+17
-1
lines changed

2 files changed

+17
-1
lines changed

Diff for: lib/helpers/scopeTab.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ var findTabbable = require('../helpers/tabbable');
22

33
module.exports = function(node, event) {
44
var tabbable = findTabbable(node);
5-
if (!tabbable.length) return;
5+
if (!tabbable.length) {
6+
event.preventDefault();
7+
return;
8+
}
69
var finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
710
var leavingFinalTabbable = (
811
finalTabbable === document.activeElement ||

Diff for: specs/Modal.spec.js

+13
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,19 @@ describe('Modal', function () {
100100
unmountModal();
101101
});
102102

103+
it('keeps focus inside the modal when child has no tabbable elements', function() {
104+
var tabPrevented = false;
105+
var modal = renderModal({isOpen: true}, 'hello');
106+
strictEqual(document.activeElement, modal.portal.refs.content);
107+
Simulate.keyDown(modal.portal.refs.content, {
108+
key: "Tab",
109+
keyCode: 9,
110+
which: 9,
111+
preventDefault: function() { tabPrevented = true; }
112+
});
113+
equal(tabPrevented, true);
114+
});
115+
103116
it('supports custom className', function() {
104117
var modal = renderModal({isOpen: true, className: 'myClass'});
105118
equal(modal.portal.refs.content.className.contains('myClass'), true);

0 commit comments

Comments
 (0)