Map navigation controls not visible in windows high contrast mode

[PascalvanOol]

mapbox-gl-js version: latest mapbox sample page

Steps to Trigger Behavior

1. Change your windows theme to high contrast Decisions #1
2. Open IE 11 browser
3. Open "Display map navigation controls" example:
   https://www.mapbox.com/mapbox-gl-js/example/navigation/

Expected Behavior

Navigation controls to show a icon in contrasting color.

Actual Behavior

Navigation controls are shown all black.

[jfirebaugh]

From my research, to fix this we need to avoid using background-image, which is ignored by IE11 in high-contrast modes. Instead, we should be using inline SVG with a rule such as:

@media screen and (-ms-high-contrast: active) {
  .button-icon {
    fill: ButtonText;
  }
}

https://css-tricks.com/accessible-svgs-high-contrast-mode/

[kkaefer]

Fixed by #8874. Please see #8874 (comment) for screenshots of how it looks in Windows High Contrast mode.