[Chat] Announce File Attachments in New Messages (#4438)

Author: jpeng-ms

change-beta/@azure-communication-react-e07ac585-a2a7-490b-9b4c-41edf4847a6e.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "File Sharing",
+  "comment": "Add Chat Attachments in Live Messages",
+  "packageName": "@azure/communication-react",
+  "email": "109105353+jpeng-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-e07ac585-a2a7-490b-9b4c-41edf4847a6e.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "File Sharing",
+  "comment": "Add Chat Attachments in Live Messages",
+  "packageName": "@azure/communication-react",
+  "email": "109105353+jpeng-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -8,6 +8,8 @@ import { useMemo } from 'react';
 import { useLocale } from '../localization';
 import { _AttachmentCard } from './AttachmentCard';
 import { _AttachmentCardGroup } from './AttachmentCardGroup';
+/* @conditional-compile-remove(attachment-download) */
+import { getAttachmentCountLiveMessage } from './ChatMessage/ChatMessageContent';
 import { _formatString } from '@internal/acs-ui-common';
 import { AttachmentMenuAction, AttachmentMetadata } from '../types/Attachment';
 import { ChatMessage } from '../types';
@@ -102,15 +104,12 @@ export const _AttachmentDownloadCards = (props: _AttachmentDownloadCardsProps):
 
   const attachmentCardGroupDescription = useMemo(
     () => () => {
-      const attachmentGroupLocaleString =
-        props.strings?.attachmentCardGroupMessage ?? localeStrings.attachmentCardGroupMessage;
-      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-      return _formatString(attachmentGroupLocaleString, {
-        attachmentCount: `${attachments?.length ?? 0}`
-      });
-      return _formatString(attachmentGroupLocaleString, {
-        attachmentCount: `${attachments?.length ?? 0}`
-      });
+      /* @conditional-compile-remove(attachment-download) */
+      return getAttachmentCountLiveMessage(
+        attachments ?? [],
+        props.strings?.attachmentCardGroupMessage ?? localeStrings.attachmentCardGroupMessage
+      );
+      return '';
     },
     [props.strings?.attachmentCardGroupMessage, localeStrings.attachmentCardGroupMessage, attachments]
   );

packages/react-components/src/components/ChatMessage/ChatMessageContent.tsx

@@ -20,6 +20,9 @@ import LiveMessage from '../Announcer/LiveMessage';
 /* @conditional-compile-remove(mention) */
 import { defaultOnMentionRender } from './MentionRenderer';
 import DOMPurify from 'dompurify';
+import { _AttachmentDownloadCardsStrings } from '../AttachmentDownloadCards';
+/* @conditional-compile-remove(attachment-download) */
+import { AttachmentMetadata } from '../../types';
 
 type ChatMessageContentProps = {
   message: ChatMessage;
@@ -164,9 +167,12 @@ export const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.El
 };
 
 const extractContentForAllyMessage = (props: ChatMessageContentProps): string => {
-  if (props.message.content) {
+  let attachments = undefined;
+  /* @conditional-compile-remove(attachment-download) */
+  attachments = props.message.attachments;
+  if (props.message.content || attachments) {
     // Replace all <img> tags with 'image' for aria.
-    const parsedContent = DOMPurify.sanitize(props.message.content, {
+    const parsedContent = DOMPurify.sanitize(props.message.content ?? '', {
       ALLOWED_TAGS: ['img'],
       RETURN_DOM_FRAGMENT: true
     });
@@ -180,6 +186,16 @@ const extractContentForAllyMessage = (props: ChatMessageContentProps): string =>
       parsedContent.replaceChild(imageTextNode, child);
     });
 
+    // Inject attachment names for aria.
+    if (attachments) {
+      let attachmentList = '';
+      /* @conditional-compile-remove(attachment-download) */
+      attachmentList = attachmentCardGroupDescription(props);
+      const attachmentTextNode = document.createElement('div');
+      attachmentTextNode.innerHTML = ` ${attachmentList} `;
+      parsedContent.appendChild(attachmentTextNode);
+    }
+
     // Strip all html tags from the content for aria.
     const message = DOMPurify.sanitize(parsedContent, { ALLOWED_TAGS: [] });
     return message;
@@ -207,6 +223,29 @@ const messageContentAriaText = (props: ChatMessageContentProps): string | undefi
       });
 };
 
+/* @conditional-compile-remove(attachment-download) */
+const attachmentCardGroupDescription = (props: ChatMessageContentProps): string => {
+  const attachments = props.message.attachments;
+  return getAttachmentCountLiveMessage(attachments ?? [], props.strings.attachmentCardGroupMessage);
+};
+
+/* @conditional-compile-remove(attachment-download) */
+/**
+ * @private
+ */
+export const getAttachmentCountLiveMessage = (
+  attachments: AttachmentMetadata[],
+  attachmentCardGroupMessage: string
+): string => {
+  if (attachments.length === 0) {
+    return '';
+  }
+  return _formatString(attachmentCardGroupMessage, {
+    attachmentCount: `${attachments.length}`
+  });
+  return '';
+};
+
 const defaultOnRenderInlineImage = (inlineImage: InlineImage): JSX.Element => {
   return (
     <img