diff --git a/package-lock.json b/package-lock.json index da58db37..401ed78e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-modal", - "version": "3.15.1", + "version": "3.14.4", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1564,7 +1564,7 @@ "array-from": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/array-from/-/array-from-2.1.1.tgz", - "integrity": "sha512-GQTc6Uupx1FCavi5mPzBvVT7nEOeWMmUA9P95wpfpW1XwMSKs+KaymD5C2Up7KAUKg/mYwbsUYzdZWcoajlNZg==", + "integrity": "sha1-z+nYwmYoudxa7MYqn12PHzUsEZU=", "dev": true }, "array-includes": { diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js index 867f756f..4db77201 100644 --- a/src/components/ModalPortal.js +++ b/src/components/ModalPortal.js @@ -17,6 +17,18 @@ const CLASS_NAMES = { content: "ReactModal__Content" }; +/** + * 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; export default class ModalPortal extends Component { @@ -281,11 +293,11 @@ export default class ModalPortal extends Component { }; handleKeyDown = event => { - if (event.code === "Tab") { + if (isTabKey(event)) { scopeTab(this.content, event); } - if (this.props.shouldCloseOnEsc && event.code === "Escape") { + if (this.props.shouldCloseOnEsc && isEscKey(event)) { event.stopPropagation(); this.requestClose(event); }