[Upload] File upload button not keyboard accessible

[tcx]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.
  --> There is this related issue, but the discussion ended up shifting away from the file upload button.

Current Behavior 😯

Following the official file upload button example, once one of the upload button is keyboard focused, pressing on enter or the spacebar does not do anything.

Expected Behavior 🤔

Following the official file upload button example, once one of the upload button is keyboard focused, pressing on enter or the spacebar should open the file selection dialog.

Steps to Reproduce 🕹

Steps:

1. Go to https://codesandbox.io/s/hidden-currying-e83y7
2. Click on the browser part of the window.
3. Press tab once or twice (to respectively select the first or the second button).
4. Press enter or spacebar, nothing happens.

Context 🔦

This is an accessibility requirement: https://webaim.org/techniques/keyboard/#testing

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0
React	v16.13.1
Browser	Firefox 79.0 and Chromium 84.0.4147.89 (on Linux)

[eps1lon]

I can't reproduce the issue on Ubuntu 18.04.4 LTS with neither Chrome Version 84.0.4147.105 (Official Build) (64-bit) nor Firefox 79.0. Tried it with my existing profile and a new one.

Chrome:

Firefox

Maybe some extension is interfering? Can you reproduce this in an incognito tab (or preferably with a new user profile).

It could be caused by a setting in your operating system. In the end user agents decide what elements are keyboard focusable and which aren't. This is not defined universally in a web standard.

[tcx]

The problem is not about focusability, but about opening the file selection dialog.

• If you mouse click on the button, you'll get a file selection dialog.
• There is no way to open the same file selection dialog only with the keyboard.

With a vanilla <input type=file>, opening the file selection dialog can be achieved by focusing on the element and using enter or spacebar.

[eps1lon]

That makes sense, thanks for helping me understand. The markup we have documented is fundamentally flawed since the file input won't even be part of the accessibility tree.

I don't have an easy solution to fix this right now. A standalone component that keeps the focus on <input type="file" /> and implements the desired button styles is probably the best route.

[eps1lon]

Something like https://codesandbox.io/s/e2kv9?file=/demo.js seems viable. Misses color styles and focus-visible specific styling. But keyboard accessibility and :focus styles should work.

[oliviertassinari]

Should we use this issue as an opportunity to work on a dedicated upload component? At least, if we don't find a simple solution. Ant Design seems to solve the problem by manually triggering the file input https://github.com/react-component/upload/blob/master/src/AjaxUploader.jsx#L32.

I have been collecting comparison points for the Upload component at https://trello.com/c/uKckCoKm/1709-dropzone-upload-component.

[eps1lon]

Closing in favor of https://github.com/mui/material-ui/issues/22434. A dedicated component would fix existing usages which we can't really do with demos.

[mshahzebraza]

If anyone is still having this problem, here's a solution for you.

export const FileInput = forwardRef((props: IFileInput, ref) => {
    const inputElementRef = useRef<HTMLInputElement>()
    const {
        label,
    } = props;

    return (
        <Box ref={ref} >
            <Button
                onKeyDownCapture={e => {
                    if (!acceptableTriggerKeyCodes.includes(e.code)) return;
                    inputElementRef.current.click()
                }}
                htmlFor={label}
                component="label"
            >
                {label}

                <input
                    ref={inputElementRef}
                    id={label}
                    hidden
                    type="file"
                />
            </Button>
        </Box>
    );
});

You can use the component with any validation library and it will trigger the input upload against clicks and key events as well.
I've added a check to only allow the Enter and Space key to trigger the upload dialog appear event

[saewitz]

Thank you @mshahzebraza, this is what we needed

onKeyDown={(event) => {
    if (['Enter', 'Space'].includes(event.code)) {
        inputRef.current?.click();
    }
}}