[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

[ZoeBijl]

For what it’s worth, I agree with @mvorisek: this is a bug. Visible focus outline is an important interaction affordance; one especially helpful for power users and accessibility. Turning this off by default deteriorates the functionality of the design. Further more it means any product built on top of Fomantic now fails $2.4.7 of WCAG 2.2; the international standard for accessible web content.

Since WCAG is included in the EU’s EN 301 549: Accessibility requirements for ICT products and services any product built on top of Fomantic now fails the EU laws by default. That seems like an undesirable outcome.

Any reason not to drop this into a breaking change update?

[lubber-de]

As the next release will be a breaking change, we can enhance the existing draft pr #2801 (and use focus-visible there then) accordingly and consider this getting implemented .
As I mentioned , it will need some effort for special variants to look good cross browser