Add aria-live to Toast

For: https://openstax.atlassian.net/browse/DISCO-30
openstax · Mar 15, 2024 · 6c782e8 · 6c782e8
1 parent fa33dde
commit 6c782e8
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
@@ -149,7 +149,9 @@ export const Toast = ({
 
   return <StyledToast
     dismissAfterMs={dismissAfterMs}
-    inline={inline}>
+    inline={inline}
+    aria-live='polite'
+  >
     <div className={variant}>
       <div className='title'>{title}</div>
       <div className='body'>

diff --git a/src/components/__snapshots__/Toast.spec.tsx.snap b/src/components/__snapshots__/Toast.spec.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`Toast has variants and inlines 1`] = `
 <div
+  aria-live="polite"
   className="sc-bczRLJ jAZNhq"
 >
   <div
@@ -23,6 +24,7 @@ exports[`Toast has variants and inlines 1`] = `
 
 exports[`Toast has variants and inlines 2`] = `
 <div
+  aria-live="polite"
   className="sc-bczRLJ jAZNhq"
 >
   <div
@@ -44,6 +46,7 @@ exports[`Toast has variants and inlines 2`] = `
 
 exports[`Toast has variants and inlines 3`] = `
 <div
+  aria-live="polite"
   className="sc-bczRLJ jSNerL"
 >
   <div
@@ -65,6 +68,7 @@ exports[`Toast has variants and inlines 3`] = `
 
 exports[`Toast matches snapshot 1`] = `
 <div
+  aria-live="polite"
   className="sc-bczRLJ jAZNhq"
 >
   <div

diff --git a/src/components/__snapshots__/ToastContainer.spec.tsx.snap b/src/components/__snapshots__/ToastContainer.spec.tsx.snap
@@ -5,6 +5,7 @@ exports[`ToastContainer matches snapshot 1`] = `
   className="sc-gsnTZi bQKHKA"
 >
   <div
+    aria-live="polite"
     className="sc-bczRLJ jAZNhq"
   >
     <div
@@ -23,6 +24,7 @@ exports[`ToastContainer matches snapshot 1`] = `
     </div>
   </div>
   <div
+    aria-live="polite"
     className="sc-bczRLJ cWrNHg"
   >
     <div
@@ -41,6 +43,7 @@ exports[`ToastContainer matches snapshot 1`] = `
     </div>
   </div>
   <div
+    aria-live="polite"
     className="sc-bczRLJ loazPe"
   >
     <div
@@ -66,6 +69,7 @@ exports[`ToastContainer uses inline prop 1`] = `
   className="sc-gsnTZi gRYEVl"
 >
   <div
+    aria-live="polite"
     className="sc-bczRLJ jSNerL"
   >
     <div
@@ -84,6 +88,7 @@ exports[`ToastContainer uses inline prop 1`] = `
     </div>
   </div>
   <div
+    aria-live="polite"
     className="sc-bczRLJ fgCwHl"
   >
     <div
@@ -102,6 +107,7 @@ exports[`ToastContainer uses inline prop 1`] = `
     </div>
   </div>
   <div
+    aria-live="polite"
     className="sc-bczRLJ dGEkoL"
   >
     <div