Skip to content

Commit

Permalink
[fixed] Tab focus escapes modal on shift + tab after opening
Browse files Browse the repository at this point in the history
  • Loading branch information
jasonblanchard authored and diasbruno committed Feb 9, 2018
1 parent d93fae1 commit 700a28a
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 2 deletions.
15 changes: 15 additions & 0 deletions specs/Modal.events.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,21 @@ export default () => {
document.activeElement.should.be.eql(content);
});

it("Traps tab in the modal one shift + tab", () => {
const topButton = <button>top</button>;
const bottomButton = <button>bottom</button>;
const modalContent = (
<div>
{topButton}
{bottomButton}
</div>
);
const modal = renderModal({ isOpen: true }, modalContent);
const content = mcontent(modal);
tabKeyDown(content, { shiftKey: true });
document.activeElement.textContent.should.be.eql("bottom");
});

describe("shouldCloseOnEsc", () => {
context("when true", () => {
it("should close on Esc key event", () => {
Expand Down
6 changes: 4 additions & 2 deletions src/helpers/scopeTab.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,11 @@ export default function scopeTab(node, event) {
const head = tabbable[0];
const tail = tabbable[tabbable.length - 1];

// proceed with default browser behavior
// proceed with default browser behavior on tab.
// Focus on last element on shift + tab.
if (node === document.activeElement) {
return;
if (!shiftKey) return;
target = tail;
}

var target;
Expand Down

0 comments on commit 700a28a

Please sign in to comment.