Checkbox focus outline not visible in high contrast mode

No checkbox focus outline in high contrast mode

Environment

OS

Windows 10 etc.

Browsers

IE11, Edge Chromium, Firefox

Settings

High Contrast Theme #1 enabled

Detailed description

What version of the Carbon Design System are you using?

10.14

What did you expect to happen?

To see a focus outline on the checkbox, like when high contrast mode is disabled.

What happened instead?

No focus outline.

What WCAG 2.1 checkpoint does the issue violate?

https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

Steps to reproduce the issue

The problem is not specific to react but you can see it at https://react.carbondesignsystem.com/?path=/story/checkbox--checked.

Additional information

Here’s what it looks like, regardless of whether or not it’s focused:

The problem is that the focus outline is rendered via box-shadow rather than outline:

  // Unchecked
  .#{$prefix}--checkbox:focus + .#{$prefix}--checkbox-label::before,
  .#{$prefix}--checkbox-label__focus::before,
  // Checked
  .#{$prefix}--checkbox:checked:focus + .#{$prefix}--checkbox-label::before,
  .#{$prefix}--checkbox-label[data-contained-checkbox-state='true'].#{$prefix}--checkbox-label__focus::before,
  // Indeterminate
  .#{$prefix}--checkbox:indeterminate:focus + .#{$prefix}--checkbox-label::before,
  .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed'].#{$prefix}--checkbox-label__focus::before {
    // Must use box-shadow for appearance of multiple borders with rounded corners.
    box-shadow: 0 0 0 2px $inverse-01, 0 0 0 4px $focus;
  }

The obvious fix is to use outline instead of box-shadow but assuming there’s some reason you aren’t doing that already, a possible alternative fix is:

@media screen and (-ms-high-contrast: active) {
	// Unchecked
	.#{$prefix}--checkbox:focus + .#{$prefix}--checkbox-label::before,
	.#{$prefix}--checkbox-label__focus::before,
	// Checked
	.#{$prefix}--checkbox:checked:focus + .#{$prefix}--checkbox-label::before,
	.#{$prefix}--checkbox-label[data-contained-checkbox-state='true'].#{$prefix}--checkbox-label__focus::before,
	// Indeterminate
	.#{$prefix}--checkbox:indeterminate:focus + .#{$prefix}--checkbox-label::before,
	.#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed'].#{$prefix}--checkbox-label__focus::before {
		outline: 1px solid highlightText;
		outline-offset: 2px;
	}
}

[tw15egan]

Power is out at my house right now, but once it’s back on I’ll boot up my Windows machine and investigate what’s going on with these…

[jendowns]

@carbon-design-system/ibma Can the focus state for the checkboxes be revisited… I have noticed positioning issues (see #6480), and then just saw this more serious issue about the focus state not being visible in high contrast mode.

The use of box-shadow for the checkbox’s focus state was originally to help show multiple borders with “rounded corners”. But can this library move away from that and return to using outlines (or a single border) – for accessibility, consistency, and stability?