Improve focus state for radio and checkbox controls in forced colors mode (for example, Windows High Contrast Mode) #2264
Conversation
The focus state for radios and checkboxes is currently not very visible in high contrast mode or when colours are overridden in Firefox – the only visible change is that the outer border of the radio or checkbox control thickens from 2px to 4px. This is the same as the part of the focus state change that meets contrast, but omits the yellow ‘ring’ created by the box shadow. Add an additional transparent outline to the control. In forced colors mode, transparent borders become solid (matching the text / foreground color) and so we get an additional outline around the focused control making it clearly visible. When explicitly in forced-color mode, we can enhance the outline further by using the Highlight system color, which matches the color used by the focus state of native controls – at least in in Edge / Chrome / Opera which are the only other browsers to support forced color mode.
|
@36degrees Can we add a Changelog entry for this? |
36degrees
changed the title
|
Is it 'forced color mode' or 'forced colors mode'? I thought it might be the latter because 'forced colors mode' is the one I've seen more of online. For example, in Chrome and Mozilla. If it is the latter, then we probably need to tweak the title of both this ticket and similar tickets in any upcoming fix release... |
|
Good catch! The Windows blog post (https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/) uses both terms interchangeably, but 'forced color mode' more often – which I think influenced my usage of the term originally. However, I think the canonical resource to refer to for this is the CSS Color Adjustment Module Level 1 specification, which includes 'forced colors mode' as a defined term. |
EoinShaughnessy
changed the title
|
Thanks, @36degrees. I've updated this PR's title, along with those for #2265, #2273 and #2277. I'll also update the Changelog entries when I raise a PR for the notes. |
Adds IE11 supportto the previous Windows High Contrast Mode fixes in PR #2264. Internet Explorer 11 doesn't support the `forced-colors` media feature or the `forced-color-adjust` property, but it has equivalents in `-ms-high-contrast` and `-ms-high-contrast-adjust`. We can use those CSS features to extend fixes to high contrast mode that previously only worked on more modern browsers. Adds a tweak to changes in commit 7dcba7d, so that the highlight works in Internet Explorer 11 as well.
EoinShaughnessy
changed the title
The focus state for radios and checkboxes is currently not very visible in high contrast mode or when colours are overridden in Firefox – the only visible change is that the outer border of the radio or checkbox control thickens from 2px to 4px. This is the same as the part of the focus state change that meets contrast, but omits the yellow ‘ring’ created by the box shadow.
Add an additional transparent outline to the control. In forced colors mode, transparent borders become solid (matching the text / foreground color) and so we get an additional outline around the focused control making it clearly visible.
When explicitly in forced-color mode, we can enhance the outline further by using the Highlight system color, which matches the color used by the focus state of native controls – at least in in Edge / Chrome / Opera which are the only other browsers to support forced color mode.
Fixes #2258
A native focused text input in Edge in High Contrast Mode, for comparison: