enhance: Improve the a11y of the upload progress bar (#42704)

* improve the a11y of the upload progress

* add a11y test, update snapshots

* pass aria props as part of restProps

* use kebab-case instead of camelCase for aria attributes

---------

Co-authored-by: afc163 <afc163@gmail.com>

components/config-provider/__tests__/__snapshots__/components.test.tsx.snap

@@ -21779,6 +21779,7 @@ exports[`ConfigProvider components Popover prefixCls 1`] = `
 
 exports[`ConfigProvider components Progress configProvider 1`] = `
 <div
+  aria-valuenow="0"
   class="config-progress config-progress-line config-progress-status-normal config-progress-show-info config-progress-default"
   role="progressbar"
 >
@@ -21806,6 +21807,7 @@ exports[`ConfigProvider components Progress configProvider 1`] = `
 
 exports[`ConfigProvider components Progress configProvider componentDisabled 1`] = `
 <div
+  aria-valuenow="0"
   class="config-progress config-progress-line config-progress-status-normal config-progress-show-info config-progress-default"
   role="progressbar"
 >
@@ -21833,6 +21835,7 @@ exports[`ConfigProvider components Progress configProvider componentDisabled 1`]
 
 exports[`ConfigProvider components Progress configProvider componentSize large 1`] = `
 <div
+  aria-valuenow="0"
   class="config-progress config-progress-line config-progress-status-normal config-progress-show-info config-progress-default"
   role="progressbar"
 >
@@ -21860,6 +21863,7 @@ exports[`ConfigProvider components Progress configProvider componentSize large 1
 
 exports[`ConfigProvider components Progress configProvider componentSize middle 1`] = `
 <div
+  aria-valuenow="0"
   class="config-progress config-progress-line config-progress-status-normal config-progress-show-info config-progress-default"
   role="progressbar"
 >
@@ -21887,6 +21891,7 @@ exports[`ConfigProvider components Progress configProvider componentSize middle
 
 exports[`ConfigProvider components Progress configProvider componentSize small 1`] = `
 <div
+  aria-valuenow="0"
   class="config-progress config-progress-line config-progress-status-normal config-progress-show-info config-progress-default"
   role="progressbar"
 >
@@ -21914,6 +21919,7 @@ exports[`ConfigProvider components Progress configProvider componentSize small 1
 
 exports[`ConfigProvider components Progress normal 1`] = `
 <div
+  aria-valuenow="0"
   class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
   role="progressbar"
 >
@@ -21941,6 +21947,7 @@ exports[`ConfigProvider components Progress normal 1`] = `
 
 exports[`ConfigProvider components Progress prefixCls 1`] = `
 <div
+  aria-valuenow="0"
   class="prefix-Progress prefix-Progress-line prefix-Progress-status-normal prefix-Progress-show-info prefix-Progress-default"
   role="progressbar"
 >

components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -10,6 +10,7 @@ exports[`renders components/progress/demo/circle.tsx extend context correctly 1`
     style="margin-right: 8px; padding-bottom: 8px;"
   >
     <div
+      aria-valuenow="75"
       class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
       role="progressbar"
     >
@@ -66,6 +67,7 @@ exports[`renders components/progress/demo/circle.tsx extend context correctly 1`
     style="margin-right: 8px; padding-bottom: 8px;"
   >
     <div
+      aria-valuenow="70"
       class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default"
       role="progressbar"
     >
@@ -139,6 +141,7 @@ exports[`renders components/progress/demo/circle.tsx extend context correctly 1`
     style="padding-bottom: 8px;"
   >
     <div
+      aria-valuenow="100"
       class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
       role="progressbar"
     >
@@ -213,6 +216,7 @@ exports[`renders components/progress/demo/circle.tsx extend context correctly 1`
 exports[`renders components/progress/demo/circle-dynamic.tsx extend context correctly 1`] = `
 Array [
   <div
+    aria-valuenow="0"
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
     role="progressbar"
     style="margin-right: 8px;"
@@ -336,6 +340,7 @@ Array [
 exports[`renders components/progress/demo/circle-micro.tsx extend context correctly 1`] = `
 Array [
   <div
+    aria-valuenow="60"
     class="ant-progress ant-progress-inline-circle ant-progress-circle ant-progress-status-normal ant-progress-show-info"
     role="progressbar"
   >
@@ -425,6 +430,7 @@ exports[`renders components/progress/demo/circle-mini.tsx extend context correct
     style="margin-right: 8px; padding-bottom: 8px;"
   >
     <div
+      aria-valuenow="30"
       class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
       role="progressbar"
     >
@@ -481,6 +487,7 @@ exports[`renders components/progress/demo/circle-mini.tsx extend context correct
     style="margin-right: 8px; padding-bottom: 8px;"
   >
     <div
+      aria-valuenow="70"
       class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info"
       role="progressbar"
     >
@@ -554,6 +561,7 @@ exports[`renders components/progress/demo/circle-mini.tsx extend context correct
     style="padding-bottom: 8px;"
   >
     <div
+      aria-valuenow="100"
       class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info"
       role="progressbar"
     >
@@ -635,6 +643,7 @@ exports[`renders components/progress/demo/dashboard.tsx extend context correctly
     style="margin-right: 8px; padding-bottom: 8px;"
   >
     <div
+      aria-valuenow="75"
       class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
       role="progressbar"
     >
@@ -691,6 +700,7 @@ exports[`renders components/progress/demo/dashboard.tsx extend context correctly
     style="padding-bottom: 8px;"
   >
     <div
+      aria-valuenow="75"
       class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
       role="progressbar"
     >
@@ -748,6 +758,7 @@ exports[`renders components/progress/demo/dashboard.tsx extend context correctly
 exports[`renders components/progress/demo/dynamic.tsx extend context correctly 1`] = `
 Array [
   <div
+    aria-valuenow="0"
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -850,6 +861,7 @@ exports[`renders components/progress/demo/format.tsx extend context correctly 1`
     style="margin-right: 8px; padding-bottom: 8px;"
   >
     <div
+      aria-valuenow="75"
       class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
       role="progressbar"
     >
@@ -906,6 +918,7 @@ exports[`renders components/progress/demo/format.tsx extend context correctly 1`
     style="padding-bottom: 8px;"
   >
     <div
+      aria-valuenow="100"
       class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
       role="progressbar"
     >
@@ -963,6 +976,7 @@ exports[`renders components/progress/demo/format.tsx extend context correctly 1`
 exports[`renders components/progress/demo/gradient-line.tsx extend context correctly 1`] = `
 Array [
   <div
+    aria-valuenow="99"
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -987,6 +1001,7 @@ Array [
     </span>
   </div>,
   <div
+    aria-valuenow="99"
     class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -1019,6 +1034,7 @@ Array [
       style="margin-right: 8px; padding-bottom: 8px;"
     >
       <div
+        aria-valuenow="90"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -1094,6 +1110,7 @@ Array [
       style="padding-bottom: 8px;"
     >
       <div
+        aria-valuenow="100"
         class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -1188,6 +1205,7 @@ Array [
 exports[`renders components/progress/demo/line.tsx extend context correctly 1`] = `
 Array [
   <div
+    aria-valuenow="30"
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -1212,6 +1230,7 @@ Array [
     </span>
   </div>,
   <div
+    aria-valuenow="50"
     class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -1236,6 +1255,7 @@ Array [
     </span>
   </div>,
   <div
+    aria-valuenow="70"
     class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -1277,6 +1297,7 @@ Array [
     </span>
   </div>,
   <div
+    aria-valuenow="100"
     class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -1318,6 +1339,7 @@ Array [
     </span>
   </div>,
   <div
+    aria-valuenow="50"
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default"
     role="progressbar"
   >
@@ -1343,6 +1365,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
   style="width: 170px;"
 >
   <div
+    aria-valuenow="30"
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-small"
     role="progressbar"
   >
@@ -1367,6 +1390,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
     </span>
   </div>
   <div
+    aria-valuenow="50"
     class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-small"
     role="progressbar"
   >
@@ -1391,6 +1415,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
     </span>
   </div>
   <div
+    aria-valuenow="70"
     class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-small"
     role="progressbar"
   >
@@ -1432,6 +1457,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
     </span>
   </div>
   <div
+    aria-valuenow="100"
     class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-small"
     role="progressbar"
   >
@@ -1478,6 +1504,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
 exports[`renders components/progress/demo/linecap.tsx extend context correctly 1`] = `
 Array [
   <div
+    aria-valuenow="75"
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -1511,6 +1538,7 @@ Array [
       style="margin-right: 8px; padding-bottom: 8px;"
     >
       <div
+        aria-valuenow="75"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -1567,6 +1595,7 @@ Array [
       style="padding-bottom: 8px;"
     >
       <div
+        aria-valuenow="75"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -1625,6 +1654,7 @@ Array [
 exports[`renders components/progress/demo/segment.tsx extend context correctly 1`] = `
 Array [
   <div
+    aria-valuenow="30"
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -1680,6 +1710,7 @@ Array [
       style="margin-right: 8px; padding-bottom: 8px;"
     >
       <div
+        aria-valuenow="30"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -1755,6 +1786,7 @@ Array [
       style="padding-bottom: 8px;"
     >
       <div
+        aria-valuenow="30"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -1839,6 +1871,7 @@ Array [
       style="margin-bottom: 8px;"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -1868,6 +1901,7 @@ Array [
       style="margin-bottom: 8px;"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-small"
         role="progressbar"
       >
@@ -1896,6 +1930,7 @@ Array [
       class="ant-space-item"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info"
         role="progressbar"
       >
@@ -1931,6 +1966,7 @@ Array [
       style="margin-right: 30px;"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -1987,6 +2023,7 @@ Array [
       style="margin-right: 30px;"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-small"
         role="progressbar"
       >
@@ -2042,6 +2079,7 @@ Array [
       class="ant-space-item"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-inline-circle ant-progress-circle ant-progress-status-normal ant-progress-show-info"
         role="progressbar"
       >
@@ -2124,6 +2162,7 @@ Array [
       style="margin-right: 30px;"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -2180,6 +2219,7 @@ Array [
       style="margin-right: 30px;"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-small"
         role="progressbar"
       >
@@ -2235,6 +2275,7 @@ Array [
       class="ant-space-item"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
         role="progressbar"
       >
@@ -2318,6 +2359,7 @@ Array [
       style="margin-right: 30px; padding-bottom: 30px;"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -2350,6 +2392,7 @@ Array [
       style="margin-right: 30px; padding-bottom: 30px;"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-small"
         role="progressbar"
       >
@@ -2382,6 +2425,7 @@ Array [
       style="margin-right: 30px; padding-bottom: 30px;"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info"
         role="progressbar"
       >
@@ -2414,6 +2458,7 @@ Array [
       style="padding-bottom: 30px;"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info"
         role="progressbar"
       >
@@ -2448,6 +2493,7 @@ Array [
 exports[`renders components/progress/demo/steps.tsx extend context correctly 1`] = `
 Array [
   <div
+    aria-valuenow="50"
     class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -2476,6 +2522,7 @@ Array [
   </div>,
   <br />,
   <div
+    aria-valuenow="30"
     class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -2512,6 +2559,7 @@ Array [
   </div>,
   <br />,
   <div
+    aria-valuenow="100"
     class="ant-progress ant-progress-steps ant-progress-status-success ant-progress-show-info ant-progress-small"
     role="progressbar"
   >
@@ -2565,6 +2613,7 @@ Array [
   </div>,
   <br />,
   <div
+    aria-valuenow="60"
     class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
     role="progressbar"
   >

components/progress/__tests__/__snapshots__/demo.test.ts.snap

@@ -10,6 +10,7 @@ exports[`renders components/progress/demo/circle.tsx correctly 1`] = `
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
+      aria-valuenow="75"
       class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
       role="progressbar"
     >
@@ -66,6 +67,7 @@ exports[`renders components/progress/demo/circle.tsx correctly 1`] = `
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
+      aria-valuenow="70"
       class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default"
       role="progressbar"
     >
@@ -139,6 +141,7 @@ exports[`renders components/progress/demo/circle.tsx correctly 1`] = `
     style="padding-bottom:8px"
   >
     <div
+      aria-valuenow="100"
       class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
       role="progressbar"
     >
@@ -213,6 +216,7 @@ exports[`renders components/progress/demo/circle.tsx correctly 1`] = `
 exports[`renders components/progress/demo/circle-dynamic.tsx correctly 1`] = `
 Array [
   <div
+    aria-valuenow="0"
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
     role="progressbar"
     style="margin-right:8px"
@@ -336,6 +340,7 @@ Array [
 exports[`renders components/progress/demo/circle-micro.tsx correctly 1`] = `
 Array [
   <div
+    aria-valuenow="60"
     class="ant-progress ant-progress-inline-circle ant-progress-circle ant-progress-status-normal ant-progress-show-info"
     role="progressbar"
   >
@@ -401,6 +406,7 @@ exports[`renders components/progress/demo/circle-mini.tsx correctly 1`] = `
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
+      aria-valuenow="30"
       class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
       role="progressbar"
     >
@@ -457,6 +463,7 @@ exports[`renders components/progress/demo/circle-mini.tsx correctly 1`] = `
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
+      aria-valuenow="70"
       class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info"
       role="progressbar"
     >
@@ -530,6 +537,7 @@ exports[`renders components/progress/demo/circle-mini.tsx correctly 1`] = `
     style="padding-bottom:8px"
   >
     <div
+      aria-valuenow="100"
       class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info"
       role="progressbar"
     >
@@ -611,6 +619,7 @@ exports[`renders components/progress/demo/dashboard.tsx correctly 1`] = `
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
+      aria-valuenow="75"
       class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
       role="progressbar"
     >
@@ -667,6 +676,7 @@ exports[`renders components/progress/demo/dashboard.tsx correctly 1`] = `
     style="padding-bottom:8px"
   >
     <div
+      aria-valuenow="75"
       class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
       role="progressbar"
     >
@@ -724,6 +734,7 @@ exports[`renders components/progress/demo/dashboard.tsx correctly 1`] = `
 exports[`renders components/progress/demo/dynamic.tsx correctly 1`] = `
 Array [
   <div
+    aria-valuenow="0"
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -826,6 +837,7 @@ exports[`renders components/progress/demo/format.tsx correctly 1`] = `
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
+      aria-valuenow="75"
       class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
       role="progressbar"
     >
@@ -882,6 +894,7 @@ exports[`renders components/progress/demo/format.tsx correctly 1`] = `
     style="padding-bottom:8px"
   >
     <div
+      aria-valuenow="100"
       class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
       role="progressbar"
     >
@@ -939,6 +952,7 @@ exports[`renders components/progress/demo/format.tsx correctly 1`] = `
 exports[`renders components/progress/demo/gradient-line.tsx correctly 1`] = `
 Array [
   <div
+    aria-valuenow="99"
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -963,6 +977,7 @@ Array [
     </span>
   </div>,
   <div
+    aria-valuenow="99"
     class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -995,6 +1010,7 @@ Array [
       style="margin-right:8px;padding-bottom:8px"
     >
       <div
+        aria-valuenow="90"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -1070,6 +1086,7 @@ Array [
       style="padding-bottom:8px"
     >
       <div
+        aria-valuenow="100"
         class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -1164,6 +1181,7 @@ Array [
 exports[`renders components/progress/demo/line.tsx correctly 1`] = `
 Array [
   <div
+    aria-valuenow="30"
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -1188,6 +1206,7 @@ Array [
     </span>
   </div>,
   <div
+    aria-valuenow="50"
     class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -1212,6 +1231,7 @@ Array [
     </span>
   </div>,
   <div
+    aria-valuenow="70"
     class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -1253,6 +1273,7 @@ Array [
     </span>
   </div>,
   <div
+    aria-valuenow="100"
     class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -1294,6 +1315,7 @@ Array [
     </span>
   </div>,
   <div
+    aria-valuenow="50"
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default"
     role="progressbar"
   >
@@ -1319,6 +1341,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
   style="width:170px"
 >
   <div
+    aria-valuenow="30"
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-small"
     role="progressbar"
   >
@@ -1343,6 +1366,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
     </span>
   </div>
   <div
+    aria-valuenow="50"
     class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-small"
     role="progressbar"
   >
@@ -1367,6 +1391,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
     </span>
   </div>
   <div
+    aria-valuenow="70"
     class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-small"
     role="progressbar"
   >
@@ -1408,6 +1433,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
     </span>
   </div>
   <div
+    aria-valuenow="100"
     class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-small"
     role="progressbar"
   >
@@ -1454,6 +1480,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
 exports[`renders components/progress/demo/linecap.tsx correctly 1`] = `
 Array [
   <div
+    aria-valuenow="75"
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -1487,6 +1514,7 @@ Array [
       style="margin-right:8px;padding-bottom:8px"
     >
       <div
+        aria-valuenow="75"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -1543,6 +1571,7 @@ Array [
       style="padding-bottom:8px"
     >
       <div
+        aria-valuenow="75"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -1601,6 +1630,7 @@ Array [
 exports[`renders components/progress/demo/segment.tsx correctly 1`] = `
 Array [
   <div
+    aria-valuenow="30"
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -1637,6 +1667,7 @@ Array [
       style="margin-right:8px;padding-bottom:8px"
     >
       <div
+        aria-valuenow="30"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -1693,6 +1724,7 @@ Array [
       style="padding-bottom:8px"
     >
       <div
+        aria-valuenow="30"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -1758,6 +1790,7 @@ Array [
       style="margin-bottom:8px"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -1787,6 +1820,7 @@ Array [
       style="margin-bottom:8px"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-small"
         role="progressbar"
       >
@@ -1815,6 +1849,7 @@ Array [
       class="ant-space-item"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info"
         role="progressbar"
       >
@@ -1850,6 +1885,7 @@ Array [
       style="margin-right:30px"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -1906,6 +1942,7 @@ Array [
       style="margin-right:30px"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-small"
         role="progressbar"
       >
@@ -1961,6 +1998,7 @@ Array [
       class="ant-space-item"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-inline-circle ant-progress-circle ant-progress-status-normal ant-progress-show-info"
         role="progressbar"
       >
@@ -2019,6 +2057,7 @@ Array [
       style="margin-right:30px"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -2075,6 +2114,7 @@ Array [
       style="margin-right:30px"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-small"
         role="progressbar"
       >
@@ -2130,6 +2170,7 @@ Array [
       class="ant-space-item"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
         role="progressbar"
       >
@@ -2189,6 +2230,7 @@ Array [
       style="margin-right:30px;padding-bottom:30px"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
         role="progressbar"
       >
@@ -2221,6 +2263,7 @@ Array [
       style="margin-right:30px;padding-bottom:30px"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-small"
         role="progressbar"
       >
@@ -2253,6 +2296,7 @@ Array [
       style="margin-right:30px;padding-bottom:30px"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info"
         role="progressbar"
       >
@@ -2285,6 +2329,7 @@ Array [
       style="padding-bottom:30px"
     >
       <div
+        aria-valuenow="50"
         class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info"
         role="progressbar"
       >
@@ -2319,6 +2364,7 @@ Array [
 exports[`renders components/progress/demo/steps.tsx correctly 1`] = `
 Array [
   <div
+    aria-valuenow="50"
     class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -2347,6 +2393,7 @@ Array [
   </div>,
   <br />,
   <div
+    aria-valuenow="30"
     class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -2383,6 +2430,7 @@ Array [
   </div>,
   <br />,
   <div
+    aria-valuenow="100"
     class="ant-progress ant-progress-steps ant-progress-status-success ant-progress-show-info ant-progress-small"
     role="progressbar"
   >
@@ -2436,6 +2484,7 @@ Array [
   </div>,
   <br />,
   <div
+    aria-valuenow="60"
     class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
     role="progressbar"
   >

components/progress/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Progress render dashboard 295 gapDegree 1`] = `
 <div
+  aria-valuenow="0"
   class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
   role="progressbar"
 >
@@ -56,6 +57,7 @@ exports[`Progress render dashboard 295 gapDegree 1`] = `
 
 exports[`Progress render dashboard 296 gapDegree 1`] = `
 <div
+  aria-valuenow="0"
   class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
   role="progressbar"
 >
@@ -110,6 +112,7 @@ exports[`Progress render dashboard 296 gapDegree 1`] = `
 
 exports[`Progress render dashboard zero gapDegree 1`] = `
 <div
+  aria-valuenow="0"
   class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
   role="progressbar"
 >
@@ -164,6 +167,7 @@ exports[`Progress render dashboard zero gapDegree 1`] = `
 
 exports[`Progress render format 1`] = `
 <div
+  aria-valuenow="10"
   class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
   role="progressbar"
 >
@@ -195,6 +199,7 @@ exports[`Progress render format 1`] = `
 
 exports[`Progress render negative progress 1`] = `
 <div
+  aria-valuenow="-20"
   class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
   role="progressbar"
 >
@@ -222,6 +227,7 @@ exports[`Progress render negative progress 1`] = `
 
 exports[`Progress render negative successPercent 1`] = `
 <div
+  aria-valuenow="-20"
   class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
   role="progressbar"
 >
@@ -253,6 +259,7 @@ exports[`Progress render negative successPercent 1`] = `
 
 exports[`Progress render normal progress 1`] = `
 <div
+  aria-valuenow="0"
   class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
   role="progressbar"
 >
@@ -280,6 +287,7 @@ exports[`Progress render normal progress 1`] = `
 
 exports[`Progress render out-of-range progress 1`] = `
 <div
+  aria-valuenow="120"
   class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default"
   role="progressbar"
 >
@@ -324,6 +332,7 @@ exports[`Progress render out-of-range progress 1`] = `
 
 exports[`Progress render out-of-range progress with info 1`] = `
 <div
+  aria-valuenow="120"
   class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default"
   role="progressbar"
 >
@@ -368,6 +377,7 @@ exports[`Progress render out-of-range progress with info 1`] = `
 
 exports[`Progress render strokeColor 1`] = `
 <div
+  aria-valuenow="50"
   class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
   role="progressbar"
 >
@@ -422,6 +432,7 @@ exports[`Progress render strokeColor 1`] = `
 
 exports[`Progress render strokeColor 2`] = `
 <div
+  aria-valuenow="50"
   class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
   role="progressbar"
 >
@@ -449,6 +460,7 @@ exports[`Progress render strokeColor 2`] = `
 
 exports[`Progress render strokeColor 3`] = `
 <div
+  aria-valuenow="50"
   class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
   role="progressbar"
 >
@@ -477,6 +489,7 @@ exports[`Progress render strokeColor 3`] = `
 exports[`Progress render strokeWidth of progress 1`] = `
 <div>
   <div
+    aria-valuenow="30"
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
     role="progressbar"
   >
@@ -532,6 +545,7 @@ exports[`Progress render strokeWidth of progress 1`] = `
 
 exports[`Progress render successColor progress 1`] = `
 <div
+  aria-valuenow="30"
   class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
   role="progressbar"
 >
@@ -563,6 +577,7 @@ exports[`Progress render successColor progress 1`] = `
 
 exports[`Progress render successColor progress type="circle" 1`] = `
 <div
+  aria-valuenow="30"
   class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
   role="progressbar"
 >
@@ -617,6 +632,7 @@ exports[`Progress render successColor progress type="circle" 1`] = `
 
 exports[`Progress render successColor progress type="dashboard" 1`] = `
 <div
+  aria-valuenow="30"
   class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
   role="progressbar"
 >
@@ -671,6 +687,7 @@ exports[`Progress render successColor progress type="dashboard" 1`] = `
 
 exports[`Progress render trailColor progress 1`] = `
 <div
+  aria-valuenow="0"
   class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
   role="progressbar"
 >
@@ -699,6 +716,7 @@ exports[`Progress render trailColor progress 1`] = `
 
 exports[`Progress rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
+  aria-valuenow="0"
   class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default ant-progress-rtl"
   role="progressbar"
 >
@@ -726,6 +744,7 @@ exports[`Progress rtl render component should be rendered correctly in RTL direc
 
 exports[`Progress should support steps 1`] = `
 <div
+  aria-valuenow="0"
   class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
   role="progressbar"
 >

components/progress/__tests__/index.test.tsx

@@ -385,4 +385,23 @@ describe('Progress', () => {
     );
     errSpy.mockRestore();
   });
+
+  it('should be accessible', () => {
+    const { container: wrapper, rerender } = render(
+      <Progress percent={70} aria-label="My progress" />,
+    );
+    let progress = wrapper.querySelector('[role="progressbar"]');
+    expect(progress).toHaveAttribute('aria-label', 'My progress');
+    expect(progress).toHaveAttribute('aria-valuenow', '70');
+
+    rerender(
+      <>
+        <span id="progressLabel">My progress</span>
+        <Progress percent={90} aria-labelledby="progressLabel" />
+      </>,
+    );
+    progress = wrapper.querySelector('[role="progressbar"]');
+    expect(progress).toHaveAttribute('aria-labelledby', 'progressLabel');
+    expect(progress).toHaveAttribute('aria-valuenow', '90');
+  });
 });

components/progress/index.tsx

@@ -1,5 +1,5 @@
 import Progress from './progress';
 
-export type { ProgressProps } from './progress';
+export type { ProgressAriaProps, ProgressProps } from './progress';
 
 export default Progress;

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 };
@@ -29,14 +29,16 @@ export interface SuccessProps {
   strokeColor?: string;
 }
 
-export interface ProgressProps {
+export type ProgressAriaProps = Pick<React.AriaAttributes, 'aria-label' | 'aria-labelledby'>;
+
+export interface ProgressProps extends ProgressAriaProps {
   prefixCls?: string;
   className?: string;
   rootClassName?: string;
   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';
@@ -79,7 +81,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 +177,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
       ref={ref}
       className={classString}
       role="progressbar"
+      aria-valuenow={percentNumber}
       {...omit(restProps, [
         'trailColor',
         'strokeWidth',

components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -2582,6 +2582,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
+              aria-valuenow="60"
               class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >
@@ -3348,6 +3349,7 @@ exports[`renders components/steps/demo/progress.tsx extend context correctly 1`]
           class="ant-steps-progress-icon"
         >
           <div
+            aria-valuenow="60"
             class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
             role="progressbar"
           >
@@ -3595,6 +3597,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
+              aria-valuenow="0"
               class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >
@@ -3777,6 +3780,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
+              aria-valuenow="0"
               class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >
@@ -3959,6 +3963,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
+              aria-valuenow="0"
               class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >
@@ -4141,6 +4146,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
+              aria-valuenow="0"
               class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >

components/steps/__tests__/__snapshots__/demo.test.ts.snap

@@ -2254,6 +2254,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
+              aria-valuenow="60"
               class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >
@@ -3020,6 +3021,7 @@ exports[`renders components/steps/demo/progress.tsx correctly 1`] = `
           class="ant-steps-progress-icon"
         >
           <div
+            aria-valuenow="60"
             class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
             role="progressbar"
           >
@@ -3267,6 +3269,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
+              aria-valuenow="0"
               class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >
@@ -3449,6 +3452,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
+              aria-valuenow="0"
               class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >
@@ -3631,6 +3635,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
+              aria-valuenow="0"
               class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >
@@ -3813,6 +3818,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
+              aria-valuenow="0"
               class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >

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}
+                    aria-label={file['aria-label']}
+                    aria-labelledby={file['aria-labelledby']}
+                  />
                 ) : null;
 
               return (

components/upload/interface.ts

@@ -1,10 +1,10 @@
 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';
+import type { ProgressAriaProps, ProgressProps } from '../progress';
 
 export interface RcFile extends OriRcFile {
   readonly lastModifiedDate: Date;
@@ -16,7 +16,7 @@ export interface HttpRequestHeader {
   [key: string]: string;
 }
 
-export interface UploadFile<T = any> {
+export interface UploadFile<T = any> extends ProgressAriaProps {
   uid: string;
   size?: number;
   name: string;