improve the a11y of the upload progress

ant-design · May 29, 2023 · 2d941d9 · 2d941d9
1 parent 61d0d05
commit 2d941d9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx
@@ -15,7 +15,7 @@ import useStyle from './style';
 import { getSize, getSuccessPercent, validProgress } from './utils';
 
 export const ProgressTypes = ['line', 'circle', 'dashboard'] as const;
-export type ProgressType = typeof ProgressTypes[number];
+export type ProgressType = (typeof ProgressTypes)[number];
 const ProgressStatuses = ['normal', 'exception', 'active', 'success'] as const;
 export type ProgressSize = 'default' | 'small';
 export type StringGradients = { [percentage: string]: string };
@@ -36,7 +36,7 @@ export interface ProgressProps {
   type?: ProgressType;
   percent?: number;
   format?: (percent?: number, successPercent?: number) => React.ReactNode;
-  status?: typeof ProgressStatuses[number];
+  status?: (typeof ProgressStatuses)[number];
   showInfo?: boolean;
   strokeWidth?: number;
   strokeLinecap?: 'butt' | 'square' | 'round';
@@ -52,6 +52,8 @@ export interface ProgressProps {
   steps?: number;
   /** @deprecated Use `success` instead */
   successPercent?: number;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
   children?: React.ReactNode;
 }
 
@@ -68,6 +70,8 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
     type = 'line',
     status,
     format,
+    ariaLabel,
+    ariaLabelledBy,
     ...restProps
   } = props;
 
@@ -79,7 +83,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
     );
   }, [percent, props.success, props.successPercent]);
 
-  const progressStatus = React.useMemo<typeof ProgressStatuses[number]>(() => {
+  const progressStatus = React.useMemo<(typeof ProgressStatuses)[number]>(() => {
     if (!ProgressStatuses.includes(status!) && percentNumber >= 100) {
       return 'success';
     }
@@ -175,6 +179,9 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
       ref={ref}
       className={classString}
       role="progressbar"
+      aria-valuenow={percentNumber}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
       {...omit(restProps, [
         'trailColor',
         'strokeWidth',

diff --git a/components/upload/UploadList/ListItem.tsx b/components/upload/UploadList/ListItem.tsx
@@ -247,7 +247,13 @@ const ListItem = React.forwardRef(
               // show loading icon if upload progress listener is disabled
               const loadingProgress =
                 'percent' in file ? (
-                  <Progress {...progressProps} type="line" percent={file.percent} />
+                  <Progress
+                    {...progressProps}
+                    type="line"
+                    percent={file.percent}
+                    ariaLabel={file.ariaLabel}
+                    ariaLabelledBy={file.ariaLabelledBy}
+                  />
                 ) : null;
 
               return (

diff --git a/components/upload/interface.ts b/components/upload/interface.ts
@@ -1,7 +1,7 @@
 import type {
   RcFile as OriRcFile,
-  UploadProps as RcUploadProps,
   UploadRequestOption as RcCustomRequestOptions,
+  UploadProps as RcUploadProps,
 } from 'rc-upload/lib/interface';
 import type * as React from 'react';
 import type { ProgressProps } from '../progress';
@@ -35,6 +35,8 @@ export interface UploadFile<T = any> {
   type?: string;
   xhr?: T;
   preview?: string;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
 }
 
 export interface InternalUploadFile<T = any> extends UploadFile<T> {