fixup! feat(material-experimental/mdc-list): implement selection list

Address feedback

Author: devversion

src/material-experimental/mdc-list/action-list.ts

@@ -24,9 +24,10 @@ import {MatListBase} from './list-base';
   ]
 })
 export class MatActionList extends MatListBase {
-  // An action list is considered interactive, but does not extend the interactive
-  // list base class. We do this because as per MDC, items of interactive lists are
-  // only reachable through keyboard shortcuts. We want all items for the action list
-  // to be reachable through tab key though. This ensures best accessibility.
+  // An navigation list is considered interactive, but does not extend the interactive list
+  // base class. We do this because as per MDC, items of interactive lists are only reachable
+  // through keyboard shortcuts. We want all items for the navigation list to be reachable
+  // through tab key as we do not intend to provide any special accessibility treatment. The
+  // accessibility treatment depends on how the end-user will interact with it.
   _isNonInteractive = false;
 }

src/material-experimental/mdc-list/interactive-list-base.ts

@@ -138,7 +138,12 @@ export abstract class MatInteractiveListBase<T extends MatListItemBase>
    */
   protected _resetTabindexToFirstSelectedOrFocusedItem() {
     this._clearTabindexForAllItems();
-    (this._foundation as any)['setTabindexToFirstSelectedOrFocusedItem']();
+    // MDC does not expose the method for setting the tabindex to the first selected
+    // or previously focused item. We can still access the method as private class
+    // members are accessible in the transpiled JavaScript. Tracked upstream with:
+    // TODO: https://github.com/material-components/material-components-web/issues/6375
+    // @ts-expect-error
+    this._foundation.setTabindexToFirstSelectedOrFocusedItem();
   }
 
   _elementAtIndex(index: number): HTMLElement|undefined {

src/material-experimental/mdc-list/list-base.ts

@@ -80,7 +80,7 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
     // indicator support in such scenarios.
     this._elementRef.nativeElement.classList.add('mat-mdc-focus-indicator');
 
-    // If no type attributed is specified for a host `<button>` element, set it to
+    // If no type attribute is specified for a host `<button>` element, set it to
     // "button". If a type attribute is already specified, do nothing. We do this
     // for backwards compatibility with the old list.
     // TODO: Determine if we intend to continue doing this for the MDC-based list.

src/material-experimental/mdc-list/list-option.html

@@ -14,9 +14,7 @@
       no accidental change event leaks out of the list option or selection list when
       the checkbox is directly clicked.
     -->
-    <input type="checkbox" tabindex="-1" class="mdc-checkbox__native-control"
-           [checked]="selected" [disabled]="disabled" [attr.aria-describedby]="_optionTextId"
-           (change)="$event.stopPropagation()" />
+
     <div class="mdc-checkbox__background">
       <svg class="mdc-checkbox__checkmark"
            viewBox="0 0 24 24">

src/material-experimental/mdc-list/nav-list.ts

@@ -24,9 +24,10 @@ import {MatListBase} from './list-base';
   ]
 })
 export class MatNavList extends MatListBase {
-  // An navigation list is considered interactive, but does not extend the interactive
-  // list base class. We do this because as per MDC, items of interactive lists are
-  // only reachable through keyboard shortcuts. We want all items for the navigation list
-  // to be reachable through tab key though. This ensures best accessibility.
+  // An navigation list is considered interactive, but does not extend the interactive list
+  // base class. We do this because as per MDC, items of interactive lists are only reachable
+  // through keyboard shortcuts. We want all items for the navigation list to be reachable
+  // through tab key as we do not intend to provide any special accessibility treatment. The
+  // accessibility treatment depends on how the end-user will interact with it.
   _isNonInteractive = false;
 }

src/material/list/list.ts

@@ -211,7 +211,7 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn
     this._isInteractiveList = !!(navList || (list && list._getListType() === 'action-list'));
     this._list = navList || list;
 
-    // If no type attributed is specified for <button>, set it to "button".
+    // If no type attribute is specified for <button>, set it to "button".
     // If a type attribute is already specified, do nothing.
     const element = this._getHostElement();
 

src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html

@@ -201,3 +201,29 @@ <h2>MDC Progress spinner</h2>
 <mat-spinner></mat-spinner>
 <mat-progress-spinner mode="indeterminate" [diameter]="37"></mat-progress-spinner>
 <mat-spinner [strokeWidth]="4"></mat-spinner>
+
+<h2>List</h2>
+<mat-list>
+  <mat-list-item>Robot</mat-list-item>
+  <mat-list-item>Android</mat-list-item>
+  <mat-list-item>Cyborg</mat-list-item>
+</mat-list>
+
+<mat-nav-list>
+  <a mat-list-item href="https://google.com">Search</a>
+  <a mat-list-item href="https://google.com">Find</a>
+  <a mat-list-item href="https://google.com">Seek</a>
+</mat-nav-list>
+
+<mat-action-list>
+  <button mat-list-item>First action</button>
+  <button mat-list-item>Second action</button>
+  <button mat-list-item>Third action</button>
+</mat-action-list>
+
+<mat-selection-list>
+  <h3 mat-subheader>Groceries</h3>
+  <mat-list-option value="apples">Apples</mat-list-option>
+  <mat-list-option value="bananas">Bananas</mat-list-option>
+  <mat-list-option value="oranges">Oranges</mat-list-option>
+</mat-selection-list>

src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts

@@ -4,6 +4,7 @@ import {MatCardModule} from '@angular/material-experimental/mdc-card';
 import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
 import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
 import {MatInputModule} from '@angular/material-experimental/mdc-input';
+import {MatListModule} from '@angular/material-experimental/mdc-list';
 import {MatProgressBarModule} from '@angular/material-experimental/mdc-progress-bar';
 import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
 import {MatMenuModule} from '@angular/material-experimental/mdc-menu';
@@ -42,6 +43,7 @@ export class KitchenSinkMdc {
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
+    MatListModule,
     MatMenuModule,
     MatRadioModule,
     MatSlideToggleModule,

src/universal-app/kitchen-sink/kitchen-sink.html

@@ -144,6 +144,11 @@ <h2>List</h2>
   <a mat-list-item href="https://google.com">Seek</a>
 </mat-nav-list>
 
+<mat-action-list>
+  <button mat-list-item>First action</button>
+  <button mat-list-item>Second action</button>
+  <button mat-list-item>Third action</button>
+</mat-action-list>
 
 <h2>Menu</h2>