fix: align upload button keyboard semantics

src/AjaxUploader.tsx

@@ -86,7 +86,8 @@ class AjaxUploader extends Component<UploadProps> {
   };
 
   onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === 'Enter') {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
       this.onClick(e);
     }
   };
@@ -363,15 +364,20 @@ class AjaxUploader extends Component<UploadProps> {
       ? {}
       : {
           onClick: openFileDialogOnClick ? this.onClick : () => {},
-          onKeyDown: openFileDialogOnClick ? this.onKeyDown : () => {},
+          onKeyDown: openFileDialogOnClick && !hasControlInside ? this.onKeyDown : () => {},
           onMouseEnter,
           onMouseLeave,
           onDrop: this.onFileDrop,
           onDragOver: this.onFileDragOver,
-          tabIndex: hasControlInside ? undefined : '0',
+          tabIndex: hasControlInside || !openFileDialogOnClick ? undefined : '0',
         };
     return (
-      <Tag {...events} className={cls} role={hasControlInside ? undefined : 'button'} style={style}>
+      <Tag
+        {...events}
+        className={cls}
+        role={hasControlInside || !openFileDialogOnClick ? undefined : 'button'}
+        style={style}
+      >
         <input
           {...pickAttrs(otherProps, { aria: true, data: true })}
           id={id}

tests/uploader.spec.tsx

@@ -1313,13 +1313,54 @@ describe('uploader', () => {
     expect(container.querySelector('span')).toHaveAttribute('role', 'button');
   });
 
+  it.each(['Enter', ' '])('Should open the file dialog with the %p key', key => {
+    const { container } = render(<Upload />);
+    const input = container.querySelector('input')!;
+    const clickSpy = jest.spyOn(input, 'click').mockImplementation(() => {});
+    const preventDefaultSpy = jest.spyOn(Event.prototype, 'preventDefault');
+
+    fireEvent.keyDown(container.querySelector('span')!, { key });
+
+    expect(clickSpy).toHaveBeenCalledTimes(1);
+    expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
+
+    clickSpy.mockRestore();
+    preventDefaultSpy.mockRestore();
+  });
+
   it("Should not be focusable and doesn't have role=button with hasControlInside=true", () => {
     const { container } = render(<Upload hasControlInside />);
 
     expect(container.querySelector('span')!.tabIndex).not.toBe(0);
     expect(container.querySelector('span')!).not.toHaveAttribute('role', 'button');
   });
 
+  it.each(['Enter', ' '])('Should leave %p activation to the child control', key => {
+    const { container } = render(
+      <Upload hasControlInside>
+        <button type="button">Upload</button>
+      </Upload>,
+    );
+    const input = container.querySelector('input')!;
+    const button = container.querySelector('button')!;
+    const clickSpy = jest.spyOn(input, 'click').mockImplementation(() => {});
+
+    expect(fireEvent.keyDown(button, { key })).toBe(true);
+    expect(clickSpy).not.toHaveBeenCalled();
+
+    fireEvent.click(button);
+    expect(clickSpy).toHaveBeenCalledTimes(1);
+
+    clickSpy.mockRestore();
+  });
+
+  it("Should not be focusable and doesn't have role=button when click upload is disabled", () => {
+    const { container } = render(<Upload openFileDialogOnClick={false} />);
+
+    expect(container.querySelector('span')!.tabIndex).not.toBe(0);
+    expect(container.querySelector('span')!).not.toHaveAttribute('role', 'button');
+  });
+
   it('should receive same defaultRequest as src', done => {
     const { default: srcRequest } = require('../src/request');
     let receivedDefaultRequest: any;