Windows High Contrast mode broken - checkboxes and radio buttons

[jnurthen]

Description

It is impossible to tell whether checkboxes/radio buttons are checked or not when running in WHCM

Steps to reproduce

1. Go to http://opensource.adobe.com/spectrum-css/
2. Turn on Windows High Contrast mode (left shift+ left alt + print screen)
3. Run Checkbox page
4. Observe there is no difference between checked and unchecked
5. Run Radio page
6. Observe no difference between checked and unchecked

Expected behavior

I expect to be able to tell what is selected

Screenshots

current behavior checkbox

behavior before #619 was applied checkbox

current behavior radio button

behavior before #619 was applied radio button

Environment

• Spectrum CSS version: 2.13.0
• Browser(s) and OS(s): Edge 85.0.564.23 on Win 10 -->

Additional context

likely caused by #619
Seems caused by the addition of background-color on the button/checkbox

synced to jira: https://jira.corp.adobe.com/browse/SDS-7322

[jnurthen]

Thinking about this a little more I think the best approach for checkboxes and radios it to show the native checkbox/radio instead of the generated content version when possible. So something like this for checkboxes.

@media (forced-colors: active) {
  .spectrum-Checkbox-input {
    opacity: 1;
    inline-size: var(--spectrum-checkbox-box-size);
    block-size: var(--spectrum-checkbox-box-size);
  /* Needs some work to position the checkbox in the right place */
  }
  .spectrum-Checkbox-box {
    visibility: hidden;
  }
  .spectrum-Checkbox.is-indeterminate {
    .spectrum-Checkbox-input {
      opacity: 0.0001;
    }
    .spectrum-Checkbox-box,
    .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box {
      visibility: visible;
      &:before {
        border-width: var(--spectrum-checkbox-box-border-size);
      }
      /* Need to fix focus styles for windows high contrast for indeterminate checkboxes */
    }
  }
  
}

This would solve a lot of the problems without having to modify much code. Ideally we could actually set the indeterminate attribute in JS and we wouldn't even have to special case indeterminate here.