+
{{_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) {