From 64821435e0067c2cac6f86b5d42e37d3e8abb8a3 Mon Sep 17 00:00:00 2001
From: Matias Lera <62261539+luislera@users.noreply.github.com>
Date: Thu, 18 Nov 2021 16:30:49 -0300
Subject: [PATCH 1/2] Added announcement for notifications when the panel is
 expanded

---
 .../notificationsExplorer/notificationsExplorer.tsx        | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/app/client/src/ui/shell/explorer/notificationsExplorer/notificationsExplorer.tsx b/packages/app/client/src/ui/shell/explorer/notificationsExplorer/notificationsExplorer.tsx
index 5db47ff8b..4368ffe7f 100644
--- a/packages/app/client/src/ui/shell/explorer/notificationsExplorer/notificationsExplorer.tsx
+++ b/packages/app/client/src/ui/shell/explorer/notificationsExplorer/notificationsExplorer.tsx
@@ -41,6 +41,7 @@ import { NotificationManager } from '../../../../notificationManager';
 
 import { Notification } from './notification';
 import * as styles from './notificationsExplorer.scss';
+import { ariaAlertService } from '../../../a11y';
 
 interface NotificationExplorerProps {
   notifications?: string[];
@@ -56,6 +57,12 @@ class NotificationsExplorerComp extends React.Component<NotificationExplorerProp
     const { notifications = [] } = this.props;
     const clearAllButton = notifications.length ? this.renderClearAllButton() : null;
 
+    if (notifications.length) {
+      ariaAlertService.alert(`${notifications.length} new notifications`);
+    } else {
+      ariaAlertService.alert(`No new notifications`);
+    }
+
     // max-height: 100% of explorer pane - 20px (Clear all button height) - 40px (Explorer title height)
     return (
       <>

From 1514be9382c8697be55cccec32fb845975c7b12b Mon Sep 17 00:00:00 2001
From: Matias Lera <62261539+luislera@users.noreply.github.com>
Date: Thu, 2 Dec 2021 11:24:58 -0300
Subject: [PATCH 2/2] Updated notification announcement to use an aria-live
 region

---
 .../notificationsExplorer.scss                |  6 +++++
 .../notificationsExplorer.scss.d.ts           |  1 +
 .../notificationsExplorer.tsx                 | 23 ++++++++++++++-----
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/app/client/src/ui/shell/explorer/notificationsExplorer/notificationsExplorer.scss b/packages/app/client/src/ui/shell/explorer/notificationsExplorer/notificationsExplorer.scss
index 80f9dc30b..d27ac43a2 100644
--- a/packages/app/client/src/ui/shell/explorer/notificationsExplorer/notificationsExplorer.scss
+++ b/packages/app/client/src/ui/shell/explorer/notificationsExplorer/notificationsExplorer.scss
@@ -24,3 +24,9 @@
   margin: 0;
   margin-top: 15px;
 }
+
+.aria-live-region {
+  position: absolute;
+  top: -9999px;
+  overflow: hidden;
+}
diff --git a/packages/app/client/src/ui/shell/explorer/notificationsExplorer/notificationsExplorer.scss.d.ts b/packages/app/client/src/ui/shell/explorer/notificationsExplorer/notificationsExplorer.scss.d.ts
index 8b1d610d0..aa25c731a 100644
--- a/packages/app/client/src/ui/shell/explorer/notificationsExplorer/notificationsExplorer.scss.d.ts
+++ b/packages/app/client/src/ui/shell/explorer/notificationsExplorer/notificationsExplorer.scss.d.ts
@@ -2,3 +2,4 @@
 export const notificationsExplorer: string;
 export const clearAllNotificationsBtn: string;
 export const noNotificationsMsg: string;
+export const ariaLiveRegion: string;
diff --git a/packages/app/client/src/ui/shell/explorer/notificationsExplorer/notificationsExplorer.tsx b/packages/app/client/src/ui/shell/explorer/notificationsExplorer/notificationsExplorer.tsx
index 4368ffe7f..3889f230a 100644
--- a/packages/app/client/src/ui/shell/explorer/notificationsExplorer/notificationsExplorer.tsx
+++ b/packages/app/client/src/ui/shell/explorer/notificationsExplorer/notificationsExplorer.tsx
@@ -41,7 +41,6 @@ import { NotificationManager } from '../../../../notificationManager';
 
 import { Notification } from './notification';
 import * as styles from './notificationsExplorer.scss';
-import { ariaAlertService } from '../../../a11y';
 
 interface NotificationExplorerProps {
   notifications?: string[];
@@ -49,6 +48,8 @@ interface NotificationExplorerProps {
 }
 
 class NotificationsExplorerComp extends React.Component<NotificationExplorerProps, Record<string, unknown>> {
+  private spanNotificationRef: HTMLSpanElement;
+
   constructor(props: NotificationExplorerProps) {
     super(props);
   }
@@ -57,11 +58,11 @@ class NotificationsExplorerComp extends React.Component<NotificationExplorerProp
     const { notifications = [] } = this.props;
     const clearAllButton = notifications.length ? this.renderClearAllButton() : null;
 
-    if (notifications.length) {
-      ariaAlertService.alert(`${notifications.length} new notifications`);
-    } else {
-      ariaAlertService.alert(`No new notifications`);
-    }
+    setTimeout(() => {
+      this.spanNotificationRef.innerText = notifications.length
+        ? `${notifications.length} new notifications`
+        : 'No new notifications';
+    }, 500);
 
     // max-height: 100% of explorer pane - 20px (Clear all button height) - 40px (Explorer title height)
     return (
@@ -77,6 +78,12 @@ class NotificationsExplorerComp extends React.Component<NotificationExplorerProp
             <p className={styles.noNotificationsMsg}>No new notifications.</p>
           )}
         </ul>
+        <span
+          id="spanNotification"
+          aria-live={'polite'}
+          ref={this.setSpanNotificationRef}
+          className={styles.ariaLiveRegion}
+        />
       </>
     );
   }
@@ -88,6 +95,10 @@ class NotificationsExplorerComp extends React.Component<NotificationExplorerProp
       </LinkButton>
     );
   };
+
+  private setSpanNotificationRef = (ref: HTMLSpanElement): void => {
+    this.spanNotificationRef = ref;
+  };
 }
 
 const mapStateToProps = (state: RootState): NotificationExplorerProps => {