[Chat] Add a Narrator announcement when a message is deleted (#3844)

Author: vhuseinova-msft

change-beta/@azure-communication-react-569dd235-985b-4a5a-ad00-f518528e171f.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Accessibility",
+  "comment": "Add a Narrator announcement when a message is deleted",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-569dd235-985b-4a5a-ad00-f518528e171f.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Accessibility",
+  "comment": "Add a Narrator announcement when a message is deleted",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/communication-react/review/beta/communication-react.api.md

@@ -3187,6 +3187,7 @@ export interface MessageThreadStrings {
     liveAuthorIntro: string;
     messageContentAriaText: string;
     messageContentMineAriaText: string;
+    messageDeletedAnnouncementAriaLabel: string;
     messageReadCount?: string;
     monday: string;
     newMessagesIndicator: string;

packages/communication-react/review/stable/communication-react.api.md

@@ -2461,6 +2461,7 @@ export interface MessageThreadStrings {
     liveAuthorIntro: string;
     messageContentAriaText: string;
     messageContentMineAriaText: string;
+    messageDeletedAnnouncementAriaLabel: string;
     messageReadCount?: string;
     monday: string;
     newMessagesIndicator: string;

packages/react-components/review/beta/react-components.api.md

@@ -1533,6 +1533,7 @@ export interface MessageThreadStrings {
     liveAuthorIntro: string;
     messageContentAriaText: string;
     messageContentMineAriaText: string;
+    messageDeletedAnnouncementAriaLabel: string;
     messageReadCount?: string;
     monday: string;
     newMessagesIndicator: string;

packages/react-components/review/stable/react-components.api.md

@@ -1220,6 +1220,7 @@ export interface MessageThreadStrings {
     liveAuthorIntro: string;
     messageContentAriaText: string;
     messageContentMineAriaText: string;
+    messageDeletedAnnouncementAriaLabel: string;
     messageReadCount?: string;
     monday: string;
     newMessagesIndicator: string;

packages/react-components/src/components/MessageThread.tsx

@@ -50,6 +50,7 @@ import {
   ChatMessageComponentWrapper,
   ChatMessageComponentWrapperProps
 } from './ChatMessage/ChatMessageComponentWrapper';
+import { Announcer } from './Announcer';
 
 const isMessageSame = (first: ChatMessage, second: ChatMessage): boolean => {
   return (
@@ -211,6 +212,8 @@ export interface MessageThreadStrings {
   editBoxSubmitButton: string;
   /** String for action menu indicating there are more options */
   actionMenuMoreOptions?: string;
+  /** Aria label to announce when a message is deleted */
+  messageDeletedAnnouncementAriaLabel: string;
   /* @conditional-compile-remove(file-sharing) */
   /** String for download file button in file card */
   downloadFile: string;
@@ -715,6 +718,33 @@ export const MessageThreadWrapper = (props: MessageThreadProps): JSX.Element =>
     [onFetchAttachments]
   );
 
+  const localeStrings = useLocale().strings.messageThread;
+  const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);
+
+  // id for the latest deleted message
+  const [latestDeletedMessageId, setLatestDeletedMessageId] = useState<string | undefined>(undefined);
+  // this value is used to check if a message is deleted for the previous value of messages array
+  const previousMessagesRef = useRef<Message[]>([]);
+  // an aria label for Narrator to notify when a message is deleted
+  const [deletedMessageAriaLabel, setDeletedMessageAriaLabel] = useState<string | undefined>(undefined);
+
+  const onDeleteMessageCallback = useCallback(
+    async (messageId: string): Promise<void> => {
+      if (!onDeleteMessage) {
+        return;
+      }
+      try {
+        await onDeleteMessage(messageId);
+        // reset deleted message label in case if there was a value already (messages are deleted 1 after another)
+        setDeletedMessageAriaLabel(undefined);
+        setLatestDeletedMessageId(messageId);
+      } catch (e) {
+        console.log('onDeleteMessage failed: messageId', messageId, 'error', e);
+      }
+    },
+    [onDeleteMessage]
+  );
+
   const isAllChatMessagesLoadedRef = useRef(false);
   // isAllChatMessagesLoadedRef needs to be updated every time when a new adapter is set in order to display correct data
   // onLoadPreviousChatMessages is updated when a new adapter is set
@@ -741,6 +771,27 @@ export const MessageThreadWrapper = (props: MessageThreadProps): JSX.Element =>
     return newMessages;
   }, [newMessages]);
 
+  useEffect(() => {
+    if (latestDeletedMessageId === undefined) {
+      setDeletedMessageAriaLabel(undefined);
+    } else {
+      if (!previousMessagesRef.current.find((message) => message.messageId === latestDeletedMessageId)) {
+        // the message is deleted in previousMessagesRef
+        // no need to update deletedMessageAriaLabel
+        setDeletedMessageAriaLabel(undefined);
+      } else if (!messages.find((message) => message.messageId === latestDeletedMessageId)) {
+        // the message is deleted in messages array but still exists in previousMessagesRef
+        // update deletedMessageAriaLabel
+        setDeletedMessageAriaLabel(strings.messageDeletedAnnouncementAriaLabel);
+      } else {
+        // the message exists in both arrays
+        // no need to update deletedMessageAriaLabel
+        setDeletedMessageAriaLabel(undefined);
+      }
+    }
+    previousMessagesRef.current = messages;
+  }, [latestDeletedMessageId, messages, strings.messageDeletedAnnouncementAriaLabel]);
+
   const messagesRef = useRef(messages);
   const setMessagesRef = (messagesWithAttachedValue: Message[]): void => {
     messagesRef.current = messagesWithAttachedValue;
@@ -961,9 +1012,6 @@ export const MessageThreadWrapper = (props: MessageThreadProps): JSX.Element =>
     []
   );
 
-  const localeStrings = useLocale().strings.messageThread;
-  const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);
-
   const defaultStatusRenderer = useCallback(
     (
       message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage,
@@ -1006,7 +1054,7 @@ export const MessageThreadWrapper = (props: MessageThreadProps): JSX.Element =>
           index,
           onUpdateMessage,
           onCancelEditMessage,
-          onDeleteMessage,
+          onDeleteMessageCallback,
           onSendMessage,
           props.disableEditing,
           lastDeliveredChatMessage,
@@ -1021,7 +1069,7 @@ export const MessageThreadWrapper = (props: MessageThreadProps): JSX.Element =>
     lastSendingChatMessage,
     messages,
     onCancelEditMessage,
-    onDeleteMessage,
+    onDeleteMessageCallback,
     onSendMessage,
     onUpdateMessage,
     props.disableEditing,
@@ -1048,6 +1096,7 @@ export const MessageThreadWrapper = (props: MessageThreadProps): JSX.Element =>
       )}
       <LiveAnnouncer>
         <FluentV9ThemeProvider v8Theme={theme}>
+          <Announcer announcementString={deletedMessageAriaLabel} ariaLive={'assertive'} />
           <Chat
             // styles?.chatContainer used in className and style prop as style prop can't handle CSS selectors
             className={mergeClasses(classes.root, mergeStyles(styles?.chatContainer))}

packages/react-components/src/localization/locales/en-US/strings.json

@@ -153,7 +153,8 @@
     "downloadFile": "Download file",
     "blockedWarningText": "This message was deleted due to organizational policy.",
     "blockedWarningLinkText": "Details",
-    "fileCardGroupMessage": "The message has {fileCount} attachment"
+    "fileCardGroupMessage": "The message has {fileCount} attachment",
+    "messageDeletedAnnouncementAriaLabel": "The message is deleted"
   },
   "errorBar": {
     "unableToReachChatService": "You are offline",