fix: provide jsdom support for focus trap mechanism (#3113)

sbb-design-systems · Sep 24, 2024 · 57179c1 · 57179c1
1 parent 31905a2
commit 57179c1
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/src/elements/core/a11y/focus.spec.ts b/src/elements/core/a11y/focus.spec.ts
@@ -105,6 +105,7 @@ describe('focus', () => {
           <slot></slot>
           <button id="disabled-button" disabled>Disabled button</button>
           <span id="disabled-interactive-button" disabled disabled-interactive tabindex="0">Disabled interactive button</span>
+          <span id="disabled-interactive-button" tabindex="0" inert>Disabled interactive button</span>
       `;
         }
       },

diff --git a/src/elements/core/a11y/focus.ts b/src/elements/core/a11y/focus.ts
@@ -10,7 +10,8 @@ export const IS_FOCUSABLE_QUERY = [
   'summary:not(:disabled)',
   '[tabindex]',
 ]
-  .map((selector) => `${selector}:not([disabled]:not([disabled-interactive]),[tabindex="-1"])`)
+  .map((selector) => `${selector}:not([disabled],[tabindex="-1"],[inert])`)
+  .concat('[disabled][disabled-interactive]:not([inert],[tabindex="-1"])')
   .join(',');
 
 // Note: the use of this function for more complex scenarios (with many nested elements) may be expensive.