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

fix(overlays): trap focus inside overlay components except toast (#21716)

Browse Source 
fixes #21647
This commit is contained in:
Liam DeBeasi
2020-07-22 12:09:31 -04:00
committed by GitHub
parent eb592b8917
commit fff4aec6cf
15 changed files with 377 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/loading/loading.tsx
View File

@ -27,6 +27,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
private durationTimeout: any;
presented = false;
lastFocus?: HTMLElement;
@Element() el!: HTMLIonLoadingElement;
@ -194,7 +195,10 @@ export class Loading implements ComponentInterface, OverlayInterface {
}}
>
<ion-backdrop visible={this.showBackdrop} tappable={this.backdropDismiss} />
<div class="loading-wrapper" role="dialog">
<div tabindex="0"></div>
<div class="loading-wrapper ion-overlay-wrapper" role="dialog">
{spinner && (
<div class="loading-spinner">
<ion-spinner name={spinner} aria-hidden="true" />
@ -203,6 +207,8 @@ export class Loading implements ComponentInterface, OverlayInterface {
{message && <div class="loading-content" innerHTML={sanitizeDOMString(message)}></div>}
</div>
<div tabindex="0"></div>
</Host>
);
}

34
core/src/components/loading/test/basic/e2e.ts
View File

@ -1,6 +1,40 @@
import { testLoading } from '../test.utils';
import { newE2EPage } from '@stencil/core/testing';
const DIRECTORY = 'basic';
const getActiveElementText = async (page) => {
const activeElement = await page.evaluateHandle(() => document.activeElement);
return await page.evaluate(el => el && el.textContent, activeElement);
}
test('loading: focus trap', async () => {
const page = await newE2EPage({ url: '/src/components/loading/test/basic?ionic:_testing=true' });
await page.click('#html-content-loading');
await page.waitForSelector('#html-content-loading');
let loading = await page.find('ion-loading');
expect(loading).not.toBe(null);
await loading.waitForVisible();
await page.keyboard.press('Tab');
const activeElementText = await getActiveElementText(page);
expect(activeElementText).toEqual('Click impatiently to load faster');
await page.keyboard.down('Shift');
await page.keyboard.press('Tab');
await page.keyboard.up('Shift');
const activeElementTextTwo = await getActiveElementText(page);
expect(activeElementTextTwo).toEqual('Click impatiently to load faster');
await page.keyboard.press('Tab');
const activeElementTextThree = await getActiveElementText(page);
expect(activeElementTextThree).toEqual('Click impatiently to load faster');
});
test('loading: basic', async () => {
await testLoading(DIRECTORY, '#basic-loading');