[Chat] Fix Issue where screen reader announces "&nbsp" (#4500)

Author: jpeng-ms

change-beta/@azure-communication-react-ae22d0dd-faa2-44a9-9ab8-ee1a35bdfa0f.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Inline Image",
+  "comment": "Fixed Screen Reader Reads ` `",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-ae22d0dd-faa2-44a9-9ab8-ee1a35bdfa0f.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Inline Image",
+  "comment": "Fixed Screen Reader Reads ` `",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -186,13 +186,13 @@ 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);
+    // Inject message attachment count for aria.
+    // this is only applying to file attachments not for inline images.
+    /* @conditional-compile-remove(attachment-download) */
+    if (attachments && attachments.length > 0) {
+      const attachmentCardDescription = attachmentCardGroupDescription(props);
       const attachmentTextNode = document.createElement('div');
-      attachmentTextNode.innerHTML = ` ${attachmentList} `;
+      attachmentTextNode.innerHTML = `${attachmentCardDescription}`;
       parsedContent.appendChild(attachmentTextNode);
     }