diff --git a/specs/Modal.events.spec.js b/specs/Modal.events.spec.js index af9c2fcc..a6e2ca1d 100644 --- a/specs/Modal.events.spec.js +++ b/specs/Modal.events.spec.js @@ -44,6 +44,21 @@ export default () => { document.activeElement.should.be.eql(content); }); + it("Traps tab in the modal one shift + tab", () => { + const topButton = ; + const bottomButton = ; + const modalContent = ( +
+ {topButton} + {bottomButton} +
+ ); + 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", () => { diff --git a/src/helpers/scopeTab.js b/src/helpers/scopeTab.js index cf7c817d..11e0aef6 100644 --- a/src/helpers/scopeTab.js +++ b/src/helpers/scopeTab.js @@ -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;