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

fix(overlays): focus overlay when presented (#20997)

Browse Source 
fixes #19882, fixes #17126
This commit is contained in:
Liam DeBeasi
2020-04-28 16:43:00 -04:00
committed by GitHub
parent c54911f451
commit fc2be8d08b
10 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/package.json
View File

@ -36,7 +36,7 @@
"devDependencies": { "devDependencies": {
"@stencil/core": "1.12.4", "@stencil/core": "1.12.4",
"@stencil/sass": "1.3.1", "@stencil/sass": "1.3.1",
"@types/jest": "24.9.0", "@types/jest": "24.9.1",
"@types/node": "12.12.3", "@types/node": "12.12.3",
"@types/puppeteer": "1.19.1", "@types/puppeteer": "1.19.1",
"@types/swiper": "5.2.1", "@types/swiper": "5.2.1",

1
core/src/components/action-sheet/action-sheet.tsx
View File

@ -202,6 +202,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
<Host <Host
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
tabindex="-1"
style={{ style={{
zIndex: `${20000 + this.overlayIndex}`, zIndex: `${20000 + this.overlayIndex}`,
}} }}

1
core/src/components/alert/alert.tsx
View File

@ -467,6 +467,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
<Host <Host
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
tabindex="-1"
style={{ style={{
zIndex: `${20000 + overlayIndex}`, zIndex: `${20000 + overlayIndex}`,
}} }}

2
core/src/components/alert/test/basic/index.html
View File

@ -14,7 +14,7 @@
import { alertController } from '../../../../dist/ionic/index.esm.js'; import { alertController } from '../../../../dist/ionic/index.esm.js';
window.alertController = alertController; window.alertController = alertController;
</script> </script>
<body> <body>
<ion-app> <ion-app>

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

@ -184,6 +184,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
return ( return (
<Host <Host
onIonBackdropTap={this.onBackdropTap} onIonBackdropTap={this.onBackdropTap}
tabindex="-1"
style={{ style={{
zIndex: `${40000 + this.overlayIndex}` zIndex: `${40000 + this.overlayIndex}`
}} }}

1
core/src/components/modal/modal.tsx
View File

@ -270,6 +270,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
<Host <Host
no-router no-router
aria-modal="true" aria-modal="true"
tabindex="-1"
class={{ class={{
[mode]: true, [mode]: true,
[`modal-card`]: this.presentingElement !== undefined && mode === 'ios', [`modal-card`]: this.presentingElement !== undefined && mode === 'ios',

1
core/src/components/picker/picker.tsx
View File

@ -216,6 +216,7 @@ export class Picker implements ComponentInterface, OverlayInterface {
return ( return (
<Host <Host
aria-modal="true" aria-modal="true"
tabindex="-1"
class={{ class={{
[mode]: true, [mode]: true,

1
core/src/components/popover/popover.tsx
View File

@ -202,6 +202,7 @@ export class Popover implements ComponentInterface, OverlayInterface {
<Host <Host
aria-modal="true" aria-modal="true"
no-router no-router
tabindex="-1"
style={{ style={{
zIndex: `${20000 + this.overlayIndex}`, zIndex: `${20000 + this.overlayIndex}`,
}} }}

1
core/src/components/toast/toast.tsx
View File

@ -272,6 +272,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
...getClassMap(this.cssClass), ...getClassMap(this.cssClass),
'toast-translucent': this.translucent 'toast-translucent': this.translucent
}} }}
tabindex="-1"
onIonToastWillDismiss={this.dispatchCancelHandler} onIonToastWillDismiss={this.dispatchCancelHandler}
> >
<div class={wrapperClass}> <div class={wrapperClass}>

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

@ -139,6 +139,8 @@ export const present = async (
if (completed) { if (completed) {
overlay.didPresent.emit(); overlay.didPresent.emit();
} }
overlay.el.focus();
}; };
export const dismiss = async ( export const dismiss = async (