[fixed] switched from KeyboardEvent.keyCode to KeyboardEvent.code

specs/Modal.events.spec.js

@@ -11,7 +11,9 @@ import {
   mouseDownAt,
   mouseUpAt,
   escKeyDown,
+  escKeyDownWithCode,
   tabKeyDown,
+  tabKeyDownWithCode,
   withModal,
   withElementCollector,
   createHTMLElement
@@ -109,6 +111,23 @@ export default () => {
     });
   });
 
+  it("traps tab in the modal on shift + tab with KeyboardEvent.code", () => {
+    const topButton = <button>top</button>;
+    const bottomButton = <button>bottom</button>;
+    const modalContent = (
+      <div>
+        {topButton}
+        {bottomButton}
+      </div>
+    );
+    const props = { isOpen: true };
+    withModal(props, modalContent, modal => {
+      const content = mcontent(modal);
+      tabKeyDownWithCode(content, { shiftKey: true });
+      document.activeElement.textContent.should.be.eql("bottom");
+    });
+  });
+
   describe("shouldCloseOnEsc", () => {
     context("when true", () => {
       it("should close on Esc key event", () => {
@@ -129,6 +148,25 @@ export default () => {
           }
         );
       });
+
+      it("should close on Esc key event with KeyboardEvent.code", () => {
+        const requestCloseCallback = sinon.spy();
+        withModal(
+          {
+            isOpen: true,
+            shouldCloseOnEsc: true,
+            onRequestClose: requestCloseCallback
+          },
+          null,
+          modal => {
+            escKeyDownWithCode(mcontent(modal));
+            requestCloseCallback.called.should.be.ok();
+            // Check if event is passed to onRequestClose callback.
+            const event = requestCloseCallback.getCall(0).args[0];
+            event.should.be.ok();
+          }
+        );
+      });
     });
 
     context("when false", () => {

specs/helper.js

@@ -182,23 +182,41 @@ const dispatchMockEvent = eventCtor => (key, code) => (element, opts) =>
       {},
       {
         key: key,
-        keyCode: code,
         which: code
       },
+      code,
       opts
     )
   );
 
 const dispatchMockKeyDownEvent = dispatchMockEvent(Simulate.keyDown);
 
 /**
- * Dispatch an 'esc' key down event from an element.
+ * @deprecated will be replaced by `escKeyDownWithCode` when `react-modal`
+ * drops support for React <18.
+ *
+ * Dispatch an 'esc' key down event using the legacy KeyboardEvent.keyCode.
+ */
+export const escKeyDown = dispatchMockKeyDownEvent("ESC", { keyCode: 27 });
+/**
+ * Dispatch an 'esc' key down event.
+ */
+export const escKeyDownWithCode = dispatchMockKeyDownEvent("ESC", {
+  code: "Escape"
+});
+/**
+ * @deprecated will be replaced by `escKeyDownWithCode` when `react-modal`
+ * drops support for React <18.
+ *
+ * Dispatch a 'tab' key down event using the legacy KeyboardEvent.keyCode.
  */
-export const escKeyDown = dispatchMockKeyDownEvent("ESC", 27);
+export const tabKeyDown = dispatchMockKeyDownEvent("TAB", { keyCode: 9 });
 /**
- * Dispatch a 'tab' key down event from an element.
+ * Dispatch a 'tab' key down event.
  */
-export const tabKeyDown = dispatchMockKeyDownEvent("TAB", 9);
+export const tabKeyDownWithCode = dispatchMockKeyDownEvent("TAB", {
+  code: "Tab"
+});
 /**
  * Dispatch a 'click' event at a node.
  */

src/components/ModalPortal.js

@@ -17,8 +17,13 @@ const CLASS_NAMES = {
   content: "ReactModal__Content"
 };
 
-const TAB_KEY = 9;
-const ESC_KEY = 27;
+/**
+ * We need to support the deprecated `KeyboardEvent.keyCode` in addition to
+ * `KeyboardEvent.code` for apps that still support IE11. Can be removed when
+ * `react-modal` only supports React >18 (which dropped IE support).
+ */
+const isTabKey = event => event.code === "Tab" || event.keyCode === 9;
+const isEscKey = event => event.code === "Escape" || event.keyCode === 27;
 
 let ariaHiddenInstances = 0;
 
@@ -274,11 +279,11 @@ export default class ModalPortal extends Component {
   };
 
   handleKeyDown = event => {
-    if (event.keyCode === TAB_KEY) {
+    if (isTabKey(event)) {
       scopeTab(this.content, event);
     }
 
-    if (this.props.shouldCloseOnEsc && event.keyCode === ESC_KEY) {
+    if (this.props.shouldCloseOnEsc && isEscKey(event)) {
       event.stopPropagation();
       this.requestClose(event);
     }