Autocomplete using Windows high contrast mode (WHCM)

[danielelder]

When using Windows high contrast mode (High Contrast Blank theme) the focus and hover style of items in the list are displayed as white text on a black background, i.e. no difference to the unfocused default state..

This would prevent a keyboard only user using high contrast mode from being able to know which item in the list they are selecting.

A possible solution would be to apply some high contrast styles to the css to set the colour to the system colour when high contrast mode is enabled, for example:

/* IE 11 and Edge 17 and below */
@media (-ms-high-contrast: active) {
  .autocomplete__option--focused,
  .autocomplete__option:hover {
    -ms-high-contrast-adjust: none;
    background-color: highlight;
    color: highlightText;  
  }
}

/* Edge 18+ */
@media (forced-colors: active) {
  .autocomplete__option--focused,
  .autocomplete__option:hover {
    -ms-high-contrast-adjust: none;
    background-color: highlight;
    color: highlightText;  
  }
}

Screenshots of current styling:

Screen using high contrast media query with system colours:

[vanitabarrett]

I think this is a duplicate of #369 and should be fixed by #512