fix(list): action list missing focus and hover styling (#14147)

Since the action list is interactive, it needs styles when it's hovered and focused.

Author: crisbeto

src/lib/list/_list-theme.scss

@@ -27,7 +27,8 @@
   }
 
   .mat-list-option,
-  .mat-nav-list .mat-list-item {
+  .mat-nav-list .mat-list-item,
+  .mat-action-list .mat-list-item {
     &:hover, &:focus {
       background: mat-color($background, 'hover');
     }

src/lib/list/list.scss

@@ -315,7 +315,8 @@ mat-action-list {
 // use something like `@media (hover)`.
 @media (hover: none) {
   .mat-list-option,
-  .mat-nav-list .mat-list-item {
+  .mat-nav-list .mat-list-item,
+  .mat-action-list .mat-list-item {
     &:not(.mat-list-item-disabled):hover {
       background: none;
     }

src/lib/list/list.spec.ts

@@ -140,6 +140,14 @@ describe('MatList', () => {
     expect(items.length).toBeGreaterThan(0);
   });
 
+  it('should set the proper class on the action list host', () => {
+    const fixture = TestBed.createComponent(ActionListWithoutType);
+    fixture.detectChanges();
+
+    const host = fixture.nativeElement.querySelector('mat-action-list');
+    expect(host.classList).toContain('mat-action-list');
+  });
+
   it('should enable ripples for action lists by default', () => {
     const fixture = TestBed.createComponent(ActionListWithoutType);
     fixture.detectChanges();

src/lib/list/list.ts

@@ -94,6 +94,10 @@ export class MatList extends _MatListMixinBase implements CanDisableRipple, OnCh
    */
   constructor(private _elementRef?: ElementRef<HTMLElement>) {
     super();
+
+    if (this._getListType() === 'action-list' && _elementRef) {
+      _elementRef.nativeElement.classList.add('mat-action-list');
+    }
   }
 
   _getListType(): 'list' | 'action-list' | null {