Open mvorisek opened 1 year ago
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.
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.
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
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)
Screenshot (if possible)
normal:![image](https://github.com/fomantic/Fomantic-UI/assets/2228672/bcfe767a-edf6-4de1-8f41-cb055a6c5de9)
focused:![image](https://github.com/fomantic/Fomantic-UI/assets/2228672/fd4d8e95-8051-4511-adcd-a2434bc02b2f)
compare it with tab glow in https://dev.atk4.org/demos/interactive/paginator.php for example:![image](https://github.com/fomantic/Fomantic-UI/assets/2228672/ce7db4f3-f38f-4037-ad90-5ea4b78bbaaa)
Expected fix/behaviour
Not sure why there is
outline: none
, but at least for:focus-visible
pseudo class nooutline: none
style must be applied.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)