fix(react): makes LoaderOverlay focusOnInitialRender work

[tbusillo]

closes: https://github.com/dequelabs/cauldron/issues/747

Summary

• Removes overlayRef.current as a dependency and forcing of focus only triggers when the component initially mounts.
• Removes the setTimeout that wrapped overlayRef.current.focus(), which previously existed due to the focus indicator styling not appearing on the focused element (it was a timing/race condition).
• Updates tests/docs.

[github-actions[bot]]

Preview branch generated at https://fix-loader-overlay--autofocus.d1gko6en628vir.amplifyapp.com

[scurker]

Sorry for the delay on this @tbusillo but is this something you want to try to get up to date on or just defer?

[tbusillo]

Sorry for the delay on this @tbusillo but is this something you want to try to get up to date on or just defer?

@scurker I'd be open to doing it. Is the original issue still valid/have there been any changes to the requirement(s), outside of converting test coverage maybe?

[scurker]

@scurker I'd be open to doing it. Is the original issue still valid/have there been any changes to the requirement(s), outside of converting test coverage maybe?

Yes, I believe it's still valid. useEffecting off of a ref isn't really super reliable.

[tbusillo]

@scurker I'd be open to doing it. Is the original issue still valid/have there been any changes to the requirement(s), outside of converting test coverage maybe?

Yes, I believe it's still valid. useEffecting off of a ref isn't really super reliable.

IIRC, this originally had to be done due to animation timing(s) causing the active element to be the loader, but the UI not painting the focus indicator.

I am not sure what changed (could be any number of things) but I don’t mind cleaning this up and finishing it when I get some down time.

[tbusillo]

Closed in favor of https://github.com/dequelabs/cauldron/pull/1486.