test(ac): change styles

Author: thetaPC

core/src/components/action-sheet/action-sheet.md.scss

@@ -74,7 +74,6 @@
 
   text-align: $action-sheet-md-text-align;
 
-  contain: content;
   overflow: hidden;
 }
 

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

@@ -60,6 +60,7 @@
 
   font-family: $font-family-base;
 
+  contain: strict;
   touch-action: none;
   user-select: none;
   z-index: $z-index-overlay;
@@ -82,13 +83,13 @@
   min-height: var(--min-height);
   max-height: var(--max-height);
 
+  contain: content;
+  // opacity: 0;
   z-index: $z-index-overlay-wrapper;
-  pointer-events: none;
 }
 
 .action-sheet-button {
   display: block;
-  position: relative;
 
   width: 100%;
 
@@ -101,7 +102,7 @@
 
   font-family: inherit;
 
-  overflow: hidden;
+  z-index: 0;
 }
 
 .action-sheet-button:disabled {
@@ -113,18 +114,13 @@
 .action-sheet-button-inner {
   display: flex;
 
-  position: relative;
-
   flex-flow: row nowrap;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  pointer-events: none;
 
   width: 100%;
   height: 100%;
-
-  z-index: 1;
 }
 
 .action-sheet-container {

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

@@ -253,27 +253,6 @@ 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)) {
@@ -406,23 +385,23 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
       >
         <ion-backdrop tappable={this.backdropDismiss} />
 
-        <div tabindex="0" aria-hidden="true" onFocus={() => this.focusLastElement()}></div>
+        <div tabindex="0" aria-hidden="true"></div>
 
         <div class="action-sheet-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
           <div class="action-sheet-container">
             <div class="action-sheet-group" ref={(el) => (this.groupEl = el)}>
               {header !== undefined && (
-                <div
+                <h2
                   id={headerID}
                   class={{
                     'action-sheet-title': true,
                     'action-sheet-has-sub-title': this.subHeader !== undefined,
                   }}
                 >
                   {header}
-                  {this.subHeader && <div class="action-sheet-sub-title">{this.subHeader}</div>}
-                </div>
+                </h2>
               )}
+              {this.subHeader && <h2 class="action-sheet-sub-title">{this.subHeader}</h2>}
               {buttons.map((b) => (
                 <button
                   {...b.htmlAttributes}
@@ -467,7 +446,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
           </div>
         </div>
 
-        <div tabindex="0" aria-hidden="true" onFocus={() => this.focusFirstElement()}></div>
+        <div tabindex="0" aria-hidden="true"></div>
       </Host>
     );
   }