Review Fixes: Updated the logic to programmatically change status ele…

…ment's content.
Brightscout · Dec 20, 2024 · e7ba7ac · e7ba7ac
1 parent 55b564a
commit e7ba7ac
Showing 1 changed file with 8 additions and 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
@@ -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>
     );
 };