Borders and icons fix for Windows' high contrast mode

[ludoboludo]

Why are these changes introduced?

Fixes #408

What approach did you take?

Followed the suggestion from the issue. Using a media query specific to when high contrast mode is used.

Other considerations

Demo links

• Store
• Editor

Checklist

• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

Testing

• Inputs,
• Buttons,
• Icons (social media, header, collapsible tab),
• Table (customer account),
• loading spinner in cart

The loading spinner for the add to cart is not coming up properly but it's being changed in another PR to remove the disabled attribute (#582).

[svinkle]

@ludoboludo Looking good. A few things:

1. Would it be possible to apply a transparent border for facet selectors?
2. Remove facet x icon is still difficult to see
3. Sort control border needs some padding
4. Facet checkbox is visually the same state; checked or unchecked (set border instead of background-color in media query)

   @media screen and (forced-colors: active) {
     .facet-checkbox>svg {
       background-color: inherit; /* "remove" the background */
       border: solid 1px rgb(var(--color-background));
     }
     .facet-checkbox>input[type=checkbox]:checked~.icon-checkmark {
       border: none;
     }
   }

5. Product selection is visually the same state; selected or unselected (add an underline)

   @media screen and (forced-colors: active) {
     .product-form__input input[type=radio]:checked+label {
       text-decoration: underline;
     }
   }

Screenshots

[ludoboludo]

@svinkle what about just removing the border overall ? So it has the same look as when it's not using windows' high contrast mode ?

[tauthomas01]

Looks great! Thanks for doing this, I have never seen these new properties and media query so this is interesting 👍

[tauthomas01]

LGTM

[ludoboludo]

Sorry @svinkle & @tauthomas01, I just pushed one last thing I noticed. When adding to the cart, while the submit button had aria-disabled="true", it should be hiding the Add to cart text and showing only the loading spinner. But it was still showing the text under the spinner. With the latest commit it's fixed 👌

[ludoboludo]

Annnnd same thing again. Facet filter on search page got merged so it created some conflicts I had to fix. Sorry for the re request. 😬
@svinkle @tauthomas01

[svinkle]

LGTM

[tauthomas01]

Facets work well