Apply new contrast feature syntax

[stacy-rendall]

Launch Checklist

• Confirm your changes do not include backports from Mapbox projects (unless with compliant license) - if you are not sure about this, please ask!
• Briefly describe the changes in this PR.
• Link to related issues.
• Include before/after visuals or gifs if this PR includes visual changes.
• Write tests for all new functionality.
• Document any changes to public APIs.
• Post benchmark scores.
• Add an entry to CHANGELOG.md under the ## main section.

Fixes #4193: -ms-high-contrast vendor prefix is being deprecated, as per: https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/

This PR merges to main, but note in the linked issue that it is suggested this may be a breaking change...? I don't believe it is a breaking change - the behaviour for MS Edge remains unchanged, and the PR fixes a previously unknown issue with Firefox (potentially other browsers).

Before/after visuals

Used Windows in high contrast mode to test.

Edge

Before

After

Console warning is no longer present.

Firefox

Before

Note that Firefox did not appear to be working correctly beforehand (contrast of button elements too low):

After

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 87.59%. Comparing base (144c68d) to head (c2a80a5).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4250      +/-   ##
==========================================
+ Coverage   87.35%   87.59%   +0.23%     
==========================================
  Files         242      242              
  Lines       33081    33081              
  Branches     2183     2177       -6     
==========================================
+ Hits        28899    28977      +78     
+ Misses       3185     3124      -61     
+ Partials      997      980      -17     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[coliff]

Heya - I opened that issue originally so thanks for the PR. This looks great to me :-) I agree that this should not be considered a breaking change as the end-result is the same in Edge.

Perhaps in the future (in a separate PR) the styles could also be adapted/modified to be used for the prefers-contrast: more media query so it'll work on other browsers (Safari, Chrome etc) too for users who have that setting... but for now this is a good fix for the Edge console warning (and the Firefox side-effect). 👍

[HarelM]

THANKS!