Google Drive Picker isnt focusable when uppy is used within a managed focus context

[mokutsu-coursera]

Initial checklist

• I understand this is a bug report and questions should be posted in the Community Forum
• I searched issues and couldn’t find anything (or linked relevant results below)

Link to runnable example

No response

Steps to reproduce

Example would be using uppy in an accessible modal

• Setup uppy dashbaord within a managed focus area. For example, inside of a modal
• Tab through the UI and uppy itself is focusable, works as expected
• Get to google drive picker and open it

packages:
"@uppy/core": "^4.4.1",
"@uppy/dashboard": "^4.3.1",
"@uppy/google-drive-picker": "0.3.2",
"@uppy/react": "^4.2.1",

Expected behavior

Keyboard navigation should work and elements wthin the google drive picker should be focusable, even when uppy is used within a managed focus area.

Ideally, the google drive picker would be mounted as a sibling or closer to the Uppy dashboard itself, so that it can also receive focus, and be handled accessibly.

Actual behavior

• as I tab through the UI, none of the interactive elements in the google drive picker is not focusable
• there is some flakiness/weirdness going on with the input search bar and X close button

I see that the google drive picker is appended to the very bottom of the DOM, making it inaccessible for users cycling through with tabbing when the focus is being managed such as with a modal.

[Murderlon]

You mean when dashboard is used as a modal (inline: false)?

Note that we directly load the Google Drive Picker UI from a script, we have no control whatsoever in how the UI is actually made. It may be an upstream problem with the Picker UI

[mokutsu-coursera]

Oh i see, thanks @Murderlon! I'll see if theres a bug ticket over there, that's unfortunate.

It's when the dashboard is used with inline: true - for example, if I want to include a custom modal with a title, description, additional instructions etc around the dashboard, I'd need to use a custom modal and render my dashboard within my modal. In that case I'd also be supplying the focus trap to make sure my users cant cycle through things that are outside of the modal when pressing tab while the modal is open (which I'm guessing is fairly common desired behaviour). We aren't using the dashboard inline:false, but I imagine it would also be affected if the dashboard modal is controlling the focus as well.