Accessibility: Managing Focus


#1

I was wondering if there is a way to manage focus when uploadcare react widget loads and unloads. Currently, the focus is trapped behind the modal and a user has to tab through that content before accessing the image upload modal. It would be ideal if the focus was automatically set to the close button and if there was a way to set focus on something (via id) upon closing the modal as well.


#2

Hi Heather, I’m Alex, a frontend engineer at Uploadcare.

Our widget should set focus on the close button automatically - this is expected behaviour. But for some reason it’s broken in your case. That may be caused by third-party scripts for example.

I prepared a simple demo on the codesandbox: 0169y15zrl - CodeSandbox
Here is the screencast of how it should work: Loom | Free Screen & Video Recording Software
Does it work the same way on your end?
Also could you share a page where this problem appears so that I can inspect it?

Anyway you can manage focus using css classes, for the close button it would be

const $closeBtn = document.querySelector('.uploadcare--dialog .uploadcare--dialog__close')
$closeBtn.focus()

#3

Hi Alex,

Thank you for the quick response!

You can try The Home Depot Gift Card | GiftCards.com® Official [NOTE - you need to set a cookie (document.cookie = “mobile-ui-enabled=force”) to view this on desktop, it’s our mobile version of the app].

We’ll try out the code you provided. Thanks!

Heather