Focus-ring is visible after switching browser tabs

[jeroencornelissen]

If you switch browser tabs, with the mouse or keyboard. The JS will add a focus-visible class and data-focus-visible attribute.

To me and our users, this is unexpected behaviour. What do you think?

Replicate by clicking the div with tabindex="0" on the demo page. Now, no focus-ring is visible. Switch browser tabs. And when you switch back, the focus-ring is visible.

Thx

[jeroencornelissen]

Any thoughts on this?

[robdodson]

I can look into this. I thought we fixed this a while ago tbh... I need to write a selenium test for it

[robdodson]

OK, digging into how each browser handles focus moving in and out of the page. They're all different, making it hard to fix this. Jotting down my notes as I work on this.

Chrome

Open new page

• If the first thing you click is the element, it will fire focus once, on the element.
• If you click the document it does not fire focus.
• It does not fire a visibilitychange event.

Change to new tab

• Fires blur on the element.
• Fires visibilitychange event, sets document.visibilitystate to hidden

Returning to previous tab

• Fires visibilitychange event, sets document.visibilitystate to visible
• Fires focus on the element.

Firefox

Open new page

• Initially fires a visibilitychange event with document.visibilitystate set to hidden. Seems weird?
• If the first thing you click is the element, it will fire focus twice. Once on the document, and next on the element.
• If you click the page first, it will fire focus on document.
  • If you then click the element, it will fire focus on the element.

Change to new tab

• Calls blur on the element
  • Then calls blur on the document
• Fires visibilitychange, sets document.visibilitystate to hidden

Returning to previous tab

• Fires visiblitychange, sets document.visiblitystate to visible
• Fires focus on document
• Fires focus on element

Safari

Note, Safari's console uses live nodes, so it may look like a node has a class during a particular log statement when actually it doesn't.
You're always looking at the final state of the node.

Open new page

• If the first thing you click is the element, it will fire focus twice on the element—yes, the element, not document and then the element!
• If you click the page first, then click the element, it will only fire focus once on the element.

Change to new tab

• Calls blur on the element
• Fires visibilitychange, sets document.visibilitystate to hidden

Returning to previous tab

• Calls focus on the element twice—yes, the element, not document and then the element!
• Fires visibilitychange, sets document.visiblitystate to visible

[robdodson]

Uploaded a PR to fix this :)

[jeroencornelissen]

@robdodson can you release this to npm?

[robdodson]

yep! sorry i was out on vacation :)

[robdodson]

Should be fixed in the 4.1.0 release