feat(chore): optional outline on focus-visible

[lubber-de]

Description

This PR allows to declare a specific focus-visible outline for some components where the default outline is set to none.
The default will be kept to none because FUI mostly shows focus by providing a different color (e.g. buttons) or would not visually fit.

To reduce CSS selectors only a value != none will be rendered, so by default the CSS output wont change

Now the user can decide to change @focusVisibleOutline globally in a custom site.variables or individually inside a custom themes {component.variables}

Closes

#2799

[mvorisek]

See https://stackoverflow.com/questions/31402576/enable-focus-only-on-keyboard-use-or-tab-press for analysis how big players style it.

In #2799 I have described an issue for tab focus for button (and dropdown). As the PR is coded now, it will imply outline for :focus, ie. bold outline for buttons clicked by a mouse. This is not wanted.

Is there any way how to simply not add outline: none when :focus-visible is active? At least for browsers that support this pseudo class - https://caniuse.com/css-focus-visible.

[lubber-de]

Is there any way how to simply not add outline: none when :focus-visible is active? At least for browsers that support this pseudo class - caniuse.com/css-focus-visible.

Sure

.ui.button:focus-visible {
  outline: revert;
}

https://jsfiddle.net/lubber/y0ba824e/10/

[mvorisek]

Yes, please add this revert style for buttons and other important components.

[lubber-de]

Yes, please add this revert style for buttons and other important components.

No, at least not now, because that won't fit the FUI default theme and every browser displays that differently. If you want this consistent people should be able to define the outline as desired via changing the less variables in this PR.

And there are combinations like labeled input where this would need additional styling to look good.

If you don't care about all this, then i suggest to add this as custom css in your app. Putting this hardcoded into FUI ,i can already hear several people scream about the visual change in the next version

[mvorisek]

I consider this a bug. .ui.button:focus-visible selector will not focus visually on a button click nor if a button has no tabindex set. So there should be no visual change on anything except when a button is navigated via tab which deserves a proper styling. I belive the current Fomantic-UI simply does not account for tab focus styling.

One proof - a:focus-visible is styled currently natively as well. Just try it. Another proof - for ex. Google does not style it as well ;-).

So I propose:
a) revert the outline for button with .ui.button:focus-visible selector
b) fix tab visual focus of dropdown to match regular (styled by Fomantic-UI) input style (currently dropdown glow is based on open/close, not on (regular) focus)
c) review other outline: none/0 cases case by case

[mvorisek]

Here is a default FF style obtained from about:config FF:

preview:

so outline-offset (and maybe other CSS properties) needs to be reverted as well

Current Fomantic-UI button/dropdown/checkbox UX can be tested on https://dev.atk4.org/demos/form-control/input2.php.

[lubber-de]

Update

I changed the PR to support custom outline and outline-offset styling for :focus-visible now.
Simply setting @focusVisibleOutline: revert; will apply the browsers default style on focus-visible everywhere.

Next steps/ todo:

• crossbrowser check the default styling on focus-visible (when reverting as mentioned above) for all the components and their variants
• adjust/apply a proper FUI like styling and change the defaults for @focusVisibleOutline and @focusVisibleOutlineOffset accordingly in site.variables
• check combined variants (like labeled input) and add additional variables and selector for such stylings if needed
• create a custom theme to be able to keep using none for people still wanting the old behavior

[ko2in]

LGTM.