💖 Reset outline style on focus to maintain accessibility

1aron commented 1 year ago

The default outline styles for most elements:

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 https://github.com/master-co/css/issues/299#issuecomment-1793493602

lesha1201 commented 1 year ago

@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.

1aron commented 1 year ago

@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.

github-actions[bot] commented 1 year ago

:tada: This issue has been resolved in version 2.0.0-beta.199 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] commented 10 months ago

:tada: This issue has been resolved in version 2.0.0-rc.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

master-co / css

💖 Reset outline style on focus to maintain accessibility #302