fix: a11y: don't disable composer while sending

The primary point of this change is to remove
`textarea.focus()`, which makes screen readers re-announce
the composer, which is disorienting and pointless.

Partially addresses
#4590 (comment).

This change has side-effects:
- Now if the user starts typing right after sending a message,
  we will not ignore it, as we would if the composer was disabled,
  which is good.
- However, as a consequence, now it's possible to type
  while a message is being sent,
  which might have unexpected consequences itself,
  i.e. race conditions, i.e. bugs.

This also improves the alert dialog that pops up if sending fails.

Author: WofWca

CHANGELOG.md

@@ -2,16 +2,14 @@
 
 ## [Unreleased][unreleased]
 
-<<<<<<< HEAD
+### Added
+- support multiple selection (multiselect) in the list of chats, activated with Ctrl + Click, Shift + Click #5297
+
 ### Fixed
 - fix "Recent 3 apps" in the chat header showing apps from another chat sometimes #5265
+- accessibility: don't re-announce message input (composer) after sending every message #5049
 - don't close context menues on window resize #5418
 
-=======
-### Added
-- support multiple selection (multiselect) in the list of chats, activated with Ctrl + Click, Shift + Click #5297
->>>>>>> b9d383489 (docs: add CHANGELOG entry)
-
 <a id="2_11_1"></a>
 
 ## [2.11.1] - 2025-09-01

packages/frontend/src/components/composer/Composer.tsx

@@ -76,6 +76,8 @@ const Composer = forwardRef<
     ) => Promise<void>
     removeFile: () => void
     clearDraftStateButKeepTextareaValue: () => void
+    clearDraftStateAndUpdateTextareaValue: () => void
+    setDraftStateAndUpdateTextareaValue: (newValue: DraftObject) => void
   }
 >((props, ref) => {
   const {
@@ -210,49 +212,68 @@ const Composer = forwardRef<
         if (textareaRef) {
           if (textareaRef.disabled) {
             throw new Error(
-              'text area is disabled, this means it is either already sending or loading the draft'
+              'text area is disabled, this means it is loading the draft'
             )
           }
-          textareaRef.disabled = true
         }
-        try {
-          const message = regularMessageInputRef.current?.getText() || ''
-          if (!regularMessageInputRef.current?.hasText() && !draftState.file) {
-            log.debug(`Empty message: don't send it...`)
-            return
-          }
-
-          const sendMessagePromise = sendMessage(accountId, chatId, {
-            text: replaceColonsSafe(message),
-            file: draftState.file || undefined,
-            filename: draftState.fileName || undefined,
-            quotedMessageId:
-              draftState.quote?.kind === 'WithMessage'
-                ? draftState.quote.messageId
-                : null,
-            viewtype: draftState.viewType,
-          })
+        const message = regularMessageInputRef.current?.getText() || ''
+        if (!regularMessageInputRef.current?.hasText() && !draftState.file) {
+          log.debug(`Empty message: don't send it...`)
+          return
+        }
 
+        const preSendDraftState = draftState
+        const sendMessagePromise = sendMessage(accountId, chatId, {
+          text: replaceColonsSafe(message),
+          file: draftState.file || undefined,
+          filename: draftState.fileName || undefined,
+          quotedMessageId:
+            draftState.quote?.kind === 'WithMessage'
+              ? draftState.quote.messageId
+              : null,
+          viewtype: draftState.viewType,
+        })
+        // _Immediately_ clear the draft from React state.
+        // This does _not_ remove the draft from the back-end yet.
+        // This is primarily to make sure that you can't accidentally
+        // doube-send the same message.
+        //
+        // We could instead disable the textarea
+        // and disable sending the next message
+        // until the previous one has been sent,
+        // but it's unnecessary to block the user in such a way,
+        // because it's not often that `sendMessage` fails.
+        // And also disabling an input makes it lose focus,
+        // so we'd have to re-focus it, which would make screen readers
+        // re-announce it, which is disorienting.
+        // See https://github.com/deltachat/deltachat-desktop/issues/4590#issuecomment-2821985528.
+        props.clearDraftStateAndUpdateTextareaValue()
+
+        let sentSuccessfully: boolean
+        try {
           await sendMessagePromise
-
-          // Ensure that the draft is cleared
-          // and the state is reflected in the UI.
-          //
-          // At this point we know that sending has succeeded,
-          // so we do not accidentally remove the draft
-          // if the core fails to send.
-          await BackendRemote.rpc.removeDraft(selectedAccountId(), chatId)
-          window.__reloadDraft && window.__reloadDraft()
-        } catch (error) {
+          sentSuccessfully = true
+        } catch (err) {
+          sentSuccessfully = false
           openDialog(AlertDialog, {
-            message: unknownErrorToString(error),
+            message:
+              tx('systemmsg_failed_sending_to', selectedChat.name) +
+              '\n' +
+              tx('error_x', unknownErrorToString(err)),
           })
-          log.error(error)
-        } finally {
-          if (textareaRef) {
-            textareaRef.disabled = false
-          }
-          regularMessageInputRef.current?.focus()
+          // Restore the draft, since we failed to send.
+          // Note that this will not save the draft to the backend.
+          //
+          // TODO fix: hypothetically by this point the user
+          // could have started typing a new message already,
+          // and so this would override it on the frontend.
+          props.setDraftStateAndUpdateTextareaValue(preSendDraftState)
+        }
+        if (sentSuccessfully) {
+          // TODO fix: hypothetically by this point the user
+          // could have started typing (and even have sent!)
+          // a new message already, so this would override it on the backend.
+          await BackendRemote.rpc.removeDraft(accountId, chatId)
         }
       }
 
@@ -723,6 +744,8 @@ export function useDraft(
   ) => Promise<void>
   removeFile: () => void
   clearDraftStateButKeepTextareaValue: () => void
+  clearDraftStateAndUpdateTextareaValue: () => void
+  setDraftStateAndUpdateTextareaValue: (newValue: DraftObject) => void
 } {
   const [
     draftState,
@@ -748,6 +771,17 @@ export function useDraft(
   const draftRef = useRef<DraftObject>(emptyDraft(chatId))
   draftRef.current = draftState
 
+  /**
+   * @see {@link _setDraftStateButKeepTextareaValue}.
+   */
+  const setDraftStateAndUpdateTextareaValue = useCallback(
+    (newValue: DraftObject) => {
+      _setDraftStateButKeepTextareaValue(newValue)
+      inputRef.current?.setText(newValue.text)
+    },
+    [inputRef]
+  )
+
   /**
    * Reset `draftState` to "empty draft" value,
    * but don't save it to backend and don't change the value
@@ -756,6 +790,12 @@ export function useDraft(
   const clearDraftStateButKeepTextareaValue = useCallback(() => {
     _setDraftStateButKeepTextareaValue(_ => emptyDraft(chatId))
   }, [chatId])
+  /**
+   * @see {@link clearDraftStateButKeepTextareaValue}
+   */
+  const clearDraftStateAndUpdateTextareaValue = useCallback(() => {
+    setDraftStateAndUpdateTextareaValue(emptyDraft(chatId))
+  }, [chatId, setDraftStateAndUpdateTextareaValue])
 
   const loadDraft = useCallback(
     (chatId: number) => {
@@ -807,11 +847,6 @@ export function useDraft(
     if (chatId === null || !canSend) {
       return
     }
-    if (inputRef.current?.textareaRef.current?.disabled) {
-      // Guard against strange races
-      log.warn('Do not save draft while sending')
-      return
-    }
     const accountId = selectedAccountId()
 
     const draft = draftRef.current
@@ -993,6 +1028,8 @@ export function useDraft(
     addFileToDraft,
     removeFile,
     clearDraftStateButKeepTextareaValue,
+    clearDraftStateAndUpdateTextareaValue,
+    setDraftStateAndUpdateTextareaValue,
   }
 }
 

packages/frontend/src/components/message/MessageListAndComposer.tsx

@@ -108,6 +108,8 @@ export default function MessageListAndComposer({ accountId, chat }: Props) {
     addFileToDraft,
     removeFile,
     clearDraftStateButKeepTextareaValue,
+    clearDraftStateAndUpdateTextareaValue,
+    setDraftStateAndUpdateTextareaValue,
   } = useDraft(
     accountId,
     chat.id,
@@ -327,6 +329,12 @@ export default function MessageListAndComposer({ accountId, chat }: Props) {
         clearDraftStateButKeepTextareaValue={
           clearDraftStateButKeepTextareaValue
         }
+        clearDraftStateAndUpdateTextareaValue={
+          clearDraftStateAndUpdateTextareaValue
+        }
+        setDraftStateAndUpdateTextareaValue={
+          setDraftStateAndUpdateTextareaValue
+        }
       />
     </div>
   )