Use of outline:none leave no focus state styling in Windows +Edge with High Contrast Mode on.
wittjeff opened this issue · comments
Feedback summary
On Windows + Edge, with High Contrast Mode on (type left-shift+left-alt+PrintScreen to toggle it), there is no focus state styling for some controls in Paragon.
Improvements
In practice there is a better way to use outline: anywhere that we have an alternative to outline attribute for focus state styling: we should probably use outline: transparent instead of outline: none. This is because, transparent value gets mapped to a visible value in HC mode, and focus styling does its job.
Bugs
This affect may be specific to Edge on Windows.
Generally we use box-shadow for focus state styling, for two reasons: 1) it allows rounded corners (unlike outline, last time I checked), 2) it allow a gap between the focus state styling (2px box-shadow) and the thing being focused, which helps with WCAG 2.2: https://www.w3.org/TR/WCAG22/#focus-appearance (we're not required to conform to AAA-level WCAG Guidelines, but we do here so that's a bonus.
In Windows High Contrast Mode, box-shadows are removed and outline (if not None) is turned into a bright high-contrast color. But none value does not get mapped, so there may be no focus state styling in Window with High Contrast Mode on.