feat(chore): optional outline on focus

[lubber-de]

Description

This PR allows to declare a specific focus 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 @focusOutline globally in a custom site.variables or individually inside a custom themes {component.variables}

I still used the :focus pseudo class instead of :focus-visible as we still support IE11 and and even Safari does only support that since 15.4 and we support the last 4 Safari versions, and we always used :focus everywhere else.

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, are 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.