test(ac): move to overlays

Author: thetaPC

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

@@ -111,27 +111,23 @@
 // Border is made with a linear gradient in order
 // to get the proper color and iOS blur effect
 
-.action-sheet-head {
+.action-sheet-title {
   background: $action-sheet-ios-button-background;
 }
 
-// iOS Action Sheet Header
-// --------------------------------------------------
-
-.action-sheet-head {
-  @include padding($action-sheet-ios-title-padding-top, $action-sheet-ios-title-padding-end, $action-sheet-ios-title-padding-bottom, $action-sheet-ios-title-padding-start);
-
-  color: var(--color, $action-sheet-ios-title-color);
-
-  text-align: $action-sheet-ios-text-align;
-}
 
 // iOS Action Sheet Title
 // ---------------------------------------------------
 
 .action-sheet-title {
+  @include padding($action-sheet-ios-title-padding-top, $action-sheet-ios-title-padding-end, $action-sheet-ios-title-padding-bottom, $action-sheet-ios-title-padding-start);
+
+  color: var(--color, $action-sheet-ios-title-color);
+
   font-size: $action-sheet-ios-title-font-size;
   font-weight: $action-sheet-ios-title-font-weight;
+
+  text-align: $action-sheet-ios-text-align;
 }
 
 .action-sheet-title.action-sheet-has-sub-title {

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

@@ -29,21 +29,16 @@
   @include margin(var(--ion-safe-area-top, 0), auto, 0, auto);
 }
 
-// Material Design Action Sheet Header
-// --------------------------------------------------
-
-.action-sheet-head {
+.action-sheet-title {
   @include padding($action-sheet-md-title-padding-top, $action-sheet-md-title-padding-end, $action-sheet-md-title-padding-bottom, $action-sheet-md-title-padding-start);
 
   min-height: $action-sheet-md-title-height;
 
   color: var(--color, $action-sheet-md-title-color);
 
-  text-align: $action-sheet-md-text-align;
-}
-
-.action-sheet-title {
   font-size: $action-sheet-md-title-font-size;
+
+  text-align: $action-sheet-md-text-align;
 }
 
 .action-sheet-sub-title {

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

@@ -85,21 +85,6 @@
   pointer-events: none;
 }
 
-.action-sheet-title,
-.action-sheet-sub-title {
-  font-weight: normal;
-}
-
-.action-sheet-title {
-  @include margin(0);
-  @include padding(0);
-}
-
-.action-sheet-sub-title {
-  @include margin(0, 0, 0);
-  @include padding(0);
-}
-
 .action-sheet-button {
   display: block;
   position: relative;

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

@@ -201,18 +201,10 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   async present(): Promise<void> {
     const unlock = await this.lockController.lock();
 
-    // hide from screen readers before animating
-    // this is to avoid reading the action sheet content
-    // before it's fully visible
-    this.el.setAttribute('aria-hidden', 'true');
-
     await this.delegateController.attachViewToDom();
 
     await present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
 
-    // show to screen readers after animation
-    this.el.removeAttribute('aria-hidden');
-
     unlock();
   }
 
@@ -398,20 +390,16 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         <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 || this.subHeader) && (
-                <div class="action-sheet-head">
-                  {header && (
-                    <h2
-                      id={headerID}
-                      class={{
-                        'action-sheet-title': true,
-                        'action-sheet-has-sub-title': this.subHeader !== undefined,
-                      }}
-                    >
-                      {header}
-                    </h2>
-                  )}
-                  {this.subHeader && <h2 class="action-sheet-sub-title">{this.subHeader}</h2>}
+              {header !== undefined && (
+                <div
+                  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>
               )}
               {buttons.map((b) => (

core/src/utils/overlays.ts

@@ -514,7 +514,20 @@ export const present = async <OverlayPresentOptions>(
 
   document.body.classList.add(BACKDROP_NO_SCROLL);
 
-  hideOverlaysFromScreenReaders(overlay.el);
+  hideUnderlyingOverlaysFromScreenReaders(overlay.el);
+
+  /**
+   * Set aria-hidden="true" to hide the overlay from screen readers
+   * during the animation. This ensures that assistive technologies
+   * like TalkBack do not announce or interact with the content until
+   * the animation is complete, avoiding confusion for users.
+   *
+   * Additionally, it prevents focus rings from appearing in incorrect
+   * positions due to the transition (specifically `transform` styles),
+   * ensuring that when aria-hidden is removed, the focus rings are
+   * correctly displayed in the final location of the elements.
+   */
+  overlay.el.setAttribute('aria-hidden', 'true');
 
   overlay.presented = true;
   overlay.willPresent.emit();
@@ -939,7 +952,7 @@ export const createTriggerController = () => {
  * @param newTopMostOverlay - The overlay that is being presented. Since the overlay has not been
  * fully presented yet at the time this function is called it will not be included in the getPresentedOverlays result.
  */
-const hideOverlaysFromScreenReaders = (newTopMostOverlay: HTMLIonOverlayElement) => {
+const hideUnderlyingOverlaysFromScreenReaders = (newTopMostOverlay: HTMLIonOverlayElement) => {
   if (doc === undefined) return;
 
   const overlays = getPresentedOverlays(doc);