From dd1bfad62eb002c74442f7abffc0ed43fd703554 Mon Sep 17 00:00:00 2001
From: Zach Arend <zarend@users.noreply.github.com>
Date: Wed, 10 Aug 2022 14:23:49 -0700
Subject: [PATCH] fix(material-experimental/mdc-list): set a role on MatNavList
 and MatActionList (#25412)

make the following changes to align with legacy version of list
 - `MatNavList` apply `role="navigation"`
 - `MatActionList` apply `role="group"`
---
 .../mdc-list/action-list.ts                   |  1 +
 .../mdc-list/list.spec.ts                     | 22 ++++++++++++++++++-
 .../mdc-list/nav-list.ts                      |  1 +
 src/material/list/list.spec.ts                | 22 ++++++++++++++++++-
 src/material/list/list.ts                     |  1 +
 5 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/material-experimental/mdc-list/action-list.ts b/src/material-experimental/mdc-list/action-list.ts
index 8683cd4bb786..1af6fd86e7f2 100644
--- a/src/material-experimental/mdc-list/action-list.ts
+++ b/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,
diff --git a/src/material-experimental/mdc-list/list.spec.ts b/src/material-experimental/mdc-list/list.spec.ts
index ab62c7784a6b..61b5e5509cf9 100644
--- a/src/material-experimental/mdc-list/list.spec.ts
+++ b/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();
diff --git a/src/material-experimental/mdc-list/nav-list.ts b/src/material-experimental/mdc-list/nav-list.ts
index 3e357469285f..cbbfca60bda6 100644
--- a/src/material-experimental/mdc-list/nav-list.ts
+++ b/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,
diff --git a/src/material/list/list.spec.ts b/src/material/list/list.spec.ts
index 58cc88f5dc53..3213631ed2fd 100644
--- a/src/material/list/list.spec.ts
+++ b/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();
diff --git a/src/material/list/list.ts b/src/material/list/list.ts
index 962b77594547..2973fb06bbcf 100644
--- a/src/material/list/list.ts
+++ b/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');
     }
   }