Merge pull request #3172 from mi6/cherrypick-2710-toast

Cherrypick 2710 toast autodismiss
mi6 · Feb 12, 2025 · 8f687d3 · 8f687d3
2 parents 54a23d3 + 1abbef5
commit 8f687d3
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 8 deletions.
diff --git a/packages/react/src/stories/ic-toast.stories.mdx b/packages/react/src/stories/ic-toast.stories.mdx
@@ -146,7 +146,7 @@ import readme from "../../../web-components/src/components/ic-toast/readme.md";
             <IcToast
               id="toast1"
               heading="Your coffee is ready"
-              message="Please dismiss and collect"
+              message="This alert will dismiss itself, please collect your java"
               variant="info"
               dismissMode="automatic"
               autoDismissTimeout={10000}

diff --git a/packages/web-components/src/components/ic-toast/ic-toast.stories.mdx b/packages/web-components/src/components/ic-toast/ic-toast.stories.mdx
@@ -134,14 +134,14 @@ import readme from "./readme.md";
             id="toast1"
             variant="info"
             heading="Your coffee is ready"
-            message="Please dismiss and collect"
+            message="This alert will dismiss itself, please collect your java"
             dismiss-mode="automatic"
             auto-dismiss-timeout="10000"
           ></ic-toast>
           <ic-toast
             id="toast2"
             heading="Your coffee was lost"
-            message="Please dismiss and try again"
+            message="This alert will dismiss itself, sorry about the coffee"
             variant="error"
             dismiss-mode="automatic"
             auto-dismiss-timeout="10000"

diff --git a/packages/web-components/src/components/ic-toast/ic-toast.tsx b/packages/web-components/src/components/ic-toast/ic-toast.tsx
@@ -334,10 +334,11 @@ export class Toast {
     return (
       <Host
         class={{ ["ic-toast-hidden"]: !visible }}
-        role={isManual ? "dialog" : "status"}
         tabindex="0"
         onFocus={this.onFocus}
         onBlur={this.onBlur}
+        role={isManual ? "dialog" : "alert"}
+        aria-live={isManual ? null : "polite"}
       >
         <div class="container">
           {variant && visible && (
@@ -367,7 +368,7 @@ export class Toast {
           >
             <div class="toast-text">
               <ic-typography variant="subtitle-large" class="toast-heading">
-                {visible && <h5>{heading}</h5>}
+                {visible && (isManual ? <h5>{heading}</h5> : <p>{heading}</p>)}
               </ic-typography>
               {message && (
                 <ic-typography variant="body" class="toast-message">

diff --git a/packages/web-components/src/components/ic-toast/test/basic/ic-toast.spec.ts b/packages/web-components/src/components/ic-toast/test/basic/ic-toast.spec.ts
@@ -116,15 +116,15 @@ describe("ic-toast component", () => {
     await page.waitForChanges();
 
     expect(page.root)
-      .toEqualHtml(`<ic-toast heading="Heading" role="status" dismiss-mode="automatic" tabindex="0">
+      .toEqualHtml(`<ic-toast heading="Heading" role="alert" aria-live="polite" dismiss-mode="automatic" tabindex="0">
       <mock:shadow-root>
         <div class="container">
           <div class="toast-content">
             <div class="toast-text">
               <ic-typography class="toast-heading" variant="subtitle-large">
-                <h5>
+                <p>
                   Heading
-                </h5>
+                </p>
               </ic-typography>
             </div>
           </div>