fix(material-experimental/mdc-paginator): target page size label with aria-labelledby (#23172)

Fixes a screenrader bug on the mdc-paginator for the page size combobox
("Items per page: [combo]"). On Firefox, JAWS and NVDA do not read the
value of the combobox, and only read the label. This happens because the
mdc-paginator explicitly sets an `aria-label` on the `mdc-select` for
the page size label. This causes the mdc-select to not apply an
aria-labelledby, which would reference the value of the combobox. This
leaves us with only relying on inner text to read the value of the
combobox and not having an aria-label or labelledby to read it.

This PR corrects that behavior by refering the existing page size label
using `aria-labelledby`, and not setting an `aria-label`. The mdc-select
will append a reference to the value of the combobox to the
aria-lablledby. This gives us a list of ids of both the label and the
value of the combobox. That way we can be sure that all screenreaders
(including Windows screenreaders) will read both the value and label of
the combobox.

Author: zarend

src/material-experimental/mdc-paginator/paginator.html

@@ -1,7 +1,7 @@
 <div class="mat-mdc-paginator-outer-container">
   <div class="mat-mdc-paginator-container">
     <div class="mat-mdc-paginator-page-size" *ngIf="!hidePageSize">
-      <div class="mat-mdc-paginator-page-size-label">
+      <div class="mat-mdc-paginator-page-size-label" id="{{_pageSizeLabelId}}">
         {{_intl.itemsPerPageLabel}}
       </div>
 
@@ -13,7 +13,7 @@
         <mat-select
           [value]="pageSize"
           [disabled]="disabled"
-          [aria-label]="_intl.itemsPerPageLabel"
+          [aria-labelledby]="_pageSizeLabelId"
           (selectionChange)="_changePageSize($event.value)">
           <mat-option *ngFor="let pageSizeOption of _displayedPageSizeOptions" [value]="pageSizeOption">
             {{pageSizeOption}}

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', () => {

src/material-experimental/mdc-paginator/paginator.ts

@@ -44,6 +44,8 @@ export interface MatPaginatorDefaultOptions {
 export const MAT_PAGINATOR_DEFAULT_OPTIONS =
     new InjectionToken<MatPaginatorDefaultOptions>('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<MatPaginatorDefaultOptions>
   /** 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) {