diff --git a/package-lock.json b/package-lock.json index 924b46d05..3f636de0c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10263,11 +10263,6 @@ "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, - "node_modules/focusable-selectors": { - "version": "0.8.4", - "resolved": "https://registry.npmjs.org/focusable-selectors/-/focusable-selectors-0.8.4.tgz", - "integrity": "sha512-0XxbkD0KhOnX10qmnfF9U8DkDD8N/e4M77wMYw2Itoi4vdcoRjSkqXLZFIzkrLIOxzmzCGy88fNG1EbeXMD/zw==" - }, "node_modules/follow-redirects": { "version": "1.15.6", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", @@ -22920,10 +22915,7 @@ "packages/core": { "name": "@vrembem/core", "version": "3.0.19", - "license": "MIT", - "dependencies": { - "focusable-selectors": "^0.8.4" - } + "license": "MIT" }, "packages/dialog": { "name": "@vrembem/dialog", diff --git a/package.json b/package.json index 3d8c8cbbc..5f006a1bd 100644 --- a/package.json +++ b/package.json @@ -51,9 +51,6 @@ "stylelint-config-standard-scss": "^13.1.0", "stylelint-order": "^6.0.4" }, - "overrides": { - "nwsapi": "2.2.2" - }, "jest": { "collectCoverageFrom": [ "./packages/**/src/**" diff --git a/packages/core/package.json b/packages/core/package.json index d319c3d64..58c840949 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -45,8 +45,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "d966f513f86f66dddf93ed60ddefe51124562dc0", - "dependencies": { - "focusable-selectors": "^0.8.4" - } + "gitHead": "d966f513f86f66dddf93ed60ddefe51124562dc0" } diff --git a/packages/core/src/js/FocusTrap.js b/packages/core/src/js/FocusTrap.js index c43d37bd1..09019a341 100644 --- a/packages/core/src/js/FocusTrap.js +++ b/packages/core/src/js/FocusTrap.js @@ -1,5 +1,3 @@ -import focusableSelectors from "focusable-selectors"; - export class FocusTrap { #focusable; #handleFocusTrap; @@ -78,7 +76,8 @@ export class FocusTrap { const initScrollTop = el.scrollTop; // Query for all the focusable elements. - const els = el.querySelectorAll(focusableSelectors.join(",")); + const selector = focusableSelectors.join(","); + const els = el.querySelectorAll(selector); // Loop through all focusable elements. els.forEach((el) => { @@ -100,6 +99,27 @@ export class FocusTrap { } } +// This has been copied over from focusable-selectors package and modified. +// https://github.com/KittyGiraudel/focusable-selectors +const notInert = ":not([inert])"; // Previously `:not([inert]):not([inert] *)` +const notNegTabIndex = ":not([tabindex^=\"-\"])"; +const notDisabled = ":not(:disabled)"; +const focusableSelectors = [ + `a[href]${notInert}${notNegTabIndex}`, + `area[href]${notInert}${notNegTabIndex}`, + `input:not([type="hidden"]):not([type="radio"])${notInert}${notNegTabIndex}${notDisabled}`, + `input[type="radio"]${notInert}${notNegTabIndex}${notDisabled}`, + `select${notInert}${notNegTabIndex}${notDisabled}`, + `textarea${notInert}${notNegTabIndex}${notDisabled}`, + `button${notInert}${notNegTabIndex}${notDisabled}`, + `details${notInert} > summary:first-of-type${notNegTabIndex}`, + `iframe${notInert}${notNegTabIndex}`, + `audio[controls]${notInert}${notNegTabIndex}`, + `video[controls]${notInert}${notNegTabIndex}`, + `[contenteditable]${notInert}${notNegTabIndex}`, + `[tabindex]${notInert}${notNegTabIndex}`, +]; + function handleFocusTrap(event) { // Check if the click was a tab and return if not. const isTab = (event.key === "Tab" || event.keyCode === 9);