From 68f11a21b52d8f54ceb1542199acfdab69cf2239 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Mon, 14 Oct 2024 14:08:08 -0700
Subject: [PATCH 01/27] test(action-sheet): dev build tests

---
 core/src/components/action-sheet/action-sheet.md.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss
index e3480feefe4..7e56e692eb6 100644
--- a/core/src/components/action-sheet/action-sheet.md.scss
+++ b/core/src/components/action-sheet/action-sheet.md.scss
@@ -66,16 +66,16 @@
 .action-sheet-button {
   @include padding($action-sheet-md-button-padding-top, $action-sheet-md-button-padding-end, $action-sheet-md-button-padding-bottom, $action-sheet-md-button-padding-start);
 
-  position: relative;
+  // position: relative;
 
   min-height: $action-sheet-md-button-height;
 
   font-size: $action-sheet-md-button-font-size;
 
-  text-align: $action-sheet-md-text-align;
+  // text-align: $action-sheet-md-text-align;
 
   contain: content;
-  overflow: hidden;
+  // overflow: hidden;
 }
 
 .action-sheet-icon {

From be4a5048483851ae90bad18e91547a57f62177ef Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Mon, 14 Oct 2024 14:18:46 -0700
Subject: [PATCH 02/27] test(action-sheet): simplify styles

---
 core/src/components/action-sheet/action-sheet.md.scss | 4 ++--
 core/src/components/action-sheet/action-sheet.scss    | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss
index 7e56e692eb6..0c0ceb1790b 100644
--- a/core/src/components/action-sheet/action-sheet.md.scss
+++ b/core/src/components/action-sheet/action-sheet.md.scss
@@ -72,9 +72,9 @@
 
   font-size: $action-sheet-md-button-font-size;
 
-  // text-align: $action-sheet-md-text-align;
+  text-align: $action-sheet-md-text-align;
 
-  contain: content;
+  // contain: content;
   // overflow: hidden;
 }
 
diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index 2519c214f3f..12d49c59017 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -118,7 +118,7 @@
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  pointer-events: none;
+  // pointer-events: none;
 
   width: 100%;
   height: 100%;
@@ -177,9 +177,9 @@
 // Action Sheet: States
 // --------------------------------------------------
 
-.action-sheet-button::after {
-  @include button-state();
-}
+// .action-sheet-button::after {
+//   @include button-state();
+// }
 
 
 // Action Sheet: Selected

From a42ad8655f52510bf726cbbcd8db090d05c8cdd4 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Mon, 14 Oct 2024 17:14:01 -0700
Subject: [PATCH 03/27] test(action-sheet): add tabIndex, revert styles

---
 core/src/components/action-sheet/action-sheet.md.scss | 6 +++---
 core/src/components/action-sheet/action-sheet.scss    | 8 ++++----
 core/src/components/action-sheet/action-sheet.tsx     | 1 +
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss
index 0c0ceb1790b..e3480feefe4 100644
--- a/core/src/components/action-sheet/action-sheet.md.scss
+++ b/core/src/components/action-sheet/action-sheet.md.scss
@@ -66,7 +66,7 @@
 .action-sheet-button {
   @include padding($action-sheet-md-button-padding-top, $action-sheet-md-button-padding-end, $action-sheet-md-button-padding-bottom, $action-sheet-md-button-padding-start);
 
-  // position: relative;
+  position: relative;
 
   min-height: $action-sheet-md-button-height;
 
@@ -74,8 +74,8 @@
 
   text-align: $action-sheet-md-text-align;
 
-  // contain: content;
-  // overflow: hidden;
+  contain: content;
+  overflow: hidden;
 }
 
 .action-sheet-icon {
diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index 12d49c59017..2519c214f3f 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -118,7 +118,7 @@
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  // pointer-events: none;
+  pointer-events: none;
 
   width: 100%;
   height: 100%;
@@ -177,9 +177,9 @@
 // Action Sheet: States
 // --------------------------------------------------
 
-// .action-sheet-button::after {
-//   @include button-state();
-// }
+.action-sheet-button::after {
+  @include button-state();
+}
 
 
 // Action Sheet: Selected
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 2d003a5dfc3..08e335f755b 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -410,6 +410,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                   class={buttonClass(b)}
                   onClick={() => this.buttonClick(b)}
                   disabled={b.disabled}
+                  tabIndex={b.disabled ? -1 : 0}
                 >
                   <span class="action-sheet-button-inner">
                     {b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}

From 6ced157b26f6e3dea0001c22016d3221fabf1b9b Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 15 Oct 2024 08:49:55 -0700
Subject: [PATCH 04/27] test(action-sheet): strip code

---
 core/src/components/action-sheet/action-sheet.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 08e335f755b..22d5324fb4b 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -388,7 +388,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         <div tabindex="0"></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
@@ -410,7 +409,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                   class={buttonClass(b)}
                   onClick={() => this.buttonClick(b)}
                   disabled={b.disabled}
-                  tabIndex={b.disabled ? -1 : 0}
                 >
                   <span class="action-sheet-button-inner">
                     {b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}
@@ -444,7 +442,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                 </button>
               </div>
             )}
-          </div>
         </div>
 
         <div tabindex="0"></div>

From 3240e88387279727875e7c87fbd1a83e00e4969d Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 15 Oct 2024 14:05:45 -0700
Subject: [PATCH 05/27] test(action-sheet): change styles

---
 core/src/components/action-sheet/action-sheet.scss | 10 ++++++----
 core/src/components/action-sheet/action-sheet.tsx  |  2 ++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index 2519c214f3f..badbd982e11 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -101,6 +101,8 @@
   font-family: inherit;
 
   overflow: hidden;
+
+  z-index: 0;
 }
 
 .action-sheet-button:disabled {
@@ -123,7 +125,7 @@
   width: 100%;
   height: 100%;
 
-  z-index: 1;
+  // z-index: 1;
 }
 
 .action-sheet-container {
@@ -177,9 +179,9 @@
 // Action Sheet: States
 // --------------------------------------------------
 
-.action-sheet-button::after {
-  @include button-state();
-}
+// .action-sheet-button::after {
+//   @include button-state();
+// }
 
 
 // Action Sheet: Selected
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 22d5324fb4b..2d003a5dfc3 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -388,6 +388,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         <div tabindex="0"></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
@@ -442,6 +443,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                 </button>
               </div>
             )}
+          </div>
         </div>
 
         <div tabindex="0"></div>

From 1415d7b04679072ad9bfa2460c2f9d8ac80691bc Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 15 Oct 2024 14:18:56 -0700
Subject: [PATCH 06/27] test(action-sheet): remove button state

---
 core/src/components/action-sheet/action-sheet.scss | 7 ++++---
 core/src/components/action-sheet/action-sheet.tsx  | 1 +
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index badbd982e11..cd30cbdadf1 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -101,8 +101,6 @@
   font-family: inherit;
 
   overflow: hidden;
-
-  z-index: 0;
 }
 
 .action-sheet-button:disabled {
@@ -125,7 +123,7 @@
   width: 100%;
   height: 100%;
 
-  // z-index: 1;
+  z-index: 1;
 }
 
 .action-sheet-container {
@@ -218,6 +216,9 @@
 .action-sheet-button.ion-focused {
   color: var(--button-color-focused);
 
+  background-color: var(--button-background-focused);
+  opacity: var(--button-background-focused-opacity);
+
   &::after {
     background: var(--button-background-focused);
 
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 2d003a5dfc3..08e335f755b 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -410,6 +410,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                   class={buttonClass(b)}
                   onClick={() => this.buttonClick(b)}
                   disabled={b.disabled}
+                  tabIndex={b.disabled ? -1 : 0}
                 >
                   <span class="action-sheet-button-inner">
                     {b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}

From d05ced86e11290f98baa1a905c7e328b61d24ad5 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 15 Oct 2024 14:28:20 -0700
Subject: [PATCH 07/27] test(action-sheet): strip 1

---
 .../components/action-sheet/action-sheet.tsx  | 117 ++++++------------
 1 file changed, 38 insertions(+), 79 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 08e335f755b..7e5593dad9b 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -19,7 +19,7 @@ import {
 import { getClassMap } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
-import type { AnimationBuilder, CssClassMap, FrameworkDelegate, OverlayInterface } from '../../interface';
+import type { AnimationBuilder, FrameworkDelegate, OverlayInterface } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
 
 import type { ActionSheetButton } from './action-sheet-interface';
@@ -253,17 +253,17 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     return eventMethod(this.el, 'ionActionSheetWillDismiss');
   }
 
-  private async buttonClick(button: ActionSheetButton) {
-    const role = button.role;
-    if (isCancel(role)) {
-      return this.dismiss(button.data, role);
-    }
-    const shouldDismiss = await this.callButtonHandler(button);
-    if (shouldDismiss) {
-      return this.dismiss(button.data, button.role);
-    }
-    return Promise.resolve();
-  }
+  // private async buttonClick(button: ActionSheetButton) {
+  //   const role = button.role;
+  //   if (isCancel(role)) {
+  //     return this.dismiss(button.data, role);
+  //   }
+  //   const shouldDismiss = await this.callButtonHandler(button);
+  //   if (shouldDismiss) {
+  //     return this.dismiss(button.data, button.role);
+  //   }
+  //   return Promise.resolve();
+  // }
 
   private async callButtonHandler(button: ActionSheetButton | undefined) {
     if (button) {
@@ -359,9 +359,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   render() {
     const { header, htmlAttributes, overlayIndex } = this;
     const mode = getIonMode(this);
-    const allButtons = this.getButtons();
-    const cancelButton = allButtons.find((b) => b.role === 'cancel');
-    const buttons = allButtons.filter((b) => b.role !== 'cancel');
+    // const allButtons = this.getButtons();
+    // const cancelButton = allButtons.find((b) => b.role === 'cancel');
+    // const buttons = allButtons.filter((b) => b.role !== 'cancel');
     const headerID = `action-sheet-${overlayIndex}-header`;
 
     return (
@@ -388,61 +388,20 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         <div tabindex="0"></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
-                  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) => (
-                <button
-                  {...b.htmlAttributes}
-                  type="button"
-                  id={b.id}
-                  class={buttonClass(b)}
-                  onClick={() => this.buttonClick(b)}
-                  disabled={b.disabled}
-                  tabIndex={b.disabled ? -1 : 0}
-                >
-                  <span class="action-sheet-button-inner">
-                    {b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}
-                    {b.text}
-                  </span>
-                  {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
-                </button>
-              ))}
-            </div>
-
-            {cancelButton && (
-              <div class="action-sheet-group action-sheet-group-cancel">
-                {/*
-                  Cancel buttons intentionally do not
-                  receive a disabled state here as we should
-                  not make it difficult to dismiss the overlay.
-                */}
-                <button
-                  {...cancelButton.htmlAttributes}
-                  type="button"
-                  class={buttonClass(cancelButton)}
-                  onClick={() => this.buttonClick(cancelButton)}
-                >
-                  <span class="action-sheet-button-inner">
-                    {cancelButton.icon && (
-                      <ion-icon icon={cancelButton.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />
-                    )}
-                    {cancelButton.text}
-                  </span>
-                  {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
-                </button>
-              </div>
+          <div class="action-sheet-head">
+            {header !== undefined && (
+              <h2
+                id={headerID}
+                class={{
+                  'action-sheet-title': true,
+                  'action-sheet-has-sub-title': this.subHeader !== undefined,
+                }}
+              >
+                {header}
+              </h2>
+            )}
+            {this.subHeader !== undefined && (
+              <h2 class="action-sheet-sub-title">{this.subHeader}</h2>
             )}
           </div>
         </div>
@@ -453,12 +412,12 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   }
 }
 
-const buttonClass = (button: ActionSheetButton): CssClassMap => {
-  return {
-    'action-sheet-button': true,
-    'ion-activatable': !button.disabled,
-    'ion-focusable': !button.disabled,
-    [`action-sheet-${button.role}`]: button.role !== undefined,
-    ...getClassMap(button.cssClass),
-  };
-};
+// const buttonClass = (button: ActionSheetButton): CssClassMap => {
+//   return {
+//     'action-sheet-button': true,
+//     'ion-activatable': !button.disabled,
+//     'ion-focusable': !button.disabled,
+//     [`action-sheet-${button.role}`]: button.role !== undefined,
+//     ...getClassMap(button.cssClass),
+//   };
+// };

From 94d2c734e49c8c9c38a334348c63287503f5a9cc Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Wed, 16 Oct 2024 14:11:23 -0700
Subject: [PATCH 08/27] test(ac): header only

---
 .../components/action-sheet/action-sheet.scss |   3 +-
 .../components/action-sheet/action-sheet.tsx  | 113 ++++++++++++------
 2 files changed, 81 insertions(+), 35 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index cd30cbdadf1..cc5b50aa33e 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -96,6 +96,7 @@
   outline: none;
 
   background: var(--button-background);
+
   color: var(--button-color);
 
   font-family: inherit;
@@ -214,9 +215,9 @@
 // --------------------------------------------------
 
 .action-sheet-button.ion-focused {
+  background-color: var(--button-background-focused);
   color: var(--button-color-focused);
 
-  background-color: var(--button-background-focused);
   opacity: var(--button-background-focused-opacity);
 
   &::after {
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 7e5593dad9b..1a7805250ef 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -19,7 +19,7 @@ import {
 import { getClassMap } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
-import type { AnimationBuilder, FrameworkDelegate, OverlayInterface } from '../../interface';
+import type { AnimationBuilder, CssClassMap, FrameworkDelegate, OverlayInterface } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
 
 import type { ActionSheetButton } from './action-sheet-interface';
@@ -253,17 +253,17 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     return eventMethod(this.el, 'ionActionSheetWillDismiss');
   }
 
-  // private async buttonClick(button: ActionSheetButton) {
-  //   const role = button.role;
-  //   if (isCancel(role)) {
-  //     return this.dismiss(button.data, role);
-  //   }
-  //   const shouldDismiss = await this.callButtonHandler(button);
-  //   if (shouldDismiss) {
-  //     return this.dismiss(button.data, button.role);
-  //   }
-  //   return Promise.resolve();
-  // }
+  private async buttonClick(button: ActionSheetButton) {
+    const role = button.role;
+    if (isCancel(role)) {
+      return this.dismiss(button.data, role);
+    }
+    const shouldDismiss = await this.callButtonHandler(button);
+    if (shouldDismiss) {
+      return this.dismiss(button.data, button.role);
+    }
+    return Promise.resolve();
+  }
 
   private async callButtonHandler(button: ActionSheetButton | undefined) {
     if (button) {
@@ -359,8 +359,8 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   render() {
     const { header, htmlAttributes, overlayIndex } = this;
     const mode = getIonMode(this);
-    // const allButtons = this.getButtons();
-    // const cancelButton = allButtons.find((b) => b.role === 'cancel');
+    const allButtons = this.getButtons();
+    const cancelButton = allButtons.find((b) => b.role === 'cancel');
     // const buttons = allButtons.filter((b) => b.role !== 'cancel');
     const headerID = `action-sheet-${overlayIndex}-header`;
 
@@ -388,20 +388,65 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         <div tabindex="0"></div>
 
         <div class="action-sheet-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
-          <div class="action-sheet-head">
-            {header !== undefined && (
-              <h2
-                id={headerID}
-                class={{
-                  'action-sheet-title': true,
-                  'action-sheet-has-sub-title': this.subHeader !== undefined,
-                }}
-              >
+          <div class="action-sheet-container">
+            {header && (
+              <h2 id={headerID} class="action-sheet-title">
                 {header}
               </h2>
             )}
-            {this.subHeader !== undefined && (
-              <h2 class="action-sheet-sub-title">{this.subHeader}</h2>
+            {/* <div class="action-sheet-group" ref={(el) => (this.groupEl = el)}>
+              {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) => (
+                <button
+                  {...b.htmlAttributes}
+                  type="button"
+                  id={b.id}
+                  class={buttonClass(b)}
+                  onClick={() => this.buttonClick(b)}
+                  disabled={b.disabled}
+                >
+                  <span class="action-sheet-button-inner">
+                    {b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}
+                    {b.text}
+                  </span>
+                  {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+                </button>
+              ))}
+            </div> */}
+
+            {cancelButton && (
+              <div class="action-sheet-group action-sheet-group-cancel">
+                {/*
+                  Cancel buttons intentionally do not
+                  receive a disabled state here as we should
+                  not make it difficult to dismiss the overlay.
+                */}
+                <button
+                  {...cancelButton.htmlAttributes}
+                  type="button"
+                  class={buttonClass(cancelButton)}
+                  onClick={() => this.buttonClick(cancelButton)}
+                >
+                  <span class="action-sheet-button-inner">
+                    {cancelButton.icon && (
+                      <ion-icon icon={cancelButton.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />
+                    )}
+                    {cancelButton.text}
+                  </span>
+                  {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+                </button>
+              </div>
             )}
           </div>
         </div>
@@ -412,12 +457,12 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   }
 }
 
-// const buttonClass = (button: ActionSheetButton): CssClassMap => {
-//   return {
-//     'action-sheet-button': true,
-//     'ion-activatable': !button.disabled,
-//     'ion-focusable': !button.disabled,
-//     [`action-sheet-${button.role}`]: button.role !== undefined,
-//     ...getClassMap(button.cssClass),
-//   };
-// };
+const buttonClass = (button: ActionSheetButton): CssClassMap => {
+  return {
+    'action-sheet-button': true,
+    'ion-activatable': !button.disabled,
+    'ion-focusable': !button.disabled,
+    [`action-sheet-${button.role}`]: button.role !== undefined,
+    ...getClassMap(button.cssClass),
+  };
+};

From f2984ab39bd69a31cd1ce20415b6921eb000d079 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Wed, 16 Oct 2024 14:23:03 -0700
Subject: [PATCH 09/27] test(ac): float

---
 .../components/action-sheet/action-sheet.scss | 23 ++++++++-----------
 .../components/action-sheet/action-sheet.tsx  | 11 +++------
 2 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index cc5b50aa33e..5a4aaba7e86 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -50,8 +50,11 @@
   @include font-smoothing();
   @include position(0, 0, 0, 0);
 
-  display: block;
-  position: fixed;
+  display: flex;
+  position: absolute;
+
+  align-items: center;
+  justify-content: center;
 
   outline: none;
 
@@ -67,11 +70,9 @@
 }
 
 .action-sheet-wrapper {
-  @include position(null, 0, 0, 0);
-  @include transform(translate3d(0, 100%, 0));
+  display: flex;
 
-  display: block;
-  position: absolute;
+  flex-direction: column;
 
   width: var(--width);
   min-width: var(--min-width);
@@ -96,7 +97,6 @@
   outline: none;
 
   background: var(--button-background);
-
   color: var(--button-color);
 
   font-family: inherit;
@@ -178,9 +178,9 @@
 // Action Sheet: States
 // --------------------------------------------------
 
-// .action-sheet-button::after {
-//   @include button-state();
-// }
+.action-sheet-button::after {
+  @include button-state();
+}
 
 
 // Action Sheet: Selected
@@ -215,11 +215,8 @@
 // --------------------------------------------------
 
 .action-sheet-button.ion-focused {
-  background-color: var(--button-background-focused);
   color: var(--button-color-focused);
 
-  opacity: var(--button-background-focused-opacity);
-
   &::after {
     background: var(--button-background-focused);
 
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 1a7805250ef..2d003a5dfc3 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -361,7 +361,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     const mode = getIonMode(this);
     const allButtons = this.getButtons();
     const cancelButton = allButtons.find((b) => b.role === 'cancel');
-    // const buttons = allButtons.filter((b) => b.role !== 'cancel');
+    const buttons = allButtons.filter((b) => b.role !== 'cancel');
     const headerID = `action-sheet-${overlayIndex}-header`;
 
     return (
@@ -389,12 +389,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
         <div class="action-sheet-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
           <div class="action-sheet-container">
-            {header && (
-              <h2 id={headerID} class="action-sheet-title">
-                {header}
-              </h2>
-            )}
-            {/* <div class="action-sheet-group" ref={(el) => (this.groupEl = el)}>
+            <div class="action-sheet-group" ref={(el) => (this.groupEl = el)}>
               {header !== undefined && (
                 <div
                   id={headerID}
@@ -423,7 +418,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                   {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
                 </button>
               ))}
-            </div> */}
+            </div>
 
             {cancelButton && (
               <div class="action-sheet-group action-sheet-group-cancel">

From 37ea30f44e84495670cca405a6a5acca17097da0 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Wed, 16 Oct 2024 15:09:23 -0700
Subject: [PATCH 10/27] test(ac): improve focus trapping

---
 .../components/action-sheet/action-sheet.tsx  | 25 +++++++++++++++++--
 core/src/components/backdrop/backdrop.tsx     |  1 -
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 2d003a5dfc3..aea981241dc 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/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>
     );
   }
diff --git a/core/src/components/backdrop/backdrop.tsx b/core/src/components/backdrop/backdrop.tsx
index 7d85b485cc0..9468f02526c 100644
--- a/core/src/components/backdrop/backdrop.tsx
+++ b/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,

From a03b56210fc06e7ce31d24d4f214c5db09a3ae03 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Wed, 16 Oct 2024 15:52:07 -0700
Subject: [PATCH 11/27] test(ac): change styles

---
 .../action-sheet/action-sheet.md.scss         |  1 -
 .../components/action-sheet/action-sheet.scss | 12 +++----
 .../components/action-sheet/action-sheet.tsx  | 31 +++----------------
 3 files changed, 9 insertions(+), 35 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss
index e3480feefe4..196a34e04b7 100644
--- a/core/src/components/action-sheet/action-sheet.md.scss
+++ b/core/src/components/action-sheet/action-sheet.md.scss
@@ -74,7 +74,6 @@
 
   text-align: $action-sheet-md-text-align;
 
-  contain: content;
   overflow: hidden;
 }
 
diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index 5a4aaba7e86..5a70e253382 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/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 {
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index aea981241dc..34bbdec27cf 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/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,13 +385,13 @@ 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,
@@ -420,9 +399,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                   }}
                 >
                   {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>
     );
   }

From 9c80de6725c861de9945009d35a4ad628f1661fe Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 17 Oct 2024 09:09:18 -0700
Subject: [PATCH 12/27] test(ac): revert logic

---
 core/src/components/action-sheet/action-sheet.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 34bbdec27cf..2d003a5dfc3 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -385,13 +385,13 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
       >
         <ion-backdrop tappable={this.backdropDismiss} />
 
-        <div tabindex="0" aria-hidden="true"></div>
+        <div tabindex="0"></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 && (
-                <h2
+                <div
                   id={headerID}
                   class={{
                     'action-sheet-title': true,
@@ -399,9 +399,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                   }}
                 >
                   {header}
-                </h2>
+                  {this.subHeader && <div class="action-sheet-sub-title">{this.subHeader}</div>}
+                </div>
               )}
-              {this.subHeader && <h2 class="action-sheet-sub-title">{this.subHeader}</h2>}
               {buttons.map((b) => (
                 <button
                   {...b.htmlAttributes}
@@ -446,7 +446,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
           </div>
         </div>
 
-        <div tabindex="0" aria-hidden="true"></div>
+        <div tabindex="0"></div>
       </Host>
     );
   }

From 993dccaf6b472082d255bdf2ceb842b22d11c454 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 17 Oct 2024 10:46:01 -0700
Subject: [PATCH 13/27] test(ac): update header format

---
 core/src/components/action-sheet/action-sheet.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 2d003a5dfc3..370447ae410 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -390,18 +390,17 @@ 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 !== undefined && (
-                <div
+              {header && (
+                <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}

From 69c59d0c7f1d4a75d3c4039a6b6d00109ce97936 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 17 Oct 2024 11:15:43 -0700
Subject: [PATCH 14/27] test(ac): use h2 and update styles

---
 .../action-sheet/action-sheet.ios.scss        | 18 +++++++------
 .../action-sheet/action-sheet.md.scss         | 11 +++++---
 .../components/action-sheet/action-sheet.scss | 15 +++++++++++
 .../components/action-sheet/action-sheet.tsx  | 25 +++++++++++--------
 4 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss
index 672b0728726..b969b9d4fcb 100644
--- a/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/core/src/components/action-sheet/action-sheet.ios.scss
@@ -111,23 +111,27 @@
 // Border is made with a linear gradient in order
 // to get the proper color and iOS blur effect
 
-.action-sheet-title {
+.action-sheet-head {
   background: $action-sheet-ios-button-background;
 }
 
+// iOS Action Sheet Header
+// --------------------------------------------------
 
-// iOS Action Sheet Title
-// ---------------------------------------------------
-
-.action-sheet-title {
+.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 {
   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 {
diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss
index 196a34e04b7..a5c5ef469af 100644
--- a/core/src/components/action-sheet/action-sheet.md.scss
+++ b/core/src/components/action-sheet/action-sheet.md.scss
@@ -29,18 +29,23 @@
   @include margin(var(--ion-safe-area-top, 0), auto, 0, auto);
 }
 
-.action-sheet-title {
+// Material Design Action Sheet Header
+// --------------------------------------------------
+
+.action-sheet-head {
   @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);
 
-  font-size: $action-sheet-md-title-font-size;
-
   text-align: $action-sheet-md-text-align;
 }
 
+.action-sheet-title {
+  font-size: $action-sheet-md-title-font-size;
+}
+
 .action-sheet-sub-title {
   @include padding($action-sheet-md-sub-title-padding-top, $action-sheet-md-sub-title-padding-end, $action-sheet-md-sub-title-padding-bottom, $action-sheet-md-sub-title-padding-start);
 
diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index 5a70e253382..3c04f485297 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -88,6 +88,21 @@
   z-index: $z-index-overlay-wrapper;
 }
 
+.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;
 
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 370447ae410..a8922e1cb82 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -390,17 +390,22 @@ 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 && (
-                <h2
-                  id={headerID}
-                  class={{
-                    'action-sheet-title': true,
-                  }}
-                >
-                  {header}
-                </h2>
+              {(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>}
+                </div>
               )}
-              {this.subHeader && <h2 class="action-sheet-sub-title">{this.subHeader}</h2>}
               {buttons.map((b) => (
                 <button
                   {...b.htmlAttributes}

From b16c0456a87bcc26102e78ce951bb516d5d65906 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 17 Oct 2024 11:47:18 -0700
Subject: [PATCH 15/27] test(ac): add original styles

---
 core/src/components/action-sheet/action-sheet.md.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss
index a5c5ef469af..a97a6e4a87d 100644
--- a/core/src/components/action-sheet/action-sheet.md.scss
+++ b/core/src/components/action-sheet/action-sheet.md.scss
@@ -79,6 +79,7 @@
 
   text-align: $action-sheet-md-text-align;
 
+  contain: content;
   overflow: hidden;
 }
 

From f2a43f85ed5861e82e2c6da91362ad88ab5ffdb5 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 17 Oct 2024 11:57:32 -0700
Subject: [PATCH 16/27] test(ac): revert to og styles pt 2

---
 core/src/components/action-sheet/action-sheet.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index 3c04f485297..92a64df192b 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -60,7 +60,6 @@
 
   font-family: $font-family-base;
 
-  contain: strict;
   touch-action: none;
   user-select: none;
   z-index: $z-index-overlay;
@@ -83,8 +82,6 @@
   min-height: var(--min-height);
   max-height: var(--max-height);
 
-  contain: content;
-  // opacity: 0;
   z-index: $z-index-overlay-wrapper;
 }
 

From bd5dc0bd615df23a343337522c854ec298c78271 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 17 Oct 2024 12:36:44 -0700
Subject: [PATCH 17/27] tet(ac): revert og styles pt 3

---
 core/src/components/action-sheet/action-sheet.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index 92a64df192b..ce54d96e44a 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -102,6 +102,7 @@
 
 .action-sheet-button {
   display: block;
+  position: relative;
 
   width: 100%;
 
@@ -114,7 +115,7 @@
 
   font-family: inherit;
 
-  z-index: 0;
+  overflow: hidden;
 }
 
 .action-sheet-button:disabled {
@@ -126,13 +127,18 @@
 .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 {

From 0b8ac518bf526134b02adb1bf44ac82b7946c50a Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 17 Oct 2024 12:48:22 -0700
Subject: [PATCH 18/27] test(ac): revert og styles pt 4

---
 core/src/components/action-sheet/action-sheet.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index ce54d96e44a..4020483486d 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -70,7 +70,11 @@
 }
 
 .action-sheet-wrapper {
-  display: flex;
+  @include position(null, 0, 0, 0);
+  @include transform(translate3d(0, 100%, 0));
+
+  display: block;
+  position: absolute;
 
   flex-direction: column;
 
@@ -83,6 +87,7 @@
   max-height: var(--max-height);
 
   z-index: $z-index-overlay-wrapper;
+  pointer-events: none;
 }
 
 .action-sheet-title,

From b70f53fce8a4dc082e7d7f9690b11183a8b6e2ed Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 17 Oct 2024 12:58:40 -0700
Subject: [PATCH 19/27] test(ac): revert og styles pt 5

---
 core/src/components/action-sheet/action-sheet.scss | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index 4020483486d..734871863b1 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -50,8 +50,8 @@
   @include font-smoothing();
   @include position(0, 0, 0, 0);
 
-  display: flex;
-  position: absolute;
+  display: block;
+  position: fixed;
 
   align-items: center;
   justify-content: center;
@@ -70,11 +70,7 @@
 }
 
 .action-sheet-wrapper {
-  @include position(null, 0, 0, 0);
-  @include transform(translate3d(0, 100%, 0));
-
-  display: block;
-  position: absolute;
+  display: flex;
 
   flex-direction: column;
 
@@ -87,7 +83,6 @@
   max-height: var(--max-height);
 
   z-index: $z-index-overlay-wrapper;
-  pointer-events: none;
 }
 
 .action-sheet-title,

From c3d74adf0ae9071eca83f0a732fe7a21318f2df9 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 17 Oct 2024 13:31:55 -0700
Subject: [PATCH 20/27] test(ac): revert og styles and move tabs

---
 core/src/components/action-sheet/action-sheet.scss | 10 +++++-----
 core/src/components/action-sheet/action-sheet.tsx  |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index 734871863b1..473f18029fd 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -53,9 +53,6 @@
   display: block;
   position: fixed;
 
-  align-items: center;
-  justify-content: center;
-
   outline: none;
 
   font-family: $font-family-base;
@@ -70,9 +67,11 @@
 }
 
 .action-sheet-wrapper {
-  display: flex;
+  @include position(null, 0, 0, 0);
+  @include transform(translate3d(0, 100%, 0));
 
-  flex-direction: column;
+  display: block;
+  position: absolute;
 
   width: var(--width);
   min-width: var(--min-width);
@@ -83,6 +82,7 @@
   max-height: var(--max-height);
 
   z-index: $z-index-overlay-wrapper;
+  pointer-events: none;
 }
 
 .action-sheet-title,
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index a8922e1cb82..b42531fd806 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -385,9 +385,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
       >
         <ion-backdrop tappable={this.backdropDismiss} />
 
-        <div tabindex="0"></div>
-
         <div class="action-sheet-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
+          <div tabindex="0"></div>
+
           <div class="action-sheet-container">
             <div class="action-sheet-group" ref={(el) => (this.groupEl = el)}>
               {(header || this.subHeader) && (
@@ -448,9 +448,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
               </div>
             )}
           </div>
-        </div>
 
-        <div tabindex="0"></div>
+          <div tabindex="0"></div>
+        </div>
       </Host>
     );
   }

From f5e74944049a57127bce30b8203885c8895ac91c Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 17 Oct 2024 16:03:23 -0700
Subject: [PATCH 21/27] test(ac): comment out transform

---
 core/src/components/action-sheet/action-sheet.scss | 2 +-
 core/src/components/action-sheet/action-sheet.tsx  | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index 473f18029fd..a7e8d657057 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -68,7 +68,7 @@
 
 .action-sheet-wrapper {
   @include position(null, 0, 0, 0);
-  @include transform(translate3d(0, 100%, 0));
+  // @include transform(translate3d(0, 100%, 0));
 
   display: block;
   position: absolute;
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index b42531fd806..a8922e1cb82 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -385,9 +385,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
       >
         <ion-backdrop tappable={this.backdropDismiss} />
 
-        <div class="action-sheet-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
-          <div tabindex="0"></div>
+        <div tabindex="0"></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 || this.subHeader) && (
@@ -448,9 +448,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
               </div>
             )}
           </div>
-
-          <div tabindex="0"></div>
         </div>
+
+        <div tabindex="0"></div>
       </Host>
     );
   }

From 60820bb9b09ab372f3b7f266f2d1b2fd633b4331 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 17 Oct 2024 16:33:27 -0700
Subject: [PATCH 22/27] test(ac): transform changes

---
 core/src/components/action-sheet/action-sheet.scss      | 2 +-
 core/src/components/action-sheet/animations/md.enter.ts | 5 ++++-
 core/src/components/action-sheet/animations/md.leave.ts | 5 ++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index a7e8d657057..473f18029fd 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -68,7 +68,7 @@
 
 .action-sheet-wrapper {
   @include position(null, 0, 0, 0);
-  // @include transform(translate3d(0, 100%, 0));
+  @include transform(translate3d(0, 100%, 0));
 
   display: block;
   position: absolute;
diff --git a/core/src/components/action-sheet/animations/md.enter.ts b/core/src/components/action-sheet/animations/md.enter.ts
index 8053d8a9625..fa5b8690a9a 100644
--- a/core/src/components/action-sheet/animations/md.enter.ts
+++ b/core/src/components/action-sheet/animations/md.enter.ts
@@ -20,7 +20,10 @@ export const mdEnterAnimation = (baseEl: HTMLElement): Animation => {
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
-    .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
+    .keyframes([
+      { offset: 0, transform: 'translateY(100%)' },
+      { offset: 1, transform: 'translateY(0%)' }
+    ]);
 
   return baseAnimation
     .addElement(baseEl)
diff --git a/core/src/components/action-sheet/animations/md.leave.ts b/core/src/components/action-sheet/animations/md.leave.ts
index 56255b23f71..583e6c387b9 100644
--- a/core/src/components/action-sheet/animations/md.leave.ts
+++ b/core/src/components/action-sheet/animations/md.leave.ts
@@ -14,7 +14,10 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): Animation => {
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
-    .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
+    .keyframes([
+    { offset: 0, transform: 'translateY(0%)' },
+    { offset: 1, transform: 'translateY(100%)' }
+  ]);
 
   return baseAnimation
     .addElement(baseEl)

From 294f6654065fe31d58ceb24bf2abf06638301fbb Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 17 Oct 2024 16:50:57 -0700
Subject: [PATCH 23/27] test(ac): hide during animation

---
 core/src/components/action-sheet/action-sheet.tsx       | 8 ++++++++
 core/src/components/action-sheet/animations/md.enter.ts | 5 +----
 core/src/components/action-sheet/animations/md.leave.ts | 5 +----
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index a8922e1cb82..138e77ea4a1 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -201,10 +201,18 @@ 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();
   }
 
diff --git a/core/src/components/action-sheet/animations/md.enter.ts b/core/src/components/action-sheet/animations/md.enter.ts
index fa5b8690a9a..8053d8a9625 100644
--- a/core/src/components/action-sheet/animations/md.enter.ts
+++ b/core/src/components/action-sheet/animations/md.enter.ts
@@ -20,10 +20,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement): Animation => {
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
-    .keyframes([
-      { offset: 0, transform: 'translateY(100%)' },
-      { offset: 1, transform: 'translateY(0%)' }
-    ]);
+    .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
 
   return baseAnimation
     .addElement(baseEl)
diff --git a/core/src/components/action-sheet/animations/md.leave.ts b/core/src/components/action-sheet/animations/md.leave.ts
index 583e6c387b9..56255b23f71 100644
--- a/core/src/components/action-sheet/animations/md.leave.ts
+++ b/core/src/components/action-sheet/animations/md.leave.ts
@@ -14,10 +14,7 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): Animation => {
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
-    .keyframes([
-    { offset: 0, transform: 'translateY(0%)' },
-    { offset: 1, transform: 'translateY(100%)' }
-  ]);
+    .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
 
   return baseAnimation
     .addElement(baseEl)

From 36fe7f1bd3cceb78a50ab1323ff3ecc889d557c1 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Fri, 18 Oct 2024 10:36:31 -0700
Subject: [PATCH 24/27] test(ac): move to overlays

---
 .../action-sheet/action-sheet.ios.scss        | 18 ++++-------
 .../action-sheet/action-sheet.md.scss         | 11 ++-----
 .../components/action-sheet/action-sheet.scss | 15 ---------
 .../components/action-sheet/action-sheet.tsx  | 32 ++++++-------------
 core/src/utils/overlays.ts                    | 17 ++++++++--
 5 files changed, 35 insertions(+), 58 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss
index b969b9d4fcb..672b0728726 100644
--- a/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/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 {
diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss
index a97a6e4a87d..e3480feefe4 100644
--- a/core/src/components/action-sheet/action-sheet.md.scss
+++ b/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 {
diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index 473f18029fd..2519c214f3f 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/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;
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 138e77ea4a1..2d003a5dfc3 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/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) => (
diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
index e69bd49dcda..fb43ecad7fb 100644
--- a/core/src/utils/overlays.ts
+++ 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);

From 491efca710b707bbe03ed0cd396e7404fbbf28ce Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Fri, 18 Oct 2024 10:38:30 -0700
Subject: [PATCH 25/27] test(ac): revert backdrop

---
 core/src/components/backdrop/backdrop.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core/src/components/backdrop/backdrop.tsx b/core/src/components/backdrop/backdrop.tsx
index 9468f02526c..7d85b485cc0 100644
--- a/core/src/components/backdrop/backdrop.tsx
+++ b/core/src/components/backdrop/backdrop.tsx
@@ -51,6 +51,7 @@ export class Backdrop implements ComponentInterface {
     const mode = getIonMode(this);
     return (
       <Host
+        tabindex="-1"
         aria-hidden="true"
         class={{
           [mode]: true,

From 94c165c02a71f0b177f87afd23a8454e1bf73b79 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Fri, 18 Oct 2024 11:25:48 -0700
Subject: [PATCH 26/27] refactor(overlay): hide from screen readers while
 animating

---
 core/src/utils/overlays.ts | 45 +++++++++++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 13 deletions(-)

diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
index fb43ecad7fb..9d94155d45d 100644
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -515,19 +515,7 @@ export const present = async <OverlayPresentOptions>(
   document.body.classList.add(BACKDROP_NO_SCROLL);
 
   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');
+  hideAnimatingOverlayFromScreenReaders(overlay.el);
 
   overlay.presented = true;
   overlay.willPresent.emit();
@@ -573,6 +561,11 @@ export const present = async <OverlayPresentOptions>(
    * it would still have aria-hidden on being presented again.
    * Removing it here ensures the overlay is visible to screen
    * readers.
+   *
+   * If this overlay was being presented, then it was hidden
+   * from screen readers during the animation. Now that the
+   * animation is complete, we can reveal the overlay to
+   * screen readers.
    */
   overlay.el.removeAttribute('aria-hidden');
 };
@@ -657,6 +650,13 @@ export const dismiss = async <OverlayDismissOptions>(
   overlay.presented = false;
 
   try {
+    /**
+     * There is no need to show the overlay to screen readers during
+     * the dismiss animation. This is because the overlay will be removed
+     * from the DOM after the animation is complete.
+     */
+    hideAnimatingOverlayFromScreenReaders(overlay.el);
+
     // Overlay contents should not be clickable during dismiss
     overlay.el.style.setProperty('pointer-events', 'none');
     overlay.willDismiss.emit({ data, role });
@@ -942,6 +942,25 @@ export const createTriggerController = () => {
   };
 };
 
+/**
+ * The overlay that is being animated also needs to hide from screen
+ * readers during its 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.
+ *
+ * If the overlay is being presented, 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.
+ *
+ * @param overlay - The overlay that is being animated.
+ */
+const hideAnimatingOverlayFromScreenReaders = (overlay: HTMLIonOverlayElement) => {
+  if (doc === undefined) return;
+
+  overlay.setAttribute('aria-hidden', 'true');
+};
+
 /**
  * Ensure that underlying overlays have aria-hidden if necessary so that screen readers
  * cannot move focus to these elements. Note that we cannot rely on focus/focusin/focusout

From bc2c086f1d73300a8cef3650482a1a36a9700734 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Wed, 23 Oct 2024 10:30:32 -0700
Subject: [PATCH 27/27] refactor(overlay): add comment

---
 core/src/utils/overlays.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
index 9d94155d45d..b00e5a6481c 100644
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -958,6 +958,10 @@ export const createTriggerController = () => {
 const hideAnimatingOverlayFromScreenReaders = (overlay: HTMLIonOverlayElement) => {
   if (doc === undefined) return;
 
+  /**
+   * Once the animation is complete, this attribute will be removed.
+   * This is done at the end of the `present` method.
+   */
   overlay.setAttribute('aria-hidden', 'true');
 };