Misuse of explicit colour for active pager item in -ms-high-contrast media query

Problem/Motivation

I found a serious misuse of colour in a high-contrast media query.

The pagination indicates the current page by drawing a circle around the number. In the full-colour scheme, a blue background is used for this link. When using a Windows high-contrast mode, this background colour is stripped away, so pager.pcss.css uses an -ms-high-contrast: active media query, to set an explicit WHITE border around the active item in the pager.

This isn't guaranteed to show up against the page background.

Steps to reproduce

When designing for Windows high-contrast (a.k.a. forced colours), remember to test with arbitrary user-specified colour schemes, as well as the pre-set ones.

When using one of the pre-set colour schemes with a black background, the white border shows up well:

However, when using the pre-set black-on-white colour scheme, the white border cannot be seen at all, because it's the same as the page background:

When a custom colour scheme has been chosen by the user, anything could happen. Sometimes you get lucky; here I'm using a custom yellow-on-blue scheme. The white border shows up well against the blue background:

Other times, you aren't so lucky. Here's a brown-on-peach scheme. The explicit white border doesn't show up very well.

I think I saw another instance of an explicit colour inside a high-contrast media query.

Proposed resolution

Remove this explicit white colour. Let it use a border the same colour as the link text.

Remaining tasks

Look for other instances of explicit colours in an -ms-high-contrast media query.

User interface changes

When multiple characters are used within a pager item (eg double numbers), the circle outline can stretch into an oval. This is per the design, but was less pronounced with the white border.

API changes

Data model changes

Release notes snippet