fix(material-experimental/mdc-list): set a role on MatNavList and Mat…

…ActionList (#25412)

make the following changes to align with legacy version of list
 - `MatNavList` apply `role="navigation"`
 - `MatActionList` apply `role="group"`

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

@@ -15,6 +15,7 @@ import {MatListBase} from './list-base';
   template: '<ng-content></ng-content>',
   host: {
     'class': 'mat-mdc-action-list mat-mdc-list-base mdc-list',
+    'role': 'group',
   },
   styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None,

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

@@ -99,7 +99,7 @@ describe('MDC-based MatList', () => {
     expect(listItem.nativeElement.className).toContain('mdc-list-item--with-three-lines');
   });
 
-  it('should add aria roles properly', () => {
+  it('should not apply aria roles to mat-list', () => {
     const fixture = TestBed.createComponent(ListWithMultipleItems);
     fixture.detectChanges();
 
@@ -113,6 +113,26 @@ describe('MDC-based MatList', () => {
       .toBeNull();
   });
 
+  it('should apply role="navigation" to mat-nav-list', () => {
+    const fixture = TestBed.createComponent(NavListWithOneAnchorItem);
+    fixture.detectChanges();
+
+    const list = fixture.debugElement.children[0];
+    expect(list.nativeElement.getAttribute('role'))
+      .withContext('Expect mat-nav-list to have navigation role')
+      .toBe('navigation');
+  });
+
+  it('should apply role="group" to mat-action-list', () => {
+    const fixture = TestBed.createComponent(ActionListWithoutType);
+    fixture.detectChanges();
+
+    const list = fixture.debugElement.children[0];
+    expect(list.nativeElement.getAttribute('role'))
+      .withContext('Expect mat-action-list to have group role')
+      .toBe('group');
+  });
+
   it('should not show ripples for non-nav lists', fakeAsync(() => {
     const fixture = TestBed.createComponent(ListWithOneAnchorItem);
     fixture.detectChanges();

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

@@ -15,6 +15,7 @@ import {MatListBase} from './list-base';
   template: '<ng-content></ng-content>',
   host: {
     'class': 'mat-mdc-nav-list mat-mdc-list-base mdc-list',
+    'role': 'navigation',
   },
   styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None,

src/material/list/list.spec.ts

@@ -99,7 +99,7 @@ describe('MatList', () => {
     expect(listItem.nativeElement.className).toContain('mat-3-line');
   });
 
-  it('should add aria roles properly', () => {
+  it('should not apply aria roles to mat-list', () => {
     const fixture = TestBed.createComponent(ListWithMultipleItems);
     fixture.detectChanges();
 
@@ -113,6 +113,26 @@ describe('MatList', () => {
       .toBeNull();
   });
 
+  it('should apply role="navigation" to mat-nav-list', () => {
+    const fixture = TestBed.createComponent(NavListWithOneAnchorItem);
+    fixture.detectChanges();
+
+    const list = fixture.debugElement.children[0];
+    expect(list.nativeElement.getAttribute('role'))
+      .withContext('Expect mat-nav-list to have navigation role')
+      .toBe('navigation');
+  });
+
+  it('should apply role="group" to mat-action-list', () => {
+    const fixture = TestBed.createComponent(ActionListWithoutType);
+    fixture.detectChanges();
+
+    const list = fixture.debugElement.children[0];
+    expect(list.nativeElement.getAttribute('role'))
+      .withContext('Expect mat-action-list to have group role')
+      .toBe('group');
+  });
+
   it('should not show ripples for non-nav lists', () => {
     const fixture = TestBed.createComponent(ListWithOneAnchorItem);
     fixture.detectChanges();

src/material/list/list.ts

@@ -113,6 +113,7 @@ export class MatList
 
     if (this._getListType() === 'action-list') {
       _elementRef.nativeElement.classList.add('mat-action-list');
+      _elementRef.nativeElement.setAttribute('role', 'group');
     }
   }