Carbon: Checkbox focus outline not visible in high contrast mode

[wkeese]

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;
    }
}

[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?

[dakahn]

@jendowns I'm absolutely on board with this change.

[wkeese]

BTW, I noticed that box-shadow is used for buttons too. Actually a border + box-shadow combo. Seems like carbon really doesn't like outline.

[tw15egan]

@carbon-design-system/design any chance we can take a look at revisiting Checkbox focus states?

[aagonzales]

I'm not sure what else we could visually change the focus state to. Most focus styles come in some form of a border. Is a style of a border not possible here? What are some dev solutions that would resolve this issue?

[laurenmrice]

Did the update we did recently to the focus states help this? The focus border now has a gap between the border and the icon.

[tw15egan]

I think we were originally using box-shadow to show multiple borders with rounded corners, not sure if that has changed. Possible solutions would be to use an outline or border

[wkeese]

https://react.carbondesignsystem.com/?path=/story/checkbox--checkbox is still using the box shadow, so still not working (unless you are talking about a change not released yet).

[tw15egan]

Working on a HCM fix, but if we want to revisit the focus states lets open up a separate issue for that 👍