From 5a145eb407403bad6b27acd23a0655803e92ccda Mon Sep 17 00:00:00 2001
From: mahmed2000 <49453542+mahmed2000@users.noreply.github.com>
Date: Mon, 15 Apr 2024 06:06:29 +0500
Subject: [PATCH] Fixes for aria-live bugs (#3694)

* make the aria-live text adhere to the last message's username

* Wrap lastMessage in an Interweave to handle pre-encoded characters properly

---------

Co-authored-by: Muaz Ahmad <mahmad2000@protonmail.com>
---
 .../chat/ChatContainer/ChatContainer.tsx           | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx
index 06a1413b4..cd8fab348 100644
--- a/web/components/chat/ChatContainer/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer/ChatContainer.tsx
@@ -1,6 +1,7 @@
 import { Virtuoso } from 'react-virtuoso';
 import { useState, useMemo, useRef, CSSProperties, FC, useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import { Interweave } from 'interweave';
 import {
   ConnectedClientInfoEvent,
   FediverseEvent,
@@ -320,8 +321,15 @@ 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}`;
+      const lastMessage = messages[messages.length - 1];
+      const message = lastMessage.body.replace(/(<([^>]+)>)/gi, '');
+      let stringToRead = '';
+      if (typeof lastMessage.user !== 'undefined') {
+        const username = lastMessage.user.displayName;
+        stringToRead = `${username} said ${message}`;
+      } else {
+        stringToRead = `System message: ${message}`;
+      }
       return stringToRead;
     }
     return '';
@@ -364,7 +372,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
         )}
       </div>
       <span className={styles.chatAccessibilityHidden} aria-live="polite">
-        {lastMessage}
+        <Interweave content={lastMessage} />
       </span>
     </ErrorBoundary>
   );