[Chat] Added Aria Roles to Attachment Components

change-beta/@azure-communication-react-f5fc64ea-6aee-4446-80dd-1ef2b06e33c3.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "File Sharing",
+  "comment": "Added Aria Roles for A11y",
+  "packageName": "@azure/communication-react",
+  "email": "109105353+jpeng-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-f5fc64ea-6aee-4446-80dd-1ef2b06e33c3.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "File Sharing",
+  "comment": "Added Aria Roles for A11y",
+  "packageName": "@azure/communication-react",
+  "email": "109105353+jpeng-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -114,7 +114,7 @@ export const _AttachmentCard = (props: _AttachmentCardProps): JSX.Element => {
         <CardHeader
           className={attachmentCardStyles.content}
           image={
-            <div className={attachmentCardStyles.fileIcon}>
+            <div className={attachmentCardStyles.fileIcon} role="img">
               <Icon
                 data-ui-id={'attachmenttype-icon'}
                 iconName={
@@ -181,6 +181,7 @@ const MappedMenuItems = (
     <TooltipHost content={menuActions[0].name}>
       <ToolbarButton
         aria-label={menuActions[0].name}
+        role="button"
         icon={menuActions[0].icon}
         onClick={() => {
           try {
@@ -197,14 +198,17 @@ const MappedMenuItems = (
         <TooltipHost content={localeStrings.attachmentMoreMenu}>
           <MenuTrigger>
             <ToolbarButton
-              icon={<Icon iconName="AttachmentMoreMenu" aria-label={localeStrings.attachmentMoreMenu} />}
+              aria-label={localeStrings.attachmentMoreMenu}
+              role="button"
+              icon={<Icon iconName="AttachmentMoreMenu" />}
             />
           </MenuTrigger>
         </TooltipHost>
         <MenuPopover>
           <MenuList>
             {menuActions.map((menuItem, index) => (
               <MenuItem
+                aria-label={menuItem.name}
                 key={index}
                 icon={menuItem.icon}
                 onClick={async () => {

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

@@ -54,6 +54,7 @@ export const _AttachmentCardGroup = (props: _AttachmentCardGroupProps): JSX.Elem
         attachmentGroupLayout === _AttachmentCardGroupLayout.Grid ? attachmentCardGirdLayout : attachmentCardFlexLayout
       )}
       aria-label={ariaLabel}
+      role="list"
     >
       {children}
     </Stack>

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

@@ -73,9 +73,9 @@ export const _AttachmentUploadCards = (props: AttachmentUploadCardsProps): JSX.E
               key={attachment.id}
               menuActions={[
                 {
-                  name: props.strings?.removeAttachment ?? 'Remove',
+                  name: removeAttachmentButtonString(),
                   icon: (
-                    <div aria-label={removeAttachmentButtonString()} data-testid="attachment-upload-card-remove">
+                    <div data-testid="attachment-upload-card-remove">
                       <Icon iconName="CancelAttachmentUpload" className={mergeStyles(actionIconStyle)} />
                     </div>
                   ),