[A11y] Fix an issue where attachments card group had incorrect children roles (#5704)

Author: vhuseinova-msft

change-beta/@azure-communication-react-e5646187-d63f-4c24-90d0-eafe141c850d.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "A11y",
+  "comment": "Fix an issue where attachments card group had incorrect children roles",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-e5646187-d63f-4c24-90d0-eafe141c850d.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "A11y",
+  "comment": "Fix an issue where attachments card group had incorrect children roles",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/Attachment/AttachmentCard.tsx

@@ -99,7 +99,6 @@ export const _AttachmentCard = (props: _AttachmentCardProps): JSX.Element => {
   }, [attachment]);
   return (
     <div data-is-focusable={true}>
-      <Announcer announcementString={announcerString} ariaLive={'polite'} />
       <Card
         className={mergeClasses(
           attachmentCardStyles.root,
@@ -111,6 +110,7 @@ export const _AttachmentCard = (props: _AttachmentCardProps): JSX.Element => {
         aria-label={attachment.name}
         data-testid={'attachment-card'}
       >
+        <Announcer announcementString={announcerString} ariaLive={'polite'} />
         <CardHeader
           className={attachmentCardStyles.content}
           image={{