Skip to content

Commit e27dc70

Browse files
committed
fixup! feat(material-experimental/mdc-list): implement selection list
Address feedback
1 parent 3a0e6fa commit e27dc70

File tree

9 files changed

+52
-14
lines changed

9 files changed

+52
-14
lines changed

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,10 @@ import {MatListBase} from './list-base';
2424
]
2525
})
2626
export class MatActionList extends MatListBase {
27-
// An action list is considered interactive, but does not extend the interactive
28-
// list base class. We do this because as per MDC, items of interactive lists are
29-
// only reachable through keyboard shortcuts. We want all items for the action list
30-
// to be reachable through tab key though. This ensures best accessibility.
27+
// An navigation list is considered interactive, but does not extend the interactive list
28+
// base class. We do this because as per MDC, items of interactive lists are only reachable
29+
// through keyboard shortcuts. We want all items for the navigation list to be reachable
30+
// through tab key as we do not intend to provide any special accessibility treatment. The
31+
// accessibility treatment depends on how the end-user will interact with it.
3132
_isNonInteractive = false;
3233
}

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,12 @@ export abstract class MatInteractiveListBase<T extends MatListItemBase>
138138
*/
139139
protected _resetTabindexToFirstSelectedOrFocusedItem() {
140140
this._clearTabindexForAllItems();
141-
(this._foundation as any)['setTabindexToFirstSelectedOrFocusedItem']();
141+
// MDC does not expose the method for setting the tabindex to the first selected
142+
// or previously focused item. We can still access the method as private class
143+
// members are accessible in the transpiled JavaScript. Tracked upstream with:
144+
// TODO: https://github.com/material-components/material-components-web/issues/6375
145+
// @ts-expect-error
146+
this._foundation.setTabindexToFirstSelectedOrFocusedItem();
142147
}
143148

144149
_elementAtIndex(index: number): HTMLElement|undefined {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
8080
// indicator support in such scenarios.
8181
this._elementRef.nativeElement.classList.add('mat-mdc-focus-indicator');
8282

83-
// If no type attributed is specified for a host `<button>` element, set it to
83+
// If no type attribute is specified for a host `<button>` element, set it to
8484
// "button". If a type attribute is already specified, do nothing. We do this
8585
// for backwards compatibility with the old list.
8686
// TODO: Determine if we intend to continue doing this for the MDC-based list.

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,7 @@
1414
no accidental change event leaks out of the list option or selection list when
1515
the checkbox is directly clicked.
1616
-->
17-
<input type="checkbox" tabindex="-1" class="mdc-checkbox__native-control"
18-
[checked]="selected" [disabled]="disabled" [attr.aria-describedby]="_optionTextId"
19-
(change)="$event.stopPropagation()" />
17+
2018
<div class="mdc-checkbox__background">
2119
<svg class="mdc-checkbox__checkmark"
2220
viewBox="0 0 24 24">

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,10 @@ import {MatListBase} from './list-base';
2424
]
2525
})
2626
export class MatNavList extends MatListBase {
27-
// An navigation list is considered interactive, but does not extend the interactive
28-
// list base class. We do this because as per MDC, items of interactive lists are
29-
// only reachable through keyboard shortcuts. We want all items for the navigation list
30-
// to be reachable through tab key though. This ensures best accessibility.
27+
// An navigation list is considered interactive, but does not extend the interactive list
28+
// base class. We do this because as per MDC, items of interactive lists are only reachable
29+
// through keyboard shortcuts. We want all items for the navigation list to be reachable
30+
// through tab key as we do not intend to provide any special accessibility treatment. The
31+
// accessibility treatment depends on how the end-user will interact with it.
3132
_isNonInteractive = false;
3233
}

src/material/list/list.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn
211211
this._isInteractiveList = !!(navList || (list && list._getListType() === 'action-list'));
212212
this._list = navList || list;
213213

214-
// If no type attributed is specified for <button>, set it to "button".
214+
// If no type attribute is specified for <button>, set it to "button".
215215
// If a type attribute is already specified, do nothing.
216216
const element = this._getHostElement();
217217

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,3 +201,29 @@ <h2>MDC Progress spinner</h2>
201201
<mat-spinner></mat-spinner>
202202
<mat-progress-spinner mode="indeterminate" [diameter]="37"></mat-progress-spinner>
203203
<mat-spinner [strokeWidth]="4"></mat-spinner>
204+
205+
<h2>List</h2>
206+
<mat-list>
207+
<mat-list-item>Robot</mat-list-item>
208+
<mat-list-item>Android</mat-list-item>
209+
<mat-list-item>Cyborg</mat-list-item>
210+
</mat-list>
211+
212+
<mat-nav-list>
213+
<a mat-list-item href="https://google.com">Search</a>
214+
<a mat-list-item href="https://google.com">Find</a>
215+
<a mat-list-item href="https://google.com">Seek</a>
216+
</mat-nav-list>
217+
218+
<mat-action-list>
219+
<button mat-list-item>First action</button>
220+
<button mat-list-item>Second action</button>
221+
<button mat-list-item>Third action</button>
222+
</mat-action-list>
223+
224+
<mat-selection-list>
225+
<h3 mat-subheader>Groceries</h3>
226+
<mat-list-option value="apples">Apples</mat-list-option>
227+
<mat-list-option value="bananas">Bananas</mat-list-option>
228+
<mat-list-option value="oranges">Oranges</mat-list-option>
229+
</mat-selection-list>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {MatCardModule} from '@angular/material-experimental/mdc-card';
44
import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
55
import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
66
import {MatInputModule} from '@angular/material-experimental/mdc-input';
7+
import {MatListModule} from '@angular/material-experimental/mdc-list';
78
import {MatProgressBarModule} from '@angular/material-experimental/mdc-progress-bar';
89
import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
910
import {MatMenuModule} from '@angular/material-experimental/mdc-menu';
@@ -42,6 +43,7 @@ export class KitchenSinkMdc {
4243
MatFormFieldModule,
4344
MatIconModule,
4445
MatInputModule,
46+
MatListModule,
4547
MatMenuModule,
4648
MatRadioModule,
4749
MatSlideToggleModule,

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,11 @@ <h2>List</h2>
144144
<a mat-list-item href="https://google.com">Seek</a>
145145
</mat-nav-list>
146146

147+
<mat-action-list>
148+
<button mat-list-item>First action</button>
149+
<button mat-list-item>Second action</button>
150+
<button mat-list-item>Third action</button>
151+
</mat-action-list>
147152

148153
<h2>Menu</h2>
149154

0 commit comments

Comments
 (0)