From aa5d505d7b61b7299a21db10a44898da0c379e5c Mon Sep 17 00:00:00 2001
From: Anna Gavrilman <annagav@users.noreply.github.com>
Date: Wed, 7 Aug 2024 10:34:06 -0400
Subject: [PATCH] Make the enrollment alert read by screen reader (#2324)

---
 .../src/components/NotificationContainer.js   | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/frontend/public/src/components/NotificationContainer.js b/frontend/public/src/components/NotificationContainer.js
index e1a0136808..fa091a17a1 100644
--- a/frontend/public/src/components/NotificationContainer.js
+++ b/frontend/public/src/components/NotificationContainer.js
@@ -31,10 +31,27 @@ type State = {
 }
 
 export class NotificationContainer extends React.Component<Props, State> {
+  headingRef: { current: null | HTMLDivElement }
+
+  constructor(props: Props) {
+    super(props)
+    this.headingRef = React.createRef()
+  }
   state = {
     hiddenNotifications: new Set()
   }
 
+  componentDidMount() {
+    if (this.headingRef.current) {
+      this.headingRef.current.focus()
+    }
+  }
+  componentDidUpdate() {
+    if (this.headingRef.current) {
+      this.headingRef.current.focus()
+    }
+  }
+
   onDismiss = (notificationKey: string) => {
     const { removeUserNotification, messageRemoveDelayMs } = this.props
     const { hiddenNotifications } = this.state
@@ -59,7 +76,11 @@ export class NotificationContainer extends React.Component<Props, State> {
     const { hiddenNotifications } = this.state
 
     return (
-      <div className="notifications order-2" id="notifications-container">
+      <div
+        className="notifications order-2"
+        id="notifications-container"
+        ref={this.headingRef}
+      >
         {Object.keys(userNotifications).map((notificationKey, i) => {
           const dismiss = partial(this.onDismiss, [notificationKey])
           const notification = userNotifications[notificationKey]
@@ -81,6 +102,7 @@ export class NotificationContainer extends React.Component<Props, State> {
               toggle={dismiss}
               fade={true}
               closeClassName="btn-close-white"
+              closeAriaLabel="Close Enrollment Notification Button"
             >
               <AlertBodyComponent dismiss={dismiss} {...notification.props} />
             </Alert>