bug(mat-list-option): There's no visual selected state on mobile browsers

[nunoarruda]

Reproduction

https://stackblitz.com/angular/aexyvybjrlm?file=src%2Fapp%2Flist-single-selection-example.html (taken from your "List with single selection" example: https://material.angular.io/components/list/examples)

Steps to reproduce:

1. Open the StackBlitz link above on a mobile browser (Safari on iOS, or Chrome on Android)
2. Click the items

Expected Behavior

The selected item should have a visual selected state, like on desktop.

Desktop screenshot (macOS, Chrome):

Actual Behavior

There's no visual selected state.

Mobile screenshot (iPhone, iOS, Safari):

Environment

• Angular: 10.0.0
• CDK/Material: 10.0.1
• Browser(s): Safari
• Operating System (e.g. Windows, macOS, Ubuntu): iOS

Please fix.

PS: Any workaround we can use while this gets fixed and released?

[nunoarruda]

For anyone wondering, I'm using the following as a temporary workaround:

@media (hover: none) {
  .mat-list-single-selected-option {
    &:not(.mat-list-item-disabled):hover {
      background: rgba(0, 0, 0, 0.12);
    }
  }
}

[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.}