💖 Reset outline style on focus to maintain accessibility about css HOT 4 CLOSED

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

from css.

@1aron

Browsers default styles:

• WebKit - https://searchfox.org/wubkat/source/Source/WebCore/css/html.css#1292-1298
• Chromium - https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/resources/html.css;l=1220;bpv=0
• Firefox - https://searchfox.org/mozilla-central/source/layout/style/res/ua.css#176

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.

from css.

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

The release is available on:

• GitHub release
• npm package (@beta dist-tag)
• npm package (@beta dist-tag)
• npm package (@beta dist-tag)
• npm package (@beta dist-tag)
• npm package (@beta dist-tag)
• npm package (@beta dist-tag)
• npm package (@beta dist-tag)
• npm package (@beta dist-tag)
• npm package (@beta dist-tag)
• npm package (@beta dist-tag)
• npm package (@beta dist-tag)
• npm package (@beta dist-tag)
• npm package (@beta dist-tag)
• npm package (@beta dist-tag)
• npm package (@beta dist-tag)
• npm package (@beta dist-tag)
• npm package (@beta dist-tag)
• npm package (@beta dist-tag)
• npm package (@beta dist-tag)

Your semantic-release bot 📦🚀

from css.

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

The release is available on:

• GitHub release
• npm package (@rc dist-tag)
• npm package (@rc dist-tag)
• npm package (@rc dist-tag)
• npm package (@rc dist-tag)
• npm package (@rc dist-tag)
• npm package (@rc dist-tag)
• npm package (@rc dist-tag)
• npm package (@rc dist-tag)
• npm package (@rc dist-tag)
• npm package (@rc dist-tag)
• npm package (@rc dist-tag)
• npm package (@rc dist-tag)
• npm package (@rc dist-tag)
• npm package (@rc dist-tag)
• npm package (@rc dist-tag)
• npm package (@rc dist-tag)
• npm package (@rc dist-tag)
• npm package (@rc dist-tag)
• npm package (@rc dist-tag)
• npm package (@rc dist-tag)

Your semantic-release bot 📦🚀

from css.