a11y concerns: Missing visual focus indicator, elements not accessible by the Keyboard

[greydnls]

Hi, I'm using version 3.2 of filestack-react, with this configuration:

const options = {
    onSuccess,
    onError,
    apikey: FILEPICKER_API_KEY,
    componentDisplayMode: {
      type: 'immediate',
    },
    actionOptions: {
      container,
      onUploadStarted,
      accept: ['.pdf', '.doc', '.docx'],
      displayMode: 'inline',
      fromSources: ['local_file_system', 'url', 'github', 'googledrive'],
      lang: LANGUAGE,
      storeTo: { workflows: [FILEPICKER_WORKFLOW_ID] },
    },
  };

  return <ReactFilestack {...options} />;

This renders the picker, and works as expected, generally. There are a few accessibility errors we're noticing, though. I don't see any way to override this behavior, so I thought I would open up an issue.

1. None of the buttons highlighted in the image below are accessible by keyboard. Additionally, they are lacking labels and in some cases roles, which makes them hard to use with a screen reader.

   

2. The dropzone itself never registers as being "active", when you tab into it. This: Versus the expected (achieved by manually giving that element focus):

3. The file upload input item doesn't have a valid label. Possible solutions, fix any of the following:

   • provide aria-label attribute
   • provide aria-labelledby attribute that references a valid element
   • Add an implicit (wrapped)
   • Add an explicit
   • add title attribute

Thanks for all your work on this tool, and thanks in advance for considering this issue. Please let me know if you need more information or if there's something I've missed in my setup.

[sarahbilly]

I would also love to see this resolved!

[jjun14]

Bumping this issue, would love to see this addressed soon 🙏