From e7ba7ac5f42a586aca09d9eac3fe985027da7972 Mon Sep 17 00:00:00 2001
From: ayush-chauhan233 <ayush.chauhan@brightscout.com>
Date: Fri, 20 Dec 2024 17:01:05 +0530
Subject: [PATCH] Review Fixes: Updated the logic to programmatically change
 status element's content.

---
 .../advanced_text_editor.tsx                   | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx
index f1216f0254b..5879103f9a5 100644
--- a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx
+++ b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx
@@ -192,6 +192,7 @@ const AdvancedTextEditor = ({
     const draftRef = useRef(draftFromStore);
     const storedDrafts = useRef<Record<string, PostDraft | undefined>>({});
     const lastBlurAt = useRef(0);
+    const messageStatusRef = useRef<HTMLDivElement | null>(null);
 
     const [draft, setDraft] = useState(draftFromStore);
     const [caretPosition, setCaretPosition] = useState(draft.message.length);
@@ -346,12 +347,12 @@ const AdvancedTextEditor = ({
     const onSubmit = useCallback((submittingDraft?: PostDraft, schedulingInfo?: SchedulingInfo, options?: CreatePostOptions) => {
         handleSubmit(submittingDraft, schedulingInfo, options);
         if (!errorClass) {
-            const messageStatusElement = document.getElementById('sentMessageStatus');
-            const messageStatusInnerText = messageStatusElement?.innerText;
+            const messageStatusElement = messageStatusRef.current;
+            const messageStatusInnerText = messageStatusElement?.textContent;
             if (messageStatusInnerText === 'Message Sent') {
-                messageStatusElement!.innerHTML = 'Message Sent &nbsp;';
+                messageStatusElement!.textContent = 'Message Sent &nbsp;';
             } else {
-                messageStatusElement!.innerText = 'Message Sent';
+                messageStatusElement!.textContent = 'Message Sent';
             }
         }
     }, [errorClass, handleSubmit]);
@@ -854,13 +855,10 @@ const AdvancedTextEditor = ({
                 isInEditMode={isInEditMode}
             />
             <div
-                id='sentMessageStatus'
+                ref={messageStatusRef}
                 aria-live='assertive'
-                style={{
-                    position: 'absolute',
-                    top: '-1000px',
-                }}
-            >{ }</div>
+                className='sr-only'
+            />
         </form>
     );
 };