State-changed events modified to be in aria live region (#3469)

* Made changes to chatcontainer, still facing issue with only reading out the newest message

* Added accessibility measure for chat to allow for latest message to be read by screen reader

* Fixed linting errors

* Fixed linting errors pt. 2

* Fixed linting errors, the finale?

* Ok this is actually it i promise

* add username to be read out by screenreader

* fix string concat linter issue

* fix linting indexing issue

* remove test mp4 files

---------

Co-authored-by: melghali <melghali@andrew.cmu.edu>

web/components/chat/ChatContainer/ChatContainer.module.scss

@@ -71,3 +71,12 @@
     transform: translateY(0);
   }
 }
+
+.chatAccessibilityHidden {
+  top:0;
+  left:-2px;
+  width:1px;
+  height:1px;
+  position:absolute;
+  overflow:hidden;
+}

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -317,6 +317,17 @@ export const ChatContainer: FC<ChatContainerProps> = ({
     }
   }
 
+  // Retrieve, clean, and attach username to newest chat message to be read out by screenreader
+  function getLastMessage() {
+    if (messages.length > 0 && typeof messages[messages.length - 1].body !== 'undefined') {
+      const message = messages[messages.length - 1].body.replace(/(<([^>]+)>)/gi, '');
+      const stringToRead = `${usernameToHighlight} said ${message}`;
+      return stringToRead;
+    }
+    return '';
+  }
+  const lastMessage = getLastMessage();
+
   if (resizeWindowCallback) window.removeEventListener('resize', resizeWindowCallback);
   if (desktop) {
     window.addEventListener('resize', resize);
@@ -337,6 +348,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
       )}
     >
       <div
+        aria-live="off"
         id="chat-container"
         className={styles.chatContainer}
         style={desktop && { width: `${defaultChatWidth}px` }}
@@ -351,6 +363,9 @@ export const ChatContainer: FC<ChatContainerProps> = ({
           <div className={styles.resizeHandle} onMouseDown={startDrag} role="presentation" />
         )}
       </div>
+      <span className={styles.chatAccessibilityHidden} aria-live="polite">
+        {lastMessage}
+      </span>
     </ErrorBoundary>
   );
 };