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

fixes #19882, fixes #17126

core/package.json

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

core/src/components/action-sheet/action-sheet.tsx

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

core/src/components/alert/alert.tsx

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

core/src/components/loading/loading.tsx

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

core/src/components/modal/modal.tsx

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

core/src/components/picker/picker.tsx

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

core/src/components/popover/popover.tsx

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

core/src/components/toast/toast.tsx

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

core/src/utils/overlays.ts

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