diff --git a/src/material-experimental/mdc-paginator/paginator.spec.ts b/src/material-experimental/mdc-paginator/paginator.spec.ts index abc980a1412b..514430fea8a5 100644 --- a/src/material-experimental/mdc-paginator/paginator.spec.ts +++ b/src/material-experimental/mdc-paginator/paginator.spec.ts @@ -467,6 +467,12 @@ describe('MDC-based MatPaginator', () => { expect(paginator.showFirstLastButtons).toBe(true); }); + it('should set `role="group"` on the host element', () => { + const fixture = createComponent(MatPaginatorApp); + const hostElement = fixture.nativeElement.querySelector('mat-paginator'); + expect(hostElement.getAttribute('role')).toBe('group'); + }); + }); function getPreviousButton(fixture: ComponentFixture) { diff --git a/src/material-experimental/mdc-paginator/paginator.ts b/src/material-experimental/mdc-paginator/paginator.ts index 355415c16ef8..d511f84aa58e 100644 --- a/src/material-experimental/mdc-paginator/paginator.ts +++ b/src/material-experimental/mdc-paginator/paginator.ts @@ -57,6 +57,7 @@ export const MAT_PAGINATOR_DEFAULT_OPTIONS = inputs: ['disabled'], host: { 'class': 'mat-mdc-paginator', + 'role': 'group', }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, diff --git a/src/material/paginator/paginator.md b/src/material/paginator/paginator.md index 4359b57dc7a1..e824c26d1679 100644 --- a/src/material/paginator/paginator.md +++ b/src/material/paginator/paginator.md @@ -26,4 +26,9 @@ This will allow you to change the following: 3. The tooltip messages on the navigation buttons. ### Accessibility -The `aria-label`s for next page, previous page, first page and last page buttons can be set in `MatPaginatorIntl`. +The paginator uses `role="group"` to semantically group its child controls. You must add an +`aria-label` or `aria-labelledby` attribute to `` with a label that describes +the content controlled by the pagination control. + +You can set the `aria-label` attributes for the button and select controls within the paginator in +`MatPaginatorIntl`. diff --git a/src/material/paginator/paginator.spec.ts b/src/material/paginator/paginator.spec.ts index e2aedc2e01c4..01caf29d59d0 100644 --- a/src/material/paginator/paginator.spec.ts +++ b/src/material/paginator/paginator.spec.ts @@ -467,6 +467,12 @@ describe('MatPaginator', () => { expect(paginator.showFirstLastButtons).toBe(true); }); + it('should set `role="group"` on the host element', () => { + const fixture = createComponent(MatPaginatorApp); + const hostElement = fixture.nativeElement.querySelector('mat-paginator'); + expect(hostElement.getAttribute('role')).toBe('group'); + }); + }); function getPreviousButton(fixture: ComponentFixture) { diff --git a/src/material/paginator/paginator.ts b/src/material/paginator/paginator.ts index 1dbab2c2a19f..8f59be8e2e1a 100644 --- a/src/material/paginator/paginator.ts +++ b/src/material/paginator/paginator.ts @@ -357,6 +357,7 @@ export abstract class _MatPaginatorBase