[form-core] focused-visible attr FormControls

[tlouisse]

Expected behavior

I can style focused state for active elements enabled by keyboard (tab) interaction, like: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible, via a [focused-visible] attribute

Actual Behavior

I can only style the [focused] state, which also shows a focus ring on click of an element

Additional context

Should be solved in FocusMixin via prop:

focusedVisible: {
   type: Boolean,
   attribute: 'focused-visible',
   reflect: true,
}

possible implementations

• see: Support focus-visible #1267 (reply in thread)
• working poc of this: https://webcomponents.dev/edit/NDbZaQP8185CCrMVZ7Rk/src/index.js

[tlouisse]

See:

• https://webcomponents.dev/edit/NDbZaQP8185CCrMVZ7Rk/src/index.js
• [performance] applying the polyfill in self contained web components with light dom WICG/focus-visible#254

[daKmoR]

can we add this as progressive enhancement via the native :focus-visible... e.g. only css and no js?

[tlouisse]

can we add this as progressive enhancement via the native :focus-visible... e.g. only css and no js?

Also had a solution for this in a branch that I will push :)
I think the overhead for supporting the polyfill is very minimal (just an attribute check). A consumer will then be responsible for loading the polyfill. Looking at #1267 (reply in thread), there seems to be demand for the polyfill

[tlouisse]

Or did you mean no js solution at all @daKmoR... just a recommendation in the docs? In that case, I would say we need this in the FocusMixin, because we need to be able to style the host when the focusable element has :focus-visible (we need this in our own extension layer to put a border around the switch FIeld when the button within has focus