From 8cc0d05cb01246f3b7240c34183255c07ca94c46 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 13 Apr 2023 15:11:21 +0000
Subject: [PATCH 01/15] test(toast): update tests

---
 core/src/components/toast/test/a11y/index.html   | 14 +++++++-------
 core/src/components/toast/test/a11y/toast.e2e.ts | 12 ++++--------
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/core/src/components/toast/test/a11y/index.html b/core/src/components/toast/test/a11y/index.html
index 9e8b0c63510..204526fb91e 100644
--- a/core/src/components/toast/test/a11y/index.html
+++ b/core/src/components/toast/test/a11y/index.html
@@ -18,16 +18,16 @@
       <main>
         <h1 style="background-color: white">Toast - a11y</h1>
 
-        <button id="polite" onclick="presentToast({ message: 'This is a toast message' })">Present Toast</button>
-        <button
-          id="assertive"
-          onclick="presentToast({ message: 'This is an assertive toast message', htmlAttributes: { 'aria-live': 'assertive' } })"
-        >
-          Present Assertive Toast
-        </button>
+        <button id="inline-toast-trigger">Present Inline Toast</button>
+        <ion-toast id="inline-toast" trigger="inline-toast-trigger" icon="person" header="Inline Toast Header" message="Inline Toast Message"></ion-toast>
+
+        <button id="controller-toast-trigger" onclick="presentToast({ icon: 'person', header: 'Controller Toast Header', message: 'Controller Toast Message', buttons: ['Ok'] })">Present Controller Toast</button>
       </main>
     </ion-app>
     <script>
+      const inlineToast = document.querySelector('#inline-toast');
+      inlineToast.buttons = ['Ok'];
+
       const presentToast = async (opts) => {
         const toast = await toastController.create(opts);
 
diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts b/core/src/components/toast/test/a11y/toast.e2e.ts
index 9b98496ef2a..a9ccf76cba0 100644
--- a/core/src/components/toast/test/a11y/toast.e2e.ts
+++ b/core/src/components/toast/test/a11y/toast.e2e.ts
@@ -7,12 +7,10 @@ test.describe('toast: a11y', () => {
     test.skip(testInfo.project.metadata.rtl === true, 'This test does not check LTR vs RTL layouts');
     await page.goto(`/src/components/toast/test/a11y`);
   });
-  test('should not have any axe violations with polite toasts', async ({ page }) => {
+  test('should not have any axe violations with inline toasts', async ({ page }) => {
     const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
 
-    const politeButton = page.locator('#polite');
-    await politeButton.click();
-
+    await page.click('#inline-toast-trigger');
     await ionToastDidPresent.next();
 
     /**
@@ -23,12 +21,10 @@ test.describe('toast: a11y', () => {
     const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
     expect(results.violations).toEqual([]);
   });
-  test('should not have any axe violations with assertive toasts', async ({ page }) => {
+  test('should not have any axe violations with controller toasts', async ({ page }) => {
     const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
 
-    const politeButton = page.locator('#assertive');
-    await politeButton.click();
-
+    await page.click('#controller-toast-trigger');
     await ionToastDidPresent.next();
 
     /**

From a3af41f283892210de662cdac1c1fdb72b4a5f22 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 13 Apr 2023 15:11:30 +0000
Subject: [PATCH 02/15] fix(toast): screenreaders announce toast correctly

---
 core/src/components/toast/toast.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 64dc0060eac..8fbe885d852 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -431,7 +431,6 @@ export class Toast implements ComponentInterface, OverlayInterface {
       [`toast-${this.position}`]: true,
       [`toast-layout-${layout}`]: true,
     };
-    const role = allButtons.length > 0 ? 'dialog' : 'status';
 
     /**
      * Stacked buttons are only meant to be
@@ -446,9 +445,6 @@ export class Toast implements ComponentInterface, OverlayInterface {
 
     return (
       <Host
-        aria-live="polite"
-        aria-atomic="true"
-        role={role}
         tabindex="-1"
         {...(this.htmlAttributes as any)}
         style={{
@@ -470,7 +466,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
               <ion-icon class="toast-icon" part="icon" icon={this.icon} lazy={false} aria-hidden="true"></ion-icon>
             )}
 
-            <div class="toast-content">
+            <div class="toast-content" role="status" aria-live="polite">
               {this.header !== undefined && (
                 <div class="toast-header" part="header">
                   {this.header}

From c371cfae0feba45ea77356da98db9d250ccb85f1 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 13 Apr 2023 15:12:00 +0000
Subject: [PATCH 03/15] chore(): lint

---
 core/src/components/toast/test/a11y/index.html | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/core/src/components/toast/test/a11y/index.html b/core/src/components/toast/test/a11y/index.html
index 204526fb91e..5e437142d9a 100644
--- a/core/src/components/toast/test/a11y/index.html
+++ b/core/src/components/toast/test/a11y/index.html
@@ -19,9 +19,20 @@
         <h1 style="background-color: white">Toast - a11y</h1>
 
         <button id="inline-toast-trigger">Present Inline Toast</button>
-        <ion-toast id="inline-toast" trigger="inline-toast-trigger" icon="person" header="Inline Toast Header" message="Inline Toast Message"></ion-toast>
+        <ion-toast
+          id="inline-toast"
+          trigger="inline-toast-trigger"
+          icon="person"
+          header="Inline Toast Header"
+          message="Inline Toast Message"
+        ></ion-toast>
 
-        <button id="controller-toast-trigger" onclick="presentToast({ icon: 'person', header: 'Controller Toast Header', message: 'Controller Toast Message', buttons: ['Ok'] })">Present Controller Toast</button>
+        <button
+          id="controller-toast-trigger"
+          onclick="presentToast({ icon: 'person', header: 'Controller Toast Header', message: 'Controller Toast Message', buttons: ['Ok'] })"
+        >
+          Present Controller Toast
+        </button>
       </main>
     </ion-app>
     <script>

From 6b872419252f00508835252b30985478b6d0bbfe Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 13 Apr 2023 15:21:14 +0000
Subject: [PATCH 04/15] add content update check

---
 core/src/components/toast/test/a11y/index.html | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/core/src/components/toast/test/a11y/index.html b/core/src/components/toast/test/a11y/index.html
index 5e437142d9a..e69382cc320 100644
--- a/core/src/components/toast/test/a11y/index.html
+++ b/core/src/components/toast/test/a11y/index.html
@@ -33,6 +33,8 @@ <h1 style="background-color: white">Toast - a11y</h1>
         >
           Present Controller Toast
         </button>
+
+        <button onclick="updateContent()">Update Inner Content</button>
       </main>
     </ion-app>
     <script>
@@ -44,6 +46,14 @@ <h1 style="background-color: white">Toast - a11y</h1>
 
         await toast.present();
       };
+
+      const updateContent = () => {
+        const toasts = document.querySelectorAll('ion-toast');
+        toasts.forEach((toast) => {
+          toast.header = 'Updated Header';
+          toast.message = 'Updated Message';
+        });
+      };
     </script>
   </body>
 </html>

From 2fe530d25af8097ab04f783868b7cc4b0653fbac Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 13 Apr 2023 15:05:06 -0400
Subject: [PATCH 05/15] fix(toast): nvda announces toast

---
 .../src/components/toast/test/a11y/index.html |  5 ++++
 core/src/components/toast/toast.tsx           | 26 ++++++++++++++++---
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/core/src/components/toast/test/a11y/index.html b/core/src/components/toast/test/a11y/index.html
index e69382cc320..842bd16ae17 100644
--- a/core/src/components/toast/test/a11y/index.html
+++ b/core/src/components/toast/test/a11y/index.html
@@ -49,6 +49,11 @@ <h1 style="background-color: white">Toast - a11y</h1>
 
       const updateContent = () => {
         const toasts = document.querySelectorAll('ion-toast');
+        /**
+         * Note: Multiple updates to the props
+         * may cause screen readers like NVDA to announce
+         * the entire content multiple times.
+         */
         toasts.forEach((toast) => {
           toast.header = 'Updated Header';
           toast.message = 'Updated Message';
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 8fbe885d852..e5a990c15ab 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Watch, Component, Element, Event, h, Host, Method, Prop } from '@stencil/core';
+import { Watch, Component, Element, Event, h, Host, Method, Prop, State } from '@stencil/core';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
@@ -55,6 +55,16 @@ export class Toast implements ComponentInterface, OverlayInterface {
 
   presented = false;
 
+  /**
+   * Some screen readers such as NVDA do not
+   * announce content with aria-live that
+   * is initially hidden. To work around this,
+   * we set aria-hidden="true" and then remove
+   * the aria-hidden once the toast content is
+   * fully visible.
+   */
+  @State() revealContentToScreenReader = false;
+
   @Element() el!: HTMLIonToastElement;
 
   /**
@@ -268,6 +278,9 @@ export class Toast implements ComponentInterface, OverlayInterface {
       this.position
     );
     await this.currentTransition;
+
+    this.revealContentToScreenReader = true;
+
     this.currentTransition = undefined;
 
     if (this.duration > 0) {
@@ -303,6 +316,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
 
     if (dismissed) {
       this.delegateController.removeViewFromDom();
+      this.revealContentToScreenReader = false;
     }
 
     return dismissed;
@@ -421,7 +435,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
   }
 
   render() {
-    const { layout, el } = this;
+    const { layout, el, revealContentToScreenReader } = this;
     const allButtons = this.getButtons();
     const startButtons = allButtons.filter((b) => b.side === 'start');
     const endButtons = allButtons.filter((b) => b.side !== 'start');
@@ -466,7 +480,13 @@ export class Toast implements ComponentInterface, OverlayInterface {
               <ion-icon class="toast-icon" part="icon" icon={this.icon} lazy={false} aria-hidden="true"></ion-icon>
             )}
 
-            <div class="toast-content" role="status" aria-live="polite">
+            <div
+              class="toast-content"
+              role="region"
+              aria-atomic="true"
+              aria-live="polite"
+              aria-hidden={revealContentToScreenReader ? null : 'true'}
+            >
               {this.header !== undefined && (
                 <div class="toast-header" part="header">
                   {this.header}

From 85bed9c94225edba91e8892dae664436a38cb94a Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 13 Apr 2023 19:02:44 -0400
Subject: [PATCH 06/15] commit this before i break something

---
 .../src/components/toast/test/a11y/index.html |  8 +++---
 core/src/components/toast/toast.tsx           | 26 ++++++++++++++-----
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/core/src/components/toast/test/a11y/index.html b/core/src/components/toast/test/a11y/index.html
index 842bd16ae17..b2eb88a7ae1 100644
--- a/core/src/components/toast/test/a11y/index.html
+++ b/core/src/components/toast/test/a11y/index.html
@@ -18,7 +18,7 @@
       <main>
         <h1 style="background-color: white">Toast - a11y</h1>
 
-        <button id="inline-toast-trigger">Present Inline Toast</button>
+        <ion-button id="inline-toast-trigger">Present Inline Toast</ion-button>
         <ion-toast
           id="inline-toast"
           trigger="inline-toast-trigger"
@@ -27,14 +27,14 @@ <h1 style="background-color: white">Toast - a11y</h1>
           message="Inline Toast Message"
         ></ion-toast>
 
-        <button
+        <ion-button
           id="controller-toast-trigger"
           onclick="presentToast({ icon: 'person', header: 'Controller Toast Header', message: 'Controller Toast Message', buttons: ['Ok'] })"
         >
           Present Controller Toast
-        </button>
+        </ion-button>
 
-        <button onclick="updateContent()">Update Inner Content</button>
+        <ion-button onclick="updateContent()">Update Inner Content</ion-button>
       </main>
     </ion-app>
     <script>
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index e5a990c15ab..f6d7583820a 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -422,7 +422,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
   }
 
   private renderToastMessage() {
-    const { customHTMLEnabled, message } = this;
+    const { customHTMLEnabled, message, revealContentToScreenReader } = this;
     if (customHTMLEnabled) {
       return <div class="toast-message" part="message" innerHTML={sanitizeDOMString(message)}></div>;
     }
@@ -482,17 +482,31 @@ export class Toast implements ComponentInterface, OverlayInterface {
 
             <div
               class="toast-content"
-              role="region"
+              role="status"
               aria-atomic="true"
               aria-live="polite"
-              aria-hidden={revealContentToScreenReader ? null : 'true'}
             >
-              {this.header !== undefined && (
-                <div class="toast-header" part="header">
+              {!revealContentToScreenReader && this.header !== undefined && (
+                <div key="a" aria-hidden="true" class="toast-header" part="header">
                   {this.header}
                 </div>
               )}
-              {this.message !== undefined && this.renderToastMessage()}
+              {!revealContentToScreenReader && this.message !== undefined && (
+                <div key="c" class="toast-message" aria-hidden="true" part="message">
+                  {this.message}
+                </div>
+              )}
+
+              {revealContentToScreenReader && this.header !== undefined && (
+                <div key="b" class="toast-header" part="header">
+                  {this.header}
+                </div>
+              )}
+              {revealContentToScreenReader && this.message !== undefined && (
+                <div key="d" class="toast-message" part="message">
+                  {this.message}
+                </div>
+              )}
             </div>
 
             {this.renderButtons(endButtons, 'end')}

From 55d8a9db7d9715f447ead4dd455df2b8c1b2c30c Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Apr 2023 13:22:49 +0000
Subject: [PATCH 07/15] clean up code

---
 core/src/components/toast/toast.tsx | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index f6d7583820a..d2cd5c1f486 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -422,7 +422,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
   }
 
   private renderToastMessage() {
-    const { customHTMLEnabled, message, revealContentToScreenReader } = this;
+    const { customHTMLEnabled, message } = this;
     if (customHTMLEnabled) {
       return <div class="toast-message" part="message" innerHTML={sanitizeDOMString(message)}></div>;
     }
@@ -480,30 +480,25 @@ export class Toast implements ComponentInterface, OverlayInterface {
               <ion-icon class="toast-icon" part="icon" icon={this.icon} lazy={false} aria-hidden="true"></ion-icon>
             )}
 
-            <div
-              class="toast-content"
-              role="status"
-              aria-atomic="true"
-              aria-live="polite"
-            >
+            <div class="toast-content" role="status" aria-atomic="true" aria-live="polite">
               {!revealContentToScreenReader && this.header !== undefined && (
-                <div key="a" aria-hidden="true" class="toast-header" part="header">
+                <div key="oldHeader" aria-hidden="true" class="toast-header" part="header">
                   {this.header}
                 </div>
               )}
               {!revealContentToScreenReader && this.message !== undefined && (
-                <div key="c" class="toast-message" aria-hidden="true" part="message">
+                <div key="oldMessage" class="toast-message" aria-hidden="true" part="message">
                   {this.message}
                 </div>
               )}
 
               {revealContentToScreenReader && this.header !== undefined && (
-                <div key="b" class="toast-header" part="header">
+                <div key="header" class="toast-header" part="header">
                   {this.header}
                 </div>
               )}
               {revealContentToScreenReader && this.message !== undefined && (
-                <div key="d" class="toast-message" part="message">
+                <div key="message" class="toast-message" part="message">
                   {this.message}
                 </div>
               )}

From 5f8c679e9d3bd4080ecd2ae3bc6fec090547aa96 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Apr 2023 13:36:35 +0000
Subject: [PATCH 08/15] add comments

---
 core/src/components/toast/toast.tsx | 39 ++++++++++++++++++++++-------
 1 file changed, 30 insertions(+), 9 deletions(-)

diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index d2cd5c1f486..0e00dcb45c1 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -55,14 +55,6 @@ export class Toast implements ComponentInterface, OverlayInterface {
 
   presented = false;
 
-  /**
-   * Some screen readers such as NVDA do not
-   * announce content with aria-live that
-   * is initially hidden. To work around this,
-   * we set aria-hidden="true" and then remove
-   * the aria-hidden once the toast content is
-   * fully visible.
-   */
   @State() revealContentToScreenReader = false;
 
   @Element() el!: HTMLIonToastElement;
@@ -480,9 +472,38 @@ export class Toast implements ComponentInterface, OverlayInterface {
               <ion-icon class="toast-icon" part="icon" icon={this.icon} lazy={false} aria-hidden="true"></ion-icon>
             )}
 
+            {/*
+              This creates a live region where screen readers
+              only announce the header and the message. Elements
+              such as icons and buttons should not be announced.
+              aria-live and aria-atomic here are redundant, but we
+              add them to maximize browser compatibility.
+
+              Toasts are meant to be subtle notifications that do
+              not interrupt the user which is why this has
+              a "status" role and a "polite" presentation.
+            */}
             <div class="toast-content" role="status" aria-atomic="true" aria-live="polite">
+              {/*
+                This logic below is done to improve consistency
+                across platforms when showing and updating live regions.
+
+                TalkBack and VoiceOver announce the live region content
+                when the toast is shown, but NVDA does not. As a result,
+                we need to trigger a DOM update so NVDA detects changes and
+                announces an update to the live region. We do this after
+                the toast is fully visible to avoid jank during the presenting
+                animation.
+
+                The "key" attribute is used here to force Stencil to render
+                new nodes and not re-use nodes. Otherwise, NVDA would not
+                detect any changes to the live region.
+
+                The "old" content is hidden using aria-hidden otherwise
+                VoiceOver will announce the toast content twice when presenting.
+              */}
               {!revealContentToScreenReader && this.header !== undefined && (
-                <div key="oldHeader" aria-hidden="true" class="toast-header" part="header">
+                <div key="oldHeader" class="toast-header" aria-hidden="true" part="header">
                   {this.header}
                 </div>
               )}

From 5a4c74facbb5b8a15cfb08257196ffe0065a1cf4 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Apr 2023 13:43:05 +0000
Subject: [PATCH 09/15] template clean up

---
 core/src/components/toast/toast.tsx | 49 +++++++++++++++--------------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 0e00dcb45c1..49cd64c9385 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -413,19 +413,35 @@ export class Toast implements ComponentInterface, OverlayInterface {
     );
   }
 
-  private renderToastMessage() {
+  private renderToastMessage(key: string, ariaHidden: 'true' | null = null) {
     const { customHTMLEnabled, message } = this;
     if (customHTMLEnabled) {
-      return <div class="toast-message" part="message" innerHTML={sanitizeDOMString(message)}></div>;
+      return (
+        <div
+          key={key}
+          aria-hidden={ariaHidden}
+          class="toast-message"
+          part="message"
+          innerHTML={sanitizeDOMString(message)}
+        ></div>
+      );
     }
 
     return (
-      <div class="toast-message" part="message">
+      <div key={key} aria-hidden={ariaHidden} class="toast-message" part="message">
         {message}
       </div>
     );
   }
 
+  private renderHeader(key: string, ariaHidden: 'true' | null = null) {
+    return (
+      <div key={key} class="toast-header" aria-hidden={ariaHidden} part="header">
+        {this.header}
+      </div>
+    );
+  }
+
   render() {
     const { layout, el, revealContentToScreenReader } = this;
     const allButtons = this.getButtons();
@@ -502,27 +518,12 @@ export class Toast implements ComponentInterface, OverlayInterface {
                 The "old" content is hidden using aria-hidden otherwise
                 VoiceOver will announce the toast content twice when presenting.
               */}
-              {!revealContentToScreenReader && this.header !== undefined && (
-                <div key="oldHeader" class="toast-header" aria-hidden="true" part="header">
-                  {this.header}
-                </div>
-              )}
-              {!revealContentToScreenReader && this.message !== undefined && (
-                <div key="oldMessage" class="toast-message" aria-hidden="true" part="message">
-                  {this.message}
-                </div>
-              )}
-
-              {revealContentToScreenReader && this.header !== undefined && (
-                <div key="header" class="toast-header" part="header">
-                  {this.header}
-                </div>
-              )}
-              {revealContentToScreenReader && this.message !== undefined && (
-                <div key="message" class="toast-message" part="message">
-                  {this.message}
-                </div>
-              )}
+              {!revealContentToScreenReader && this.header !== undefined && this.renderHeader('oldHeader', 'true')}
+              {!revealContentToScreenReader &&
+                this.message !== undefined &&
+                this.renderToastMessage('oldMessage', 'true')}
+              {revealContentToScreenReader && this.header !== undefined && this.renderHeader('header')}
+              {revealContentToScreenReader && this.message !== undefined && this.renderToastMessage('header')}
             </div>
 
             {this.renderButtons(endButtons, 'end')}

From 6de93a25ca75d7650ac3047e6e9f11e887b5878e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Apr 2023 13:45:56 +0000
Subject: [PATCH 10/15] add comments

---
 core/src/components/toast/toast.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 49cd64c9385..700f9820ab1 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -55,6 +55,11 @@ export class Toast implements ComponentInterface, OverlayInterface {
 
   presented = false;
 
+  /**
+   * When `true`, content inside of .toast-content
+   * will have aria-hidden elements removed causing
+   * screen readers to announce the remaining content.
+   */
   @State() revealContentToScreenReader = false;
 
   @Element() el!: HTMLIonToastElement;
@@ -413,6 +418,11 @@ export class Toast implements ComponentInterface, OverlayInterface {
     );
   }
 
+  /**
+   * Render the `message` property.
+   * @param key - A key to give the element a stable identity. This is used to improve compatibility with screen readers.
+   * @param ariaHidden - If "true" then content will be hidden from screen readers.
+   */
   private renderToastMessage(key: string, ariaHidden: 'true' | null = null) {
     const { customHTMLEnabled, message } = this;
     if (customHTMLEnabled) {
@@ -434,6 +444,11 @@ export class Toast implements ComponentInterface, OverlayInterface {
     );
   }
 
+  /**
+   * Render the `header` property.
+   * @param key - A key to give the element a stable identity. This is used to improve compatibility with screen readers.
+   * @param ariaHidden - If "true" then content will be hidden from screen readers.
+   */
   private renderHeader(key: string, ariaHidden: 'true' | null = null) {
     return (
       <div key={key} class="toast-header" aria-hidden={ariaHidden} part="header">

From 4d2d684a3497a0aa6c4db99222bed832ed669114 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Apr 2023 13:46:45 +0000
Subject: [PATCH 11/15] another comment

---
 core/src/components/toast/toast.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 700f9820ab1..5a325ba10d7 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -276,6 +276,11 @@ export class Toast implements ComponentInterface, OverlayInterface {
     );
     await this.currentTransition;
 
+    /**
+     * Content is revealed to screen readers after
+     * the transition to avoid jank since this
+     * state updates will cause a re-render.
+     */
     this.revealContentToScreenReader = true;
 
     this.currentTransition = undefined;

From 225733ec372188e2f424fc02ef4fe1092e2a7c3e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Apr 2023 13:47:04 +0000
Subject: [PATCH 12/15] typo

---
 core/src/components/toast/test/toast.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/components/toast/test/toast.spec.ts b/core/src/components/toast/test/toast.spec.ts
index 1f25432e547..34f2050f531 100644
--- a/core/src/components/toast/test/toast.spec.ts
+++ b/core/src/components/toast/test/toast.spec.ts
@@ -2,7 +2,7 @@ import { newSpecPage } from '@stencil/core/testing';
 import { Toast } from '../toast';
 import { config } from '../../../global/config';
 
-describe('alert: custom html', () => {
+describe('toast: custom html', () => {
   it('should not allow for custom html by default', async () => {
     const page = await newSpecPage({
       components: [Toast],

From 40601908cfbe2f5e84d62c22c0c251c7feb6fb6f Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Apr 2023 14:23:36 +0000
Subject: [PATCH 13/15] add smoke tests

---
 core/src/components/toast/test/toast.spec.ts | 47 ++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/core/src/components/toast/test/toast.spec.ts b/core/src/components/toast/test/toast.spec.ts
index 34f2050f531..2daa2b47d48 100644
--- a/core/src/components/toast/test/toast.spec.ts
+++ b/core/src/components/toast/test/toast.spec.ts
@@ -41,3 +41,50 @@ describe('toast: custom html', () => {
     expect(content.querySelector('button.custom-html')).toBe(null);
   });
 });
+
+/**
+ * These tests check if the aria-hidden attributes are being
+ * removed on present. Without this functionality, screen readers
+ * would not announce toast content correctly.
+ */
+describe('toast: a11y smoke test', () => {
+  it('should have aria-hidden content when dismissed', async () => {
+    const page = await newSpecPage({
+      components: [Toast],
+      html: `<ion-toast message="Message" header="Header"></ion-toast>`,
+    });
+
+    const toast = page.body.querySelector('ion-toast');
+    const header = toast.shadowRoot.querySelector('.toast-header');
+    const message = toast.shadowRoot.querySelector('.toast-message');
+
+    expect(header.getAttribute('aria-hidden')).toBe('true');
+    expect(message.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('should not have aria-hidden content when presented', async () => {
+    const page = await newSpecPage({
+      components: [Toast],
+      html: `
+        <ion-app>
+          <ion-toast animated="false" message="Message" header="Header"></ion-toast>
+        </ion-app>
+      `,
+    });
+
+    const toast = page.body.querySelector('ion-toast');
+
+    /**
+     * Wait for present method to resolve
+     * and for state change to take effect.
+     */
+    await toast.present();
+    await page.waitForChanges();
+
+    const header = toast.shadowRoot.querySelector('.toast-header');
+    const message = toast.shadowRoot.querySelector('.toast-message');
+
+    expect(header.getAttribute('aria-hidden')).toBe(null);
+    expect(message.getAttribute('aria-hidden')).toBe(null);
+  });
+})

From 9d7784f0b0b391525287813cc334f2d02fdf9671 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Apr 2023 14:23:40 +0000
Subject: [PATCH 14/15] lint

---
 core/src/components/toast/test/toast.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/components/toast/test/toast.spec.ts b/core/src/components/toast/test/toast.spec.ts
index 2daa2b47d48..711b08e549f 100644
--- a/core/src/components/toast/test/toast.spec.ts
+++ b/core/src/components/toast/test/toast.spec.ts
@@ -87,4 +87,4 @@ describe('toast: a11y smoke test', () => {
     expect(header.getAttribute('aria-hidden')).toBe(null);
     expect(message.getAttribute('aria-hidden')).toBe(null);
   });
-})
+});

From ab37f25d8bb9997c90b7026c1109795ebcccaf3f Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Apr 2023 15:52:07 +0000
Subject: [PATCH 15/15] deconstruct header and message

---
 core/src/components/toast/toast.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 5a325ba10d7..9c2f01ce9df 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -463,7 +463,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
   }
 
   render() {
-    const { layout, el, revealContentToScreenReader } = this;
+    const { layout, el, revealContentToScreenReader, header, message } = this;
     const allButtons = this.getButtons();
     const startButtons = allButtons.filter((b) => b.side === 'start');
     const endButtons = allButtons.filter((b) => b.side !== 'start');
@@ -538,12 +538,10 @@ export class Toast implements ComponentInterface, OverlayInterface {
                 The "old" content is hidden using aria-hidden otherwise
                 VoiceOver will announce the toast content twice when presenting.
               */}
-              {!revealContentToScreenReader && this.header !== undefined && this.renderHeader('oldHeader', 'true')}
-              {!revealContentToScreenReader &&
-                this.message !== undefined &&
-                this.renderToastMessage('oldMessage', 'true')}
-              {revealContentToScreenReader && this.header !== undefined && this.renderHeader('header')}
-              {revealContentToScreenReader && this.message !== undefined && this.renderToastMessage('header')}
+              {!revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true')}
+              {!revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true')}
+              {revealContentToScreenReader && header !== undefined && this.renderHeader('header')}
+              {revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')}
             </div>
 
             {this.renderButtons(endButtons, 'end')}