From f223301f40d11f7576348b2744c9348566e0b4eb Mon Sep 17 00:00:00 2001
From: Zach Arend <zachzach@google.com>
Date: Wed, 14 Jul 2021 15:45:32 -0700
Subject: [PATCH] fix(material-experimental/mdc-paginator): target page size
 label with `aria-labelledby`

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.
---
 src/material-experimental/mdc-paginator/paginator.html   | 4 ++--
 .../mdc-paginator/paginator.spec.ts                      | 9 +++++++--
 src/material-experimental/mdc-paginator/paginator.ts     | 6 ++++++
 3 files changed, 15 insertions(+), 4 deletions(-)

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 @@
 <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}}
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<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) {