fix(material/list): communicate current active page with aria-current (#25681)

For listitems that are anchor tags, communicate the activated state to
screen readers using aria-current. Add aria-current="page" to listitems
that are both activated and anchor tags. Fix a11y issue where the
activated state is not communicated to screen readers.

Author: zarend

src/material/list/list.spec.ts

@@ -19,6 +19,7 @@ describe('MDC-based MatList', () => {
         ListWithMultipleItems,
         ListWithManyLines,
         NavListWithOneAnchorItem,
+        NavListWithActivatedItem,
         ActionListWithoutType,
         ActionListWithType,
         ListWithDisabledItems,
@@ -133,6 +134,21 @@ describe('MDC-based MatList', () => {
       .toBe('group');
   });
 
+  it('should apply aria-current="page" to activated list items', () => {
+    const fixture = TestBed.createComponent(NavListWithActivatedItem);
+    fixture.detectChanges();
+
+    const items = fixture.componentInstance.listItems;
+    expect(items.length)
+      .withContext('expected list to have at least two items')
+      .toBeGreaterThanOrEqual(2);
+    const inactiveItem = items.get(0)!._elementRef.nativeElement;
+    const activeItem = items.get(1)!._elementRef.nativeElement;
+
+    expect(inactiveItem.hasAttribute('aria-current')).toBe(false);
+    expect(activeItem.getAttribute('aria-current')).toBe('page');
+  });
+
   it('should not show ripples for non-nav lists', fakeAsync(() => {
     const fixture = TestBed.createComponent(ListWithOneAnchorItem);
     fixture.detectChanges();
@@ -392,6 +408,24 @@ class NavListWithOneAnchorItem extends BaseTestList {
   disableListRipple: boolean = false;
 }
 
+@Component({
+  template: `
+  <mat-nav-list [disableRipple]="disableListRipple">
+    <a *ngFor="let item of items; let index = index" mat-list-item [disableRipple]="disableItemRipple"
+      [activated]="index === activatedIndex">
+      {{item.name}}
+    </a>
+  </mat-nav-list>`,
+})
+class NavListWithActivatedItem extends BaseTestList {
+  @ViewChildren(MatListItem) listItems: QueryList<MatListItem>;
+  disableItemRipple: boolean = false;
+  disableListRipple: boolean = false;
+
+  /** Index of the activated list item in `this.items`. Set to -1 if no item is selected. */
+  activatedIndex = 1;
+}
+
 @Component({
   template: `
   <mat-action-list [disableRipple]="disableListRipple">

src/material/list/list.ts

@@ -58,6 +58,7 @@ export class MatList extends MatListBase {}
     '[class.mdc-list-item--with-leading-icon]': '_icons.length !== 0',
     '[class.mdc-list-item--with-trailing-meta]': '_meta.length !== 0',
     '[class._mat-animation-noopable]': '_noopAnimations',
+    '[attr.aria-current]': '_getAriaCurrent()',
   },
   templateUrl: 'list-item.html',
   encapsulation: ViewEncapsulation.None,
@@ -90,4 +91,12 @@ export class MatListItem extends MatListItemBase {
   ) {
     super(element, ngZone, listBase, platform, globalRippleOptions, animationMode);
   }
+
+  /**
+   * Determine the value of `aria-current`. Return 'page' if this item is an activated anchor tag.
+   * Otherwise, return `null`. This method is safe to use with server-side rendering.
+   */
+  _getAriaCurrent(): string | null {
+    return this._hostElement.nodeName === 'A' && this._activated ? 'page' : null;
+  }
 }

tools/public_api_guard/material/list.md

@@ -63,6 +63,7 @@ export class MatListItem extends MatListItemBase {
     set activated(activated: boolean);
     // (undocumented)
     _activated: boolean;
+    _getAriaCurrent(): string | null;
     // (undocumented)
     _itemText: ElementRef<HTMLElement>;
     // (undocumented)