fix(checkbox): checked state forced color contrast

dancormier commented 3 months ago

STACKS-599

This PR fixes the lack of contrast in the checked checkbox component when the user has enabled forced color mode.

Before

stackoverflow design_product_components_checkbox_

After

localhost_8080_product_components_checkbox_

netlify[bot] commented 3 months ago

Deploy Preview for stacks ready!

Name	Link
Latest commit	ba315d9892b93bff1b16dc24cb66d9784cbae9ce
Latest deploy log	https://app.netlify.com/sites/stacks/deploys/660edc50045a6800084232ab
Deploy Preview	https://deploy-preview-1699--stacks.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

dancormier commented 3 months ago

Based on my testing in WHCM (Desert mode) we can achieve what we want without having to redefine the bg-image This is sufficient:
   @media (forced-colors: active) {
        &:checked {
            --_ch-bg: ButtonText !important;
        }
        &:indeterminate {
            --_ch-bg: ButtonText !important;
        }
    }
I am happy to merge the simplified version above in.

Without the background image redefinition, we'll have contrast issues if Stacks dark mode is enabled in addition to forced color mode.

I understand this would be an unusual circumstance but I figured it was a good idea to account for all possible cases. What do you think @giamir?

Sidenote While I was in Windows I took some time to explore our DS in WHCM and I could see several components that are not rendering well (including toggles, tags, navigation not showing selected items, etc...). We should probably create a rough inventory of those issues as part of the upcoming spike story.

Yep, there's definitely room for improvement across our components. The ticket has "A rough inventory of user forced color issues in our components (e.g. toggles, tags, etc…) is added to the document" in the success criteria so I'll make sure to include a list of components (assuming I perform the spike sprint).

StackExchange / Stacks