fix: respect disabled interactive elements in focus trap (#3108)

Closes #3109
sbb-design-systems · Sep 23, 2024 · fb0a1bb · fb0a1bb
1 parent f349463
commit fb0a1bb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/elements/core/a11y/focus.spec.ts b/src/elements/core/a11y/focus.spec.ts
@@ -103,6 +103,8 @@ describe('focus', () => {
             <button style="visibility: hidden" id="hidden-button">Button</button>
           </div>
           <slot></slot>
+          <button id="disabled-button" disabled>Disabled button</button>
+          <span id="disabled-interactive-button" disabled disabled-interactive tabindex="0">Disabled interactive button</span>
       `;
         }
       },
@@ -126,13 +128,16 @@ describe('focus', () => {
       expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('custom-link');
 
       await sendKeys({ press: tabKey });
-
       expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('input');
 
       await sendKeys({ press: tabKey });
-
       expect(document.activeElement!.id).to.equal('slotted-button');
 
+      await sendKeys({ press: tabKey });
+      expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal(
+        'disabled-interactive-button',
+      );
+
       // Wrap around
       await sendKeys({ press: tabKey });
       expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('custom-button');

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