javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Liam DeBeasi
2022-09-15 15:36:45 -05:00
committed by GitHub
parent 8629dfa9e8
commit 5c10f98ceb
2 changed files with 38 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
core/src/utils/overlays.ts
View File

@ -82,8 +82,16 @@ export const createOverlay = <T extends HTMLIonOverlayElement>(
return Promise.resolve() as any; 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 = 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) => { export const focusFirstDescendant = (ref: Element, overlay: HTMLIonOverlayElement) => {
let firstInput = ref.querySelector(focusableQueryString) as HTMLElement | null; let firstInput = ref.querySelector(focusableQueryString) as HTMLElement | null;

31
core/src/utils/test/overlays/overlays.e2e.ts
View File

@ -2,9 +2,10 @@ import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright'; import { test } from '@utils/test/playwright';
test.describe('overlays: focus', () => { 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(); skip.rtl();
});
test('should not focus the overlay container if element inside of overlay is focused', async ({ page }) => {
await page.setContent(` await page.setContent(`
<ion-button id="open-modal">Show Modal</ion-button> <ion-button id="open-modal">Show Modal</ion-button>
<ion-modal trigger="open-modal"> <ion-modal trigger="open-modal">
@ -26,4 +27,30 @@ test.describe('overlays: focus', () => {
await expect(page.locator('ion-input input')).toBeFocused(); 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();
});
}); });