fix(overlays): focus trapping no longer includes hidden elements (#25948

)
ionic-team · Sep 15, 2022 · 5c10f98 · 5c10f98
1 parent 8629dfa
commit 5c10f98
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
@@ -82,8 +82,16 @@ export const createOverlay = <T extends HTMLIonOverlayElement>(
   return Promise.resolve() as any;
 };
 
+/**
+ * This query string selects elements that
+ * are eligible to receive focus. We select
+ * interactive elements that meet the following
+ * criteria:
+ * 1. Element does not have a negative tabindex
+ * 2. Element does not have [hidden]
+ */
 const focusableQueryString =
-  '[tabindex]:not([tabindex^="-"]), input:not([type=hidden]):not([tabindex^="-"]), textarea:not([tabindex^="-"]), button:not([tabindex^="-"]), select:not([tabindex^="-"]), .ion-focusable:not([tabindex^="-"])';
+  '[tabindex]:not([tabindex^="-"]):not([hidden]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]), textarea:not([tabindex^="-"]):not([hidden]), button:not([tabindex^="-"]):not([hidden]), select:not([tabindex^="-"]):not([hidden]), .ion-focusable:not([tabindex^="-"]):not([hidden])';
 
 export const focusFirstDescendant = (ref: Element, overlay: HTMLIonOverlayElement) => {
   let firstInput = ref.querySelector(focusableQueryString) as HTMLElement | null;

diff --git a/core/src/utils/test/overlays/overlays.e2e.ts b/core/src/utils/test/overlays/overlays.e2e.ts
@@ -2,9 +2,10 @@ import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
 test.describe('overlays: focus', () => {
-  test('should not focus the overlay container if element inside of overlay is focused', async ({ page, skip }) => {
+  test.beforeEach(({ skip }) => {
     skip.rtl();
-
+  });
+  test('should not focus the overlay container if element inside of overlay is focused', async ({ page }) => {
     await page.setContent(`
       <ion-button id="open-modal">Show Modal</ion-button>
       <ion-modal trigger="open-modal">
@@ -26,4 +27,30 @@ test.describe('overlays: focus', () => {
 
     await expect(page.locator('ion-input input')).toBeFocused();
   });
+
+  test('should not select a hidden focusable element', async ({ page, browserName }) => {
+    await page.setContent(`
+      <ion-button id="open-modal">Show Modal</ion-button>
+      <ion-modal trigger="open-modal">
+        <ion-content>
+          <ion-button hidden id="hidden">Hidden Button</ion-button>
+          <ion-button id="visible">Visible Button</ion-button>
+        </ion-content>
+      </ion-modal>
+    `);
+
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+    const presentButton = page.locator('ion-button#open-modal');
+    const visibleButton = page.locator('ion-button#visible');
+    const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+    await presentButton.click();
+    await ionModalDidPresent.next();
+
+    await page.keyboard.press(tabKey);
+    await expect(visibleButton).toBeFocused();
+
+    await page.keyboard.press(tabKey);
+    await expect(visibleButton).toBeFocused();
+  });
 });