diff --git a/src/material-experimental/mdc-paginator/paginator.html b/src/material-experimental/mdc-paginator/paginator.html index 37cb9e21bc68..183322046caa 100644 --- a/src/material-experimental/mdc-paginator/paginator.html +++ b/src/material-experimental/mdc-paginator/paginator.html @@ -1,7 +1,7 @@
-
+
{{_intl.itemsPerPageLabel}}
@@ -13,7 +13,7 @@ {{pageSizeOption}} diff --git a/src/material-experimental/mdc-paginator/paginator.spec.ts b/src/material-experimental/mdc-paginator/paginator.spec.ts index 514430fea8a5..42d85edc87f4 100644 --- a/src/material-experimental/mdc-paginator/paginator.spec.ts +++ b/src/material-experimental/mdc-paginator/paginator.spec.ts @@ -73,11 +73,16 @@ describe('MDC-based MatPaginator', () => { it('should show right aria-labels for select and buttons', () => { const fixture = createComponent(MatPaginatorApp); - const select = fixture.nativeElement.querySelector('.mat-mdc-select'); - expect(select.getAttribute('aria-label')).toBe('Items per page:'); expect(getPreviousButton(fixture).getAttribute('aria-label')).toBe('Previous page'); expect(getNextButton(fixture).getAttribute('aria-label')).toBe('Next page'); + + const select = fixture.nativeElement.querySelector('.mat-mdc-select'); + const selectLabelIds = select.getAttribute('aria-labelledby')?.split(/\s/g) as string[]; + const selectLabelTexts = selectLabelIds?.map(labelId => { + return fixture.nativeElement.querySelector(`#${labelId}`)?.textContent?.trim(); + }); + expect(selectLabelTexts).toContain('Items per page:'); }); it('should re-render when the i18n labels change', () => { diff --git a/src/material-experimental/mdc-paginator/paginator.ts b/src/material-experimental/mdc-paginator/paginator.ts index d511f84aa58e..87c09bda1d58 100644 --- a/src/material-experimental/mdc-paginator/paginator.ts +++ b/src/material-experimental/mdc-paginator/paginator.ts @@ -44,6 +44,8 @@ export interface MatPaginatorDefaultOptions { export const MAT_PAGINATOR_DEFAULT_OPTIONS = new InjectionToken('MAT_PAGINATOR_DEFAULT_OPTIONS'); +let nextUniqueId = 0; + /** * Component to provide navigation between paged information. Displays the size of the current * page, user-selectable options to change that size, what items are being shown, and @@ -66,6 +68,10 @@ export class MatPaginator extends _MatPaginatorBase /** If set, styles the "page size" form field with the designated style. */ _formFieldAppearance?: MatFormFieldAppearance; + /** ID for the DOM node containing the pagiators's items per page label. */ + readonly _pageSizeLabelId = `mat-paginator-page-size-label-${nextUniqueId++}`; + + constructor(intl: MatPaginatorIntl, changeDetectorRef: ChangeDetectorRef, @Optional() @Inject(MAT_PAGINATOR_DEFAULT_OPTIONS) defaults?: MatPaginatorDefaultOptions) {