[selectors] `:focus-visible` should match when focus is programmatically moved into a dialog

[craigkovatch]

Whether <dialog> or [role="dialog"], focus should become visible when it is programmatically moved from outside to inside a dialog.

e.g. if a user clicks a button that opens a dialog, and now a button is focused-by-default within the dialog per Dialog, that button should show an indicator regardless of whether the dialog was launched by mouse or keyboard. (Probably not for touch.)

This seems like a significant usability hole in the current heuristic, which I don't see discussed directly in other issues here (though I may have missed something, apologies if so).

I don't much experience contributing to CSS spec discussion, so please forgive (and educate) me if I'm posting this in the wrong place, or need to further explain my concern, etc.

[tabatkins]

I haven't played with dialog yet - in such a situation, does such a button normally show a focus ring?

[craigkovatch]

For the case of "focus moved from outside a dialog, to a button within that dialog", yes, focus ring is normally shown. Native dialogs do this in macOS, and Chrome does it for its UI dialogs as well. I'm not sure what Windows does these days, but I assume the same.

Needing to indicate what ENTER (or SPACE) will do in a dialog that just appeared is, I think, quite a standard and necessary UX convention. Especially for modal dialogs.

It could be argued that this should be specific only to buttons and not any element. I don't have strong opinions on that.

[tabatkins]

I'm actually just asking if, in the example you provided, browsers currently draw focus rings. :focus-visible is meant to match the browser-default focus ring heuristics (and/or browser-default focus ring heuristics are meant to be defined by :focus-visible).

I agree that if a button is activateable as soon as a dialog opens it probably needs a focus ring to visually indicate that.

[craigkovatch]

Currently only Safari shows a focus ring in this scenario -- mercifully it does so for both <dialog> and <div role='dialog'> elements.

Testing heuristics of confirm() for guidance:

Chrome yes:

Safari yes:

Firefox no:

[fantasai]

@craigkovatch If I'm understanding correctly, I think you're either asking for another bullet point in the example heuristic in the spec, or asking for the last bullet point to be modified, correct?

https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo

Could you take a stab at wording it so I know I'm understanding correctly what needs fixing? :)

[tabatkins]

All right, we've added what we think is a reasonable distillation of the condition to the list of conditions, since Safari already has this behavior.

[craigkovatch]

LGTM! Apologies that I did not reply @fantasai , lost track during a vacation. Thanks @tabatkins