Claro's radio buttons and checkboxes are unusable in high-contrast / forced colors mode

Thats weird. That seems to match my environment exactly.

I'm using Parallels for my VM environment, but I can't imagine that affecting anything.

Can anyone else reproduce this?

I was able to reproduce on my personal computer (other gif was from work computer) using Windows 7, and Edge 99 (this time using VirtualBox as the VM).

yeah, I'm looking at the demo Olivero at lb.cm/olivero. Will DM you the credentials

This definitely improves the situation. That background image should not be there.

However, we still need work here because the color of the checkbox/circle doesn't adjust to the high contrast theme. In the picture below (with a black background), the selected "dot" has a contrast ratio of 2.35:1. 3:1 is the minimum for this type of things, but I'd argue that this should be even higher since the user obviously prefers (and needs) high contrast to operate.

I would suggest using a combination of the forced colors media query, and appearance: revert to revert the booleans back to browser defaults when in high contrast. This would let the browser handle the selected "dot" and checkbox, and that would have decent contrast irregardless of the user's high contrast theme.

@media (forced-colors: active) {
  .form-boolean {
    appearance: revert;
    background: none;
  }
}

for Drupal 9.4.x, you'd want to support IE, so it'd look something like

@media (-ms-high-contrast: active), (forced-colors: active) {
  .form-boolean {
    appearance: auto; /*test this in IE*/
    background: none;
  }
}

Thanks for the work @rafuel92!

There are a couple issues:

1) You need to compile and commit the CSS (this is the reason why the patch says "Custom Commands Failed")
2) The radio buttons are unaffected by this change

3) No need for the forced-colors: active media query when setting appearance: auto

 themes/claro/css/components/form--checkbox-radio.pcss.css
 75:49  ✖  Unexpected unknown media feature name "forced-color"  media-feature-name-no-unknown
 

This should be forced-colors (note the plural).

D'oh! I just noticed my comment under #23 had it wrong there too! Sorry! 🤦‍♂️🤦‍♂️🤦‍♂️😆

This is close, and this works as expected. But, we need to remove the IE11 specific media query for Drupal 10. The Drupal 9 version should have that.

The latest changes in #31 look perfect!

Screenshots attached. A couple notes:

1. I'm including some "regular" (non high contrast) browser screenshots to show that there are no regressions
2. The blue color of the checkboxes/radios in Firefox high contrast is hard coded and specific to that browser. I verified this on a codepen with no styling that showed a radio and checkbox

Edge regular

Firefox regular

Safari regular

Firefox high contrast

Edge high contrast

The MR above is for 10.0.x. Attached is a patch for 9.4.x with the same fix, but adding on the older version of the media query that supports IE11.

Updated 9.4.x patch to remove the unnecessary background image.