[MA-22]: Added aria-live property for message sent status

Brightscout · Dec 19, 2024 · 08cd563 · 08cd563
1 parent 76a3af6
commit 08cd563
Showing 1 changed file with 29 additions and 5 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
@@ -20,6 +20,7 @@ import {haveIChannelPermission} from 'mattermost-redux/selectors/entities/roles'
 import {getCurrentUserId, isCurrentUserGuestUser, getStatusForUserId, makeGetDisplayName} from 'mattermost-redux/selectors/entities/users';
 
 import * as GlobalActions from 'actions/global_actions';
+import type {CreatePostOptions} from 'actions/post_actions';
 import {actionOnGlobalItemsWithPrefix} from 'actions/storage';
 import type {SubmitPostReturnType} from 'actions/views/create_comment';
 import {removeDraft, updateDraft} from 'actions/views/drafts';
@@ -342,6 +343,19 @@ const AdvancedTextEditor = ({
         isInEditMode,
     );
 
+    const onSubmit = useCallback((submittingDraft?: PostDraft, schedulingInfo?: SchedulingInfo, options?: CreatePostOptions) => {
+        handleSubmit(submittingDraft, schedulingInfo, options);
+        if (!errorClass) {
+            const messageStatusElement = document.getElementById('sentMessageStatus');
+            const messageStatusInnerText = messageStatusElement?.innerText;
+            if (messageStatusInnerText === 'Message Sent') {
+                messageStatusElement!.innerHTML = 'Message Sent &nbsp;';
+            } else {
+                messageStatusElement!.innerText = 'Message Sent';
+            }
+        }
+    }, [errorClass, handleSubmit]);
+
     const handleCancel = useCallback(() => {
         // This resets the draft to the post's original content
         handleDraftChange({
@@ -367,8 +381,8 @@ const AdvancedTextEditor = ({
             return;
         }
 
-        handleSubmit();
-    }, [dispatch, draft, handleSubmit, isInEditMode, isRHS]);
+        onSubmit();
+    }, [dispatch, draft, onSubmit, isInEditMode, isRHS]);
 
     const [handleKeyDown, postMsgKeyPress] = useKeyHandler(
         draft,
@@ -393,8 +407,8 @@ const AdvancedTextEditor = ({
 
     const handleSubmitWithEvent = useCallback((e: React.FormEvent) => {
         e.preventDefault();
-        handleSubmit();
-    }, [handleSubmit]);
+        onSubmit();
+    }, [onSubmit]);
 
     const handlePostError = useCallback((err: React.ReactNode) => {
         setPostError(err);
@@ -548,7 +562,9 @@ const AdvancedTextEditor = ({
         draftRef.current = draft;
     }, [draft]);
 
-    const handleSubmitPostAndScheduledMessage = useCallback((schedulingInfo?: SchedulingInfo) => handleSubmit(undefined, schedulingInfo), [handleSubmit]);
+    const handleSubmitPostAndScheduledMessage = useCallback((schedulingInfo?: SchedulingInfo) => {
+        onSubmit(undefined, schedulingInfo);
+    }, [onSubmit]);
 
     // Set the draft from store when changing post or channels, and store the previous one
     useEffect(() => {
@@ -837,6 +853,14 @@ const AdvancedTextEditor = ({
                 noArgumentHandleSubmit={handleSubmitWrapper}
                 isInEditMode={isInEditMode}
             />
+            <div
+                id='sentMessageStatus'
+                aria-live='assertive'
+                style={{
+                    position: 'absolute',
+                    top: '-1000px',
+                }}
+            >{ }</div>
         </form>
     );
 };