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: '',
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: '',
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');
}
}