test(ac): improve focus trapping

Author: thetaPC

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

@@ -253,6 +253,27 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     return eventMethod(this.el, 'ionActionSheetWillDismiss');
   }
 
+  private focusFirstElement() {
+    if (!this.wrapperEl) return; // Check if wrapperEl is defined
+    const firstFocusable = this.wrapperEl?.querySelector(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    if (firstFocusable) {
+      (firstFocusable as HTMLElement).focus();
+    }
+  }
+
+  // Method to focus the last focusable element
+  private focusLastElement() {
+    if (!this.wrapperEl) return; // Check if wrapperEl is defined
+    const focusableElements = this.wrapperEl.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    if (focusableElements.length > 0) {
+      (focusableElements[focusableElements.length - 1] as HTMLElement).focus();
+    }
+  }
+
   private async buttonClick(button: ActionSheetButton) {
     const role = button.role;
     if (isCancel(role)) {
@@ -385,7 +406,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
       >
         <ion-backdrop tappable={this.backdropDismiss} />
 
-        <div tabindex="0"></div>
+        <div tabindex="0" aria-hidden="true" onFocus={() => this.focusLastElement()}></div>
 
         <div class="action-sheet-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
           <div class="action-sheet-container">
@@ -446,7 +467,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
           </div>
         </div>
 
-        <div tabindex="0"></div>
+        <div tabindex="0" aria-hidden="true" onFocus={() => this.focusFirstElement()}></div>
       </Host>
     );
   }

core/src/components/backdrop/backdrop.tsx

@@ -51,7 +51,6 @@ export class Backdrop implements ComponentInterface {
     const mode = getIonMode(this);
     return (
       <Host
-        tabindex="-1"
         aria-hidden="true"
         class={{
           [mode]: true,