fix: Upload accessibility experience (ant-design#46432)

* fix: Upload tab experience * test: update snapshot * fix lint
sebastibe · Dec 30, 2023 · 8705640 · 8705640
1 parent 44d1b68
commit 8705640
Show file tree

Hide file tree

Showing 21 changed files with 111 additions and 185 deletions.
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
@@ -42270,8 +42270,6 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
   >
     <span
       class="config-upload"
-      role="button"
-      tabindex="0"
     >
       <input
         accept=""
@@ -42368,7 +42366,6 @@ exports[`ConfigProvider components Upload configProvider componentDisabled 1`] =
   >
     <span
       class="config-upload config-upload-disabled"
-      role="button"
     >
       <input
         accept=""
@@ -42435,8 +42432,6 @@ exports[`ConfigProvider components Upload configProvider componentSize large 1`]
   >
     <span
       class="config-upload"
-      role="button"
-      tabindex="0"
     >
       <input
         accept=""
@@ -42533,8 +42528,6 @@ exports[`ConfigProvider components Upload configProvider componentSize middle 1`
   >
     <span
       class="config-upload"
-      role="button"
-      tabindex="0"
     >
       <input
         accept=""
@@ -42631,8 +42624,6 @@ exports[`ConfigProvider components Upload configProvider componentSize small 1`]
   >
     <span
       class="config-upload"
-      role="button"
-      tabindex="0"
     >
       <input
         accept=""
@@ -42729,8 +42720,6 @@ exports[`ConfigProvider components Upload normal 1`] = `
   >
     <span
       class="ant-upload"
-      role="button"
-      tabindex="0"
     >
       <input
         accept=""
@@ -42827,8 +42816,6 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
   >
     <span
       class="prefix-Upload"
-      role="button"
-      tabindex="0"
     >
       <input
         accept=""

diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -5184,15 +5184,17 @@ Array [
                   >
                     <span
                       class="ant-upload ant-upload-disabled"
-                      role="button"
                     >
                       <input
                         accept=""
                         disabled=""
                         style="display: none;"
                         type="file"
                       />
-                      <div>
+                      <button
+                        style="border: 0px; background: none;"
+                        type="button"
+                      >
                         <span
                           aria-label="plus"
                           class="anticon anticon-plus"
@@ -5220,7 +5222,7 @@ Array [
                         >
                           Upload
                         </div>
-                      </div>
+                      </button>
                     </span>
                   </div>
                 </div>
@@ -21115,8 +21117,6 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
               >
                 <span
                   class="ant-upload"
-                  role="button"
-                  tabindex="0"
                 >
                   <input
                     accept=""

diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
@@ -2718,15 +2718,17 @@ Array [
                   >
                     <span
                       class="ant-upload ant-upload-disabled"
-                      role="button"
                     >
                       <input
                         accept=""
                         disabled=""
                         style="display:none"
                         type="file"
                       />
-                      <div>
+                      <button
+                        style="border:0;background:none"
+                        type="button"
+                      >
                         <span
                           aria-label="plus"
                           class="anticon anticon-plus"
@@ -2754,7 +2756,7 @@ Array [
                         >
                           Upload
                         </div>
-                      </div>
+                      </button>
                     </span>
                   </div>
                 </div>
@@ -9675,8 +9677,6 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
               >
                 <span
                   class="ant-upload"
-                  role="button"
-                  tabindex="0"
                 >
                   <input
                     accept=""

diff --git a/components/form/__tests__/__snapshots__/index.test.tsx.snap b/components/form/__tests__/__snapshots__/index.test.tsx.snap
@@ -933,7 +933,6 @@ exports[`Form form should support disabled 1`] = `
               >
                 <span
                   class="ant-upload ant-upload-disabled"
-                  role="button"
                 >
                   <input
                     accept=""

diff --git a/components/form/demo/disabled.tsx b/components/form/demo/disabled.tsx
@@ -102,10 +102,10 @@ const FormDisabledDemo: React.FC = () => {
         </Form.Item>
         <Form.Item label="Upload" valuePropName="fileList" getValueFromEvent={normFile}>
           <Upload action="/upload.do" listType="picture-card">
-            <div>
+            <button style={{ border: 0, background: 'none' }} type="button">
               <PlusOutlined />
               <div style={{ marginTop: 8 }}>Upload</div>
-            </div>
+            </button>
           </Upload>
         </Form.Item>
         <Form.Item label="Button">

diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -177,8 +177,6 @@ exports[`renders components/space/demo/base.tsx extend context correctly 1`] = `
       >
         <span
           class="ant-upload"
-          role="button"
-          tabindex="0"
         >
           <input
             accept=""

diff --git a/components/space/__tests__/__snapshots__/demo.test.tsx.snap b/components/space/__tests__/__snapshots__/demo.test.tsx.snap
@@ -175,8 +175,6 @@ exports[`renders components/space/demo/base.tsx correctly 1`] = `
       >
         <span
           class="ant-upload"
-          role="button"
-          tabindex="0"
         >
           <input
             accept=""

diff --git a/components/upload/Dragger.tsx b/components/upload/Dragger.tsx
@@ -6,8 +6,14 @@ import type { UploadProps } from './interface';
 export type DraggerProps = UploadProps & { height?: number };
 
 const Dragger = React.forwardRef<UploadRef, DraggerProps>(
-  ({ style, height, ...restProps }, ref) => (
-    <Upload ref={ref} {...restProps} type="drag" style={{ ...style, height }} />
+  ({ style, height, hasControlInside = false, ...restProps }, ref) => (
+    <Upload
+      ref={ref}
+      hasControlInside={hasControlInside}
+      {...restProps}
+      type="drag"
+      style={{ ...style, height }}
+    />
   ),
 );
 

diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
@@ -60,6 +60,7 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
     maxCount,
     data = {},
     multiple = false,
+    hasControlInside = true,
     action = '',
     accept = '',
     supportServerRender = true,
@@ -350,6 +351,7 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
     disabled: mergedDisabled,
     beforeUpload: mergedBeforeUpload,
     onChange: undefined,
+    hasControlInside,
   } as RcUploadProps;
 
   delete rcUploadProps.className;
-Original file line number
+Diff line change
@@ Expand Up / @@ -933,7 +933,6 @@ exports[`Form form should support disabled 1`] = ` @@
                   >
                     <span
                       class="ant-upload ant-upload-disabled"
-                      role="button"
                     >
                       <input
                         accept=""
@@ Expand Down @@