[selectors] `:user-interacted` pseudo-class to match controls the user has interacted with

[LeaVerou]

A while back, we resolved to add :user-valid and :user-invalid pseudo-classes to represent :valid and :invalid states the user has interacted with.

These depend on a user has interacted state that is not exposed in any other way. I propose exposing it as a separate pseudo-class, then these become aliases of :user-interacted:valid / :user-interacted:invalid.

This came up in defining how custom element authors expose this state for their custom elements, but the pseudo-class seems useful in its own right, and if browsers are already tracking this state, it should be fairly low effort to implement.

(Name obviously TBB)

[Loirooriol]

Would :user-interacted be the same as :is(:user-valid, :user-invalid)? Or are there things that the user can interact with but lack data validity semantics? Like expanding a <details> or something.

[LeaVerou]

The latter.

[Loirooriol]

That seems more useful but needs more thought about what exactly is considered to be an interaction. E.g. does selecting text or clicking in a normal <div> mark it as interacted? Browsers may be tracking some cases but not others, and if they don't agree about what to track, then it will be more effort to implement.

[LeaVerou]

That seems more useful but needs more thought about what exactly is considered to be an interaction. E.g. does selecting text or clicking in a normal <div> mark it as interacted? Browsers may be tracking some cases but not others, and if they don't agree about what to track, then it will be more effort to implement.

I think it's reasonable to limit to focusable elements.