bug(mdc-chips): Chip Selection Checkmark not visible in High Contrast Mode on Windows

[toli-belo]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

we have some mdc-chips used in the angular app like this:

  <mat-chip-option
          #someLabel
          class="....."
          appearance="hairline-filter"
          [value]="....."
          [selected]="ctrl.value === ......"
          [attr.aria-selected]="ctrl.value === ....."
          [selectable]="ctrl.value !== ......">
        Text Value Here
      </mat-chip-option>

The selection Checkmark on the chip looks good in any mode including high contrast on Mac or Chromebook (tested in Chrome), but when tested for Accessibility on Windows running Chrome the checkmark is not visible, it shows simply empty space in place of checkmark.

** the Chip appears to have the extra room for checkmark but it's empty.

Reproduction

Steps to reproduce:

1. Incorporate some mdc-chips into your template,
2. set appearance="hairline-filter" on the chip just to be sure
3. make sure one chip is selected = true so that the checkmark appears
4. open the page in Windows Chrome with High Contrast mode
5. the checkmark will be invisible.

Expected Behavior

The checkmark should be visible

Actual Behavior

Checkmark is invisible

Environment

• Angular: 2.0
• CDK/Material: 2.0 , looks that this tree has the latest PRs from github
• Browser(s): Chrome v.101.0.4951.54/ Firefox 100.0.2
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 Enterprise (64-bit)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}