[A11y] Add aria-label for upload progress

change-beta/@azure-communication-react-a9d5fe68-a874-4d68-bef5-a3a814c33298.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "a11y",
+  "comment": "Add aria label for upload progress",
+  "packageName": "@azure/communication-react",
+  "email": "77021369+jimchou-dev@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-a9d5fe68-a874-4d68-bef5-a3a814c33298.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "a11y",
+  "comment": "Add aria label for upload progress",
+  "packageName": "@azure/communication-react",
+  "email": "77021369+jimchou-dev@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -4957,6 +4957,7 @@ export interface SendBoxStrings {
     textTooLong: string;
     uploadCompleted: string;
     uploading: string;
+    uploadProgress: string;
 }
 
 // @public

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

@@ -19,7 +19,7 @@ import {
 } from '@fluentui/react-components';
 import { getFileTypeIconProps } from '@fluentui/react-file-type-icons';
 import React from 'react';
-import { _pxToRem } from '@internal/acs-ui-common';
+import { _pxToRem, _formatString } from '@internal/acs-ui-common';
 import { Announcer } from '../Announcer';
 import { useEffect, useState, useMemo } from 'react';
 import { _AttachmentUploadCardsStrings } from './AttachmentUploadCards';
@@ -164,6 +164,9 @@ export const _AttachmentCard = (props: _AttachmentCardProps): JSX.Element => {
             thickness="medium"
             value={Math.max(progress ?? 0, ATTACHMENT_CARD_MIN_PROGRESS)}
             shape="rounded"
+            aria-label={progress
+              ? _formatString(localeStrings.uploadProgress, { progress: `${Math.round(progress * 100)}` })
+              : undefined}
           />
         </CardFooter>
       ) : (

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

@@ -18,6 +18,8 @@ export interface _AttachmentUploadCardsStrings {
   removeAttachment: string;
   /** Aria label to notify user attachment uploading starts. */
   uploading: string;
+  /** Aria label to notify user attachment upload progress. */
+  uploadProgress: string
   /** Aria label to notify user attachment is uploaded. */
   uploadCompleted: string;
   /** Aria label to notify user more attachment action menu. */

packages/react-components/src/components/RichTextEditor/RichTextSendBox.tsx

@@ -541,6 +541,7 @@ export const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {
             strings={{
               removeAttachment: strings.removeAttachment,
               uploading: strings.uploading,
+              uploadProgress: strings.uploadProgress,
               uploadCompleted: strings.uploadCompleted,
               attachmentMoreMenu: strings.attachmentMoreMenu
             }}
@@ -556,6 +557,7 @@ export const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {
     onCancelAttachmentUpload,
     strings.removeAttachment,
     strings.uploading,
+    strings.uploadProgress,
     strings.uploadCompleted,
     strings.attachmentMoreMenu,
     disabled

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

@@ -91,6 +91,11 @@ export interface SendBoxStrings {
    */
   uploading: string;
   /* @conditional-compile-remove(file-sharing-acs) */
+  /**
+   * Aria label to notify user attachment upload progress.
+   */
+  uploadProgress: string;
+  /* @conditional-compile-remove(file-sharing-acs) */
   /**
    * Aria label to notify user attachment is uploaded.
    */
@@ -360,6 +365,7 @@ export const SendBox = (props: SendBoxProps): JSX.Element => {
             strings={{
               removeAttachment: props.strings?.removeAttachment ?? localeStrings.removeAttachment,
               uploading: props.strings?.uploading ?? localeStrings.uploading,
+              uploadProgress: props.strings?.uploadProgress ?? localeStrings.uploadProgress,
               uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted,
               attachmentMoreMenu: props.strings?.attachmentMoreMenu ?? localeStrings.attachmentMoreMenu
             }}
@@ -375,6 +381,7 @@ export const SendBox = (props: SendBoxProps): JSX.Element => {
     customV9Styles.clearBackground,
     localeStrings.removeAttachment,
     localeStrings.uploading,
+    localeStrings.uploadProgress,
     localeStrings.uploadCompleted,
     localeStrings.attachmentMoreMenu,
     disabled

packages/react-components/src/components/utils/common.ts

@@ -17,6 +17,7 @@ export const useLocaleAttachmentCardStringsTrampoline = (): _AttachmentUploadCar
     removeAttachment: '',
     uploadCompleted: '',
     uploading: '',
+    uploadProgress: '',
     attachmentMoreMenu: ''
   };
 };

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

@@ -32,6 +32,7 @@
     "attachmentUploadsPendingError": "File is uploading, please wait.",
     "removeAttachment": "Remove file",
     "uploading": "Uploading",
+    "uploadProgress": "Upload progress {progress}%",
     "uploadCompleted": "Upload completed",
     "attachmentMoreMenu": "More Options"
   },
@@ -43,6 +44,7 @@
     "imageUploadsPendingError": "Image is uploading, please wait.",
     "removeAttachment": "Remove file",
     "uploading": "Uploading",
+    "uploadProgress": "Upload progress {progress}%",
     "uploadCompleted": "Upload completed",
     "richTextBoldTooltip": "Bold",
     "richTextItalicTooltip": "Italic",