Giters

master-co / css

The CSS Language and Framework

Home Page:https://css.master.co

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

💖 Reset outline style on focus to maintain accessibility

1aron opened this issue · comments

commented

The default outline styles for most elements:

image

If we could make sure that the above is the default behavior of all elements, then just reset focus outline again in @master/normal.css:

*,
::before,
::after {
    border: 0 solid;
    outline: 0 solid;
}

:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
}

Originally posted by @1aron in #299 (comment)

commented

@1aron

Browsers default styles:

You can search for outline there to see how it might affect.

From my research, those 3 browsers have different styling for the default focus state. To use the default styling, we can do something like this:

:focus-visible {
    outline: auto;
}

Chromium and Firefox has some special cases where outline is also used but I'm not sure if they actually matter in our case. For example, Chromium has:

input[type="time" i]::-webkit-calendar-picker-indicator:focus-visible {
  outline: solid 2px -webkit-focus-ring-color;
  outline-offset: -2px;
}

But it doesn't apply it to anything when I tested in Chrome 119 because -webkit-calendar-picker-indicator isn't focusable at all. However, I'm not sure about those special cases because I don't have any context about them.

image

commented

@lesha1201 You're a pro! After some experimentation, we can't preset the outline or border using @master/normal.css. Once you apply border:1|blue, the border-style reverts to its initial state because the border shorthand doesn't inherit solid. This might be why we initially set up this behavior in the Master CSS rules. I'll revert those recent commits.