From 47e59b7cd0f89f946a6e2b14243e47b0f9ce230e Mon Sep 17 00:00:00 2001 From: Beth Shook Date: Sun, 6 Apr 2025 21:10:50 -0500 Subject: [PATCH 1/9] add aria-live to bannerbody component --- src/app/notifications/components/ToastNotifications/Toast.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/notifications/components/ToastNotifications/Toast.tsx b/src/app/notifications/components/ToastNotifications/Toast.tsx index 3651849e59..25462b4b99 100644 --- a/src/app/notifications/components/ToastNotifications/Toast.tsx +++ b/src/app/notifications/components/ToastNotifications/Toast.tsx @@ -105,7 +105,7 @@ const Toast = ({ dismiss, notification, positionProps}: ToastProps) => { data-testid='banner-body' role='alert' > - + {(txt) =>
{txt} From 0b8a4affca67865816ace0732a5215f6111673b9 Mon Sep 17 00:00:00 2001 From: Beth Shook Date: Mon, 7 Apr 2025 15:22:13 -0500 Subject: [PATCH 2/9] update snapshots --- .../components/Page/__snapshots__/PageToasts.spec.tsx.snap | 2 ++ .../popUp/__snapshots__/ToastNotifications.spec.tsx.snap | 2 ++ .../ToastNotifications/__snapshots__/Toast.spec.tsx.snap | 1 + .../ToastNotifications/__snapshots__/index.spec.tsx.snap | 2 ++ 4 files changed, 7 insertions(+) diff --git a/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap b/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap index 6497adfd11..cf93309bbf 100644 --- a/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap +++ b/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap @@ -194,6 +194,7 @@ exports[`PageToasts matches snapshot with toasts when mobile toolbar is open 1`] role="alert" >
Date: Mon, 7 Apr 2025 16:41:52 -0500 Subject: [PATCH 3/9] update snapshots --- .../components/Page/__snapshots__/PageToasts.spec.tsx.snap | 4 ++-- .../popUp/__snapshots__/ToastNotifications.spec.tsx.snap | 4 ++-- src/app/notifications/components/ToastNotifications/Toast.tsx | 3 ++- .../ToastNotifications/__snapshots__/Toast.spec.tsx.snap | 2 +- .../ToastNotifications/__snapshots__/index.spec.tsx.snap | 4 ++-- 5 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap b/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap index cf93309bbf..f1b9922cbe 100644 --- a/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap +++ b/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap @@ -188,13 +188,13 @@ exports[`PageToasts matches snapshot with toasts when mobile toolbar is open 1`] className="c1" >
{ isFadingOut={state.isFadingOut} data-testid='banner-body' role='alert' + aria-live='polite' > - + {(txt) =>
{txt} diff --git a/src/app/notifications/components/ToastNotifications/__snapshots__/Toast.spec.tsx.snap b/src/app/notifications/components/ToastNotifications/__snapshots__/Toast.spec.tsx.snap index 3a50d7eda2..ca89c9402e 100644 --- a/src/app/notifications/components/ToastNotifications/__snapshots__/Toast.spec.tsx.snap +++ b/src/app/notifications/components/ToastNotifications/__snapshots__/Toast.spec.tsx.snap @@ -106,13 +106,13 @@ exports[`Toast matches snapshot 1`] = ` }
Date: Wed, 9 Apr 2025 12:44:59 -0500 Subject: [PATCH 4/9] move aria-live attrib --- src/app/content/components/Page/PageToasts.tsx | 2 +- src/app/notifications/components/ToastNotifications/Toast.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/content/components/Page/PageToasts.tsx b/src/app/content/components/Page/PageToasts.tsx index 640a5a1ecf..92a20e906b 100644 --- a/src/app/content/components/Page/PageToasts.tsx +++ b/src/app/content/components/Page/PageToasts.tsx @@ -63,7 +63,7 @@ const PageToasts = (props: ToastProps | {}) => { const mobileToolbarOpen = useSelector(mobileToolbarOpenSelector); return ( - + {toasts ? : null} ); diff --git a/src/app/notifications/components/ToastNotifications/Toast.tsx b/src/app/notifications/components/ToastNotifications/Toast.tsx index 8b1ab0bbf0..3651849e59 100644 --- a/src/app/notifications/components/ToastNotifications/Toast.tsx +++ b/src/app/notifications/components/ToastNotifications/Toast.tsx @@ -104,7 +104,6 @@ const Toast = ({ dismiss, notification, positionProps}: ToastProps) => { isFadingOut={state.isFadingOut} data-testid='banner-body' role='alert' - aria-live='polite' > From f0bd462d73eefba881be0c9cbb5783d13c6b49e4 Mon Sep 17 00:00:00 2001 From: Beth Shook Date: Wed, 9 Apr 2025 12:49:37 -0500 Subject: [PATCH 5/9] update specs --- src/app/content/__snapshots__/routes.spec.tsx.snap | 1 + .../components/Page/__snapshots__/PageToasts.spec.tsx.snap | 5 +++-- .../content/components/__snapshots__/Content.spec.tsx.snap | 2 ++ .../popUp/__snapshots__/ToastNotifications.spec.tsx.snap | 2 -- .../ToastNotifications/__snapshots__/Toast.spec.tsx.snap | 1 - .../ToastNotifications/__snapshots__/index.spec.tsx.snap | 2 -- 6 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap index 1d3f15ab18..31b1b52745 100644 --- a/src/app/content/__snapshots__/routes.spec.tsx.snap +++ b/src/app/content/__snapshots__/routes.spec.tsx.snap @@ -769,6 +769,7 @@ Array [ className="c0" >
diff --git a/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap b/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap index f1b9922cbe..94eddb7f34 100644 --- a/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap +++ b/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap @@ -33,6 +33,7 @@ exports[`PageToasts matches snapshot 1`] = ` }
@@ -181,6 +182,7 @@ exports[`PageToasts matches snapshot with toasts when mobile toolbar is open 1`] }
@@ -188,7 +190,6 @@ exports[`PageToasts matches snapshot with toasts when mobile toolbar is open 1`] className="c1" >
@@ -393,7 +395,6 @@ exports[`PageToasts matches snapshots with toasts 1`] = ` className="c1" >
@@ -8886,6 +8887,7 @@ li[aria-label="Current Page"] .c61 { className="c77" >
diff --git a/src/app/content/components/popUp/__snapshots__/ToastNotifications.spec.tsx.snap b/src/app/content/components/popUp/__snapshots__/ToastNotifications.spec.tsx.snap index a86f1eeb75..c4b0c19004 100644 --- a/src/app/content/components/popUp/__snapshots__/ToastNotifications.spec.tsx.snap +++ b/src/app/content/components/popUp/__snapshots__/ToastNotifications.spec.tsx.snap @@ -155,7 +155,6 @@ exports[`ToastNotifications matches snapshots with toasts 1`] = ` className="c1" >
Date: Wed, 9 Apr 2025 14:29:29 -0500 Subject: [PATCH 6/9] update snapshots --- src/app/content/__snapshots__/routes.spec.tsx.snap | 2 +- src/app/content/components/Page/PageToasts.tsx | 2 +- .../components/Page/__snapshots__/PageToasts.spec.tsx.snap | 6 +++--- .../content/components/__snapshots__/Content.spec.tsx.snap | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap index 31b1b52745..039c356296 100644 --- a/src/app/content/__snapshots__/routes.spec.tsx.snap +++ b/src/app/content/__snapshots__/routes.spec.tsx.snap @@ -769,7 +769,7 @@ Array [ className="c0" >
diff --git a/src/app/content/components/Page/PageToasts.tsx b/src/app/content/components/Page/PageToasts.tsx index 92a20e906b..149d3a7eb8 100644 --- a/src/app/content/components/Page/PageToasts.tsx +++ b/src/app/content/components/Page/PageToasts.tsx @@ -63,7 +63,7 @@ const PageToasts = (props: ToastProps | {}) => { const mobileToolbarOpen = useSelector(mobileToolbarOpenSelector); return ( - + {toasts ? : null} ); diff --git a/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap b/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap index 94eddb7f34..6e3d991d11 100644 --- a/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap +++ b/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap @@ -33,7 +33,7 @@ exports[`PageToasts matches snapshot 1`] = ` }
@@ -182,7 +182,7 @@ exports[`PageToasts matches snapshot with toasts when mobile toolbar is open 1`] }
@@ -387,7 +387,7 @@ exports[`PageToasts matches snapshots with toasts 1`] = ` }
diff --git a/src/app/content/components/__snapshots__/Content.spec.tsx.snap b/src/app/content/components/__snapshots__/Content.spec.tsx.snap index 0773167af2..1c02865587 100644 --- a/src/app/content/components/__snapshots__/Content.spec.tsx.snap +++ b/src/app/content/components/__snapshots__/Content.spec.tsx.snap @@ -4269,7 +4269,7 @@ li[aria-label="Current Page"] .c61 { className="c77" >
@@ -8887,7 +8887,7 @@ li[aria-label="Current Page"] .c61 { className="c77" >
From c56182b899ea596dc83fb822dfbc5f924914c6ba Mon Sep 17 00:00:00 2001 From: Beth Shook Date: Wed, 9 Apr 2025 16:28:20 -0500 Subject: [PATCH 7/9] trying --- .../content/components/Page/PageToasts.tsx | 10 +- .../__snapshots__/PageToasts.spec.tsx.snap | 171 +----------------- 2 files changed, 10 insertions(+), 171 deletions(-) diff --git a/src/app/content/components/Page/PageToasts.tsx b/src/app/content/components/Page/PageToasts.tsx index 149d3a7eb8..7d8fd36008 100644 --- a/src/app/content/components/Page/PageToasts.tsx +++ b/src/app/content/components/Page/PageToasts.tsx @@ -61,10 +61,16 @@ export const ToastContainerWrapper = styled.div` const PageToasts = (props: ToastProps | {}) => { const toasts = useSelector(groupedToastNotifications).page; const mobileToolbarOpen = useSelector(mobileToolbarOpenSelector); + const [toastsHidden, setToastsHidden] = React.useState(true); + + + React.useEffect(() => { + setTimeout(() => setToastsHidden(false), 400); + }, [setToastsHidden]); return ( - - {toasts ? : null} + + {toasts && !toastsHidden ? : null} ); }; diff --git a/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap b/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap index 6e3d991d11..4134e33a48 100644 --- a/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap +++ b/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap @@ -40,92 +40,6 @@ exports[`PageToasts matches snapshot 1`] = ` `; exports[`PageToasts matches snapshot with toasts when mobile toolbar is open 1`] = ` -.c5 { - color: #424242; - font-size: 1.6rem; - line-height: 2.5rem; - padding: 0.5rem 1rem; - font-weight: bold; - background-color: #fafafa; - line-height: 4rem; -} - -.c5 a { - color: #027EB5; - cursor: pointer; - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c5 a:hover { - color: #0064A0; -} - -.c1 { - width: 100%; - position: absolute; - overflow: visible; -} - -.c2 { - width: 100%; - margin: 0; - overflow: visible; - -webkit-transition: -webkit-transform 0.6s; - -webkit-transition: transform 0.6s; - transition: transform 0.6s; - z-index: 1; - -webkit-transform: translateY(-100%); - -ms-transform: translateY(-100%); - transform: translateY(-100%); -} - -.c3 { - width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - padding: 0.5rem 1rem; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - background: #F8E8EB; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - border: 1px solid #E297A0; -} - -.c3 .c4 { - background: inherit; - color: #C23834; - font-weight: normal; - line-height: 2.6rem; -} - -.c7 { - width: 1.8rem; - height: 1.8rem; - cursor: pointer; -} - -.c6 { - cursor: pointer; - border: none; - margin: 0; - padding: 0; - background: none; - color: #C22032; - overflow: visible; -} - -.c6:hover { - color: #E297A0; -} - .c0 { position: -webkit-sticky; position: sticky; @@ -134,30 +48,6 @@ exports[`PageToasts matches snapshot with toasts when mobile toolbar is open 1`] top: 12rem; } -@media (max-width:75em) { - .c5 { - padding: 0; - line-height: 2rem; - background-color: initial; - } -} - -@media print { - .c2 { - display: none; - } -} - -@media (max-width:75em) { - .c3 { - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; - padding: 1.6rem 1.6rem; - } -} - @media screen and (max-width:90em) { .c0 { max-width: calc(100vw - ((100vw - 128rem) / 2) - 8rem); @@ -185,63 +75,7 @@ exports[`PageToasts matches snapshot with toasts when mobile toolbar is open 1`] aria-live="polite" className="c0" role="alertdialog" -> -
-
-
-
- The highlight could not be saved. Please check your connection and try again. -
- -
-
-
-
+/> `; exports[`PageToasts matches snapshots with toasts 1`] = ` @@ -387,9 +221,8 @@ exports[`PageToasts matches snapshots with toasts 1`] = ` }
Date: Wed, 9 Apr 2025 16:38:38 -0500 Subject: [PATCH 8/9] add comment --- src/app/content/components/Page/PageToasts.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/content/components/Page/PageToasts.tsx b/src/app/content/components/Page/PageToasts.tsx index 7d8fd36008..d98413b0b7 100644 --- a/src/app/content/components/Page/PageToasts.tsx +++ b/src/app/content/components/Page/PageToasts.tsx @@ -63,7 +63,8 @@ const PageToasts = (props: ToastProps | {}) => { const mobileToolbarOpen = useSelector(mobileToolbarOpenSelector); const [toastsHidden, setToastsHidden] = React.useState(true); - + // timeout so that screenreaders will pick up the toasts populating the live region + // https://tetralogical.com/blog/2024/05/01/why-are-my-live-regions-not-working/ React.useEffect(() => { setTimeout(() => setToastsHidden(false), 400); }, [setToastsHidden]); From 98267ba7abdae8a1df36fc2ccef8d57675d71c10 Mon Sep 17 00:00:00 2001 From: Beth Shook Date: Thu, 10 Apr 2025 10:04:17 -0500 Subject: [PATCH 9/9] up timeout --- src/app/content/components/Page/PageToasts.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/content/components/Page/PageToasts.tsx b/src/app/content/components/Page/PageToasts.tsx index d98413b0b7..d89a590e0e 100644 --- a/src/app/content/components/Page/PageToasts.tsx +++ b/src/app/content/components/Page/PageToasts.tsx @@ -66,11 +66,11 @@ const PageToasts = (props: ToastProps | {}) => { // timeout so that screenreaders will pick up the toasts populating the live region // https://tetralogical.com/blog/2024/05/01/why-are-my-live-regions-not-working/ React.useEffect(() => { - setTimeout(() => setToastsHidden(false), 400); + setTimeout(() => setToastsHidden(false), 1000); }, [setToastsHidden]); return ( - + {toasts && !toastsHidden ? : null} );