When window regains focus, focus-ring class should reapplied to the focused element

[JanMiksovsky]

To repro:

1. Use the keyboard to focus a button and apply .focus-ring to it.
2. Switch a different tab/window.
3. Return to the original tab/window.

Expect: Since the originally button still has focus, and the focus was obtained via the keyboard, the focus ring should be reapplied to it. This is what happens when focus-ring.js isn't used.

Actual: The focus ring is lost.

As a general rule, an element's focus ring is dropped if the window itself loses focus, but restored if/when the window regains focus. In the repro sequence above, a standard button (without using focus-ring.js) will end up showing a focus ring at the end of step #3.

This useful behavior helps keyboard users reacquire the focused element when returning to a previously-used window.

[robdodson]

thanks for the issue. I think we may be able to fix this using the visibilitychange event. I'll give it a shot on my flight today

[robdodson]

still working on this. It's a bit tricky as it seems that blur gets called before visibilitychange but the activeElement is the same (except now it doesn't have a class because it was removed during blur). That makes it hard to determine if the element should get the focus ring or not when the page is restored.

Anyway, still working on it, didn't want you to think we'd forgot :)

[JanMiksovsky]

Great, thanks for the update!

FYI, for the time being we're trying this behavior as a mixin. The documentation page shows a live example of some buttons that use the mixin. A somewhat more realistic example can be see on the toolbar tabs demo for our Tabs element. In both cases, you should see a focus ring with the keyboard — including if you switch away from the window and restore focus to it. When the latter demo (https://elix.org/demos/toolbarTabs.html) is viewed on mobile, no focus ring is shown.

[bradkemper]

I think the blur event happens on the window before it happens on the element. So, you could detect when the window is blurred, and whenever it is, save that in a variable and don't remove the .focus-ring from the element when it blurs. Then when the window is in front again, the element will be focused again automatically, and will still have .focus-ring class on it.

[kloots]

@alice @robdodson should we close this issue since the fix has been merged? Or are you waiting to publish the fix to npm before closing?

[robdodson]

yep thanks for the PR!