From aad2dae5718a1b5fe1f2fd5156e19430bffa5b7c Mon Sep 17 00:00:00 2001 From: Jim Chou <77021369+jimchou-dev@users.noreply.github.com> Date: Fri, 27 Jun 2025 13:31:29 -0700 Subject: [PATCH 1/3] Add aria label for upload progress --- .../review/beta/communication-react.api.md | 1 + .../src/components/Attachment/AttachmentCard.tsx | 5 ++++- .../src/components/Attachment/AttachmentUploadCards.tsx | 2 ++ .../src/components/RichTextEditor/RichTextSendBox.tsx | 1 + packages/react-components/src/components/SendBox.tsx | 7 +++++++ packages/react-components/src/components/utils/common.ts | 1 + .../src/localization/locales/en-US/strings.json | 2 ++ 7 files changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/communication-react/review/beta/communication-react.api.md b/packages/communication-react/review/beta/communication-react.api.md index 138010a9634..76c1f6cf62e 100644 --- a/packages/communication-react/review/beta/communication-react.api.md +++ b/packages/communication-react/review/beta/communication-react.api.md @@ -4956,6 +4956,7 @@ export interface SendBoxStrings { textTooLong: string; uploadCompleted: string; uploading: string; + uploadProgress: string; } // @public diff --git a/packages/react-components/src/components/Attachment/AttachmentCard.tsx b/packages/react-components/src/components/Attachment/AttachmentCard.tsx index 0065b7d0804..ea8869f7ab6 100644 --- a/packages/react-components/src/components/Attachment/AttachmentCard.tsx +++ b/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} /> ) : ( diff --git a/packages/react-components/src/components/Attachment/AttachmentUploadCards.tsx b/packages/react-components/src/components/Attachment/AttachmentUploadCards.tsx index b003b187790..4cca78fabc2 100644 --- a/packages/react-components/src/components/Attachment/AttachmentUploadCards.tsx +++ b/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. */ diff --git a/packages/react-components/src/components/RichTextEditor/RichTextSendBox.tsx b/packages/react-components/src/components/RichTextEditor/RichTextSendBox.tsx index d5ddc14b492..1562adf6452 100644 --- a/packages/react-components/src/components/RichTextEditor/RichTextSendBox.tsx +++ b/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 }} diff --git a/packages/react-components/src/components/SendBox.tsx b/packages/react-components/src/components/SendBox.tsx index 9baebf1739f..c143b0d17a2 100644 --- a/packages/react-components/src/components/SendBox.tsx +++ b/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 diff --git a/packages/react-components/src/components/utils/common.ts b/packages/react-components/src/components/utils/common.ts index 6ac28be0b40..0b50a49b217 100644 --- a/packages/react-components/src/components/utils/common.ts +++ b/packages/react-components/src/components/utils/common.ts @@ -17,6 +17,7 @@ export const useLocaleAttachmentCardStringsTrampoline = (): _AttachmentUploadCar removeAttachment: '', uploadCompleted: '', uploading: '', + uploadProgress: '', attachmentMoreMenu: '' }; }; diff --git a/packages/react-components/src/localization/locales/en-US/strings.json b/packages/react-components/src/localization/locales/en-US/strings.json index a9d05aa407b..7a0809bfda3 100644 --- a/packages/react-components/src/localization/locales/en-US/strings.json +++ b/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", From f309ed5c7215afde13df34746fe5e0c2a30638f1 Mon Sep 17 00:00:00 2001 From: Jim Chou <77021369+jimchou-dev@users.noreply.github.com> Date: Fri, 27 Jun 2025 13:42:10 -0700 Subject: [PATCH 2/3] Change files --- ...ation-react-a9d5fe68-a874-4d68-bef5-a3a814c33298.json | 9 +++++++++ ...ation-react-a9d5fe68-a874-4d68-bef5-a3a814c33298.json | 9 +++++++++ 2 files changed, 18 insertions(+) create mode 100644 change-beta/@azure-communication-react-a9d5fe68-a874-4d68-bef5-a3a814c33298.json create mode 100644 change/@azure-communication-react-a9d5fe68-a874-4d68-bef5-a3a814c33298.json diff --git a/change-beta/@azure-communication-react-a9d5fe68-a874-4d68-bef5-a3a814c33298.json b/change-beta/@azure-communication-react-a9d5fe68-a874-4d68-bef5-a3a814c33298.json new file mode 100644 index 00000000000..0c03b896168 --- /dev/null +++ b/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" +} diff --git a/change/@azure-communication-react-a9d5fe68-a874-4d68-bef5-a3a814c33298.json b/change/@azure-communication-react-a9d5fe68-a874-4d68-bef5-a3a814c33298.json new file mode 100644 index 00000000000..0c03b896168 --- /dev/null +++ b/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" +} From 58896b92ad26ba0bd4ce0bbc53e1f94a84704524 Mon Sep 17 00:00:00 2001 From: Jim Chou <77021369+jimchou-dev@users.noreply.github.com> Date: Fri, 27 Jun 2025 13:48:32 -0700 Subject: [PATCH 3/3] fix lint --- .../src/components/RichTextEditor/RichTextSendBox.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-components/src/components/RichTextEditor/RichTextSendBox.tsx b/packages/react-components/src/components/RichTextEditor/RichTextSendBox.tsx index 1562adf6452..2be452c195f 100644 --- a/packages/react-components/src/components/RichTextEditor/RichTextSendBox.tsx +++ b/packages/react-components/src/components/RichTextEditor/RichTextSendBox.tsx @@ -557,6 +557,7 @@ export const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => { onCancelAttachmentUpload, strings.removeAttachment, strings.uploading, + strings.uploadProgress, strings.uploadCompleted, strings.attachmentMoreMenu, disabled