[ux] Native tab focus must not be visually supressed

[mvorisek]

Feature Request

When tabindex="0" is set to a (div) button, the div can be focused by a tab.

Currently when such div is focused, no native glow is present. I have identified this is because: outline: none style.

Example (if possible)

1. open https://dev.atk4.org/demos/form/form.php
2. click the first input field
3. press tab
4. notice the button background changed very slightly, but native tab outline around the button is not present

Screenshot (if possible)

normal:

focused:

compare it with tab glow in https://dev.atk4.org/demos/interactive/paginator.php for example:

Expected fix/behaviour

Not sure why there is outline: none, but at least for :focus-visible pseudo class no outline: none style must be applied.

(focused button without outline: none style, notice the native outline/border around the button, the color is not much different visually, but the visual dimension difference makes it very easy to understand what button is (tab) focused)

[ko2in]

Yes. As far as I know, it's by design ever since we've forked from SUI.

This less file is your friend for any customization where you can add the outline that suits your design and color pattern.

[mvorisek]

This is UX problem of Fomantic-UI. It is present also with dropdown when navigated via tab.

regex to find empty outlines: outline(-\w+)*:.*(non|0)

local fix can be:

*:focus-visible {
  outline: 2px solid darkblue !important;
}

but this is not optimal, as it will override every element, even the ones that Fomantic-UI styles now like inputs.

[lubber-de]

Removing the outline on focus for some components was decided by design since SUI was released in favor of using a different color of the whole component when the component gets focused. Showing the outline does not fit the default theme anymore and would be a breaking change.

I prepared a PR which allows to customize that if desired and overrides the outline in case of focus by #2801