feat: added hasControlInside prop to enable/disabe button like behavior - focus and role on the wrapper (#521)

Author: vtx-anton-chashchin

src/AjaxUploader.tsx

@@ -277,6 +277,7 @@ class AjaxUploader extends Component<UploadProps> {
       openFileDialogOnClick,
       onMouseEnter,
       onMouseLeave,
+      hasControlInside,
       ...otherProps
     } = this.props;
     const cls = clsx({
@@ -297,10 +298,10 @@ class AjaxUploader extends Component<UploadProps> {
           onMouseLeave,
           onDrop: this.onFileDrop,
           onDragOver: this.onFileDrop,
-          tabIndex: '0',
+          tabIndex: hasControlInside ? undefined : '0',
         };
     return (
-      <Tag {...events} className={cls} role="button" style={style}>
+      <Tag {...events} className={cls} role={hasControlInside ? undefined : 'button'} style={style}>
         <input
           {...pickAttrs(otherProps, { aria: true, data: true })}
           id={id}

src/Upload.tsx

@@ -21,6 +21,7 @@ class Upload extends Component<UploadProps> {
     customRequest: null,
     withCredentials: false,
     openFileDialogOnClick: true,
+    hasControlInside: false,
   };
 
   private uploader: AjaxUpload;

src/interface.tsx

@@ -43,6 +43,7 @@ export interface UploadProps
   styles?: {
     input?: React.CSSProperties;
   };
+  hasControlInside?: boolean;
 }
 
 export interface UploadProgressEvent extends Partial<ProgressEvent> {

tests/uploader.spec.js

@@ -865,4 +865,18 @@ describe('uploader', () => {
     expect(wrapper.find('.bamboo-input').props().style.color).toEqual('red');
     expect(wrapper.find('input').props().style.display).toBe('none');
   });
+
+  it('Should be focusable and has role=button by default', () => {
+    const wrapper = mount(<Uploader />);
+
+    expect(wrapper.find('span').props().tabIndex).toBe('0');
+    expect(wrapper.find('span').props().role).toBe('button');
+  });
+
+  it("Should not be focusable and doesn't have role=button with hasControlInside=true", () => {
+    const wrapper = mount(<Uploader hasControlInside />);
+
+    expect(wrapper.find('span').props().tabIndex).toBe(undefined);
+    expect(wrapper.find('span').props().role).toBe(undefined);
+  });
 });