Cursor never focuses on the Upload Widget when navigating with the keyboard
Application Type
Reactive

Hello everyone, thanks for reading this :)


I am using the Upload widget to upload some files to the database and so far it has worked perfectly fine.

Nonetheless, I have been working on the page accesibility and I have found some issues.

When navigating the page with the keyboard, using the tab key, the cursor never focuses on the Upload widget. That is obviously a problem, since a person who cannot use a mouse will rely on the cursor to be able to interact with every interactable item on the page.

Accesibilty options are already on and everything is working as expected except this widget.

Does this widget have some property anywhere that I may not know?


I have found that I could show the input type file that is inside the Upload widget (it currently has a display: "none" property) and the cursor will focus on it. But I would like to mantain the look and feel of the Upload widget.


Thank you in advanced.

Hi Mario,

It looks like this isn't supported out of the box, but I've found a way to make it work. Here are the steps:

  1. Add the "tabindex" attribute to your Upload widget, to make it "focusable":

    You'll probably have to tweak the attribute's value to make sure it follows the correct tab order in your UI.

  2. Add CSS to your theme to make sure the Upload is properly highlighted when focused. Something like this:

    .upload-file label:focus {
    border: 1px solid red;
    }

  3. Use the Upload's "onkeyup" event to detect the Enter key and open the file selection dialog:

That works beautifully @Aurelio Junior !

Thank you very much for the quick and easy to understand answer :)

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.