From d3a1e35b907b4158713cfce8bc935f9b0ee469cd Mon Sep 17 00:00:00 2001
From: jeripeierSBB <jeremias.peier@sbb.ch>
Date: Thu, 1 Jul 2021 13:42:35 +0200
Subject: [PATCH] docs(material/paginator): add aria-label to `<mat-paginator>`
 usages

Under the Accessibility section of the mat-paginator it's written that
a `<mat-paginator>` must have an aria-label.
But actually none of the found examples does provide an aria-label.

https://github.com/angular/components/blob/master/src/material/paginator/paginator.md#accessibility
---
 .../paginator-configurable-example.html                      | 3 ++-
 .../paginator-harness/paginator-harness-example.html         | 3 ++-
 .../paginator/paginator-intl/paginator-intl-example.html     | 2 +-
 .../paginator-overview/paginator-overview-example.html       | 3 ++-
 .../material/table/table-http/table-http-example.html        | 2 +-
 .../table/table-overview/table-overview-example.html         | 3 +--
 .../table/table-pagination/table-pagination-example.html     | 5 ++++-
 src/dev-app/mdc-paginator/mdc-paginator-demo.html            | 5 +++--
 src/dev-app/paginator/paginator-demo.html                    | 5 +++--
 .../__name@dasherize__.component.html.template               | 3 ++-
 src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html     | 3 ++-
 src/universal-app/kitchen-sink/kitchen-sink.html             | 3 ++-
 12 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.html b/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.html
index 6f9dd548b651..e6ce26b5d8be 100644
--- a/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.html
+++ b/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.html
@@ -16,7 +16,8 @@
 <mat-paginator [length]="length"
                [pageSize]="pageSize"
                [pageSizeOptions]="pageSizeOptions"
-               (page)="pageEvent = $event">
+               (page)="pageEvent = $event"
+               aria-label="Select page">
 </mat-paginator>
 
 <div *ngIf="pageEvent">
diff --git a/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.html b/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.html
index 2fd36c446b8b..0dcd46611ddd 100644
--- a/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.html
+++ b/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.html
@@ -4,5 +4,6 @@
     [pageSize]="pageSize"
     [showFirstLastButtons]="showFirstLastButtons"
     [pageSizeOptions]="pageSizeOptions"
-    [pageIndex]="pageIndex">
+    [pageIndex]="pageIndex"
+    aria-label="Select page">
 </mat-paginator>
diff --git a/src/components-examples/material/paginator/paginator-intl/paginator-intl-example.html b/src/components-examples/material/paginator/paginator-intl/paginator-intl-example.html
index 26953dc8dc39..4477a429b11a 100644
--- a/src/components-examples/material/paginator/paginator-intl/paginator-intl-example.html
+++ b/src/components-examples/material/paginator/paginator-intl/paginator-intl-example.html
@@ -1,2 +1,2 @@
-<mat-paginator [length]="200" [pageSizeOptions]="[10, 50, 100]">
+<mat-paginator [length]="200" [pageSizeOptions]="[10, 50, 100]" aria-label="Select page">
 </mat-paginator>
diff --git a/src/components-examples/material/paginator/paginator-overview/paginator-overview-example.html b/src/components-examples/material/paginator/paginator-overview/paginator-overview-example.html
index 9269f3b47380..b39a88289bee 100644
--- a/src/components-examples/material/paginator/paginator-overview/paginator-overview-example.html
+++ b/src/components-examples/material/paginator/paginator-overview/paginator-overview-example.html
@@ -1,4 +1,5 @@
 <mat-paginator [length]="100"
               [pageSize]="10"
-              [pageSizeOptions]="[5, 10, 25, 100]">
+              [pageSizeOptions]="[5, 10, 25, 100]"
+              aria-label="Select page">
 </mat-paginator>
diff --git a/src/components-examples/material/table/table-http/table-http-example.html b/src/components-examples/material/table/table-http/table-http-example.html
index 9c88d204de87..355ae60b0ff2 100644
--- a/src/components-examples/material/table/table-http/table-http-example.html
+++ b/src/components-examples/material/table/table-http/table-http-example.html
@@ -42,5 +42,5 @@
     </table>
   </div>
 
-  <mat-paginator [length]="resultsLength" [pageSize]="30"></mat-paginator>
+  <mat-paginator [length]="resultsLength" [pageSize]="30" aria-label="Select page of GitHub search results"></mat-paginator>
 </div>
diff --git a/src/components-examples/material/table/table-overview/table-overview-example.html b/src/components-examples/material/table/table-overview/table-overview-example.html
index 601acbfe9675..880c07608504 100644
--- a/src/components-examples/material/table/table-overview/table-overview-example.html
+++ b/src/components-examples/material/table/table-overview/table-overview-example.html
@@ -39,6 +39,5 @@
     </tr>
   </table>
 
-  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
 </div>
-
diff --git a/src/components-examples/material/table/table-pagination/table-pagination-example.html b/src/components-examples/material/table/table-pagination/table-pagination-example.html
index a410ebbe9d05..c7c5e005baa5 100644
--- a/src/components-examples/material/table/table-pagination/table-pagination-example.html
+++ b/src/components-examples/material/table/table-pagination/table-pagination-example.html
@@ -29,5 +29,8 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 
-  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+  <mat-paginator [pageSizeOptions]="[5, 10, 20]"
+                 showFirstLastButtons 
+                 aria-label="Select page of periodic elements">
+  </mat-paginator>
 </div>
diff --git a/src/dev-app/mdc-paginator/mdc-paginator-demo.html b/src/dev-app/mdc-paginator/mdc-paginator-demo.html
index 30b7abf00ff5..4859ac850b90 100644
--- a/src/dev-app/mdc-paginator/mdc-paginator-demo.html
+++ b/src/dev-app/mdc-paginator/mdc-paginator-demo.html
@@ -1,6 +1,6 @@
 <mat-card class="demo-section">
   <h2>No inputs</h2>
-  <mat-paginator></mat-paginator>
+  <mat-paginator aria-label="Select page"></mat-paginator>
 </mat-card>
 
 <mat-card class="demo-section">
@@ -34,7 +34,8 @@ <h2>No inputs</h2>
                  [showFirstLastButtons]="showFirstLastButtons"
                  [pageSizeOptions]="showPageSizeOptions ? pageSizeOptions : []"
                  [hidePageSize]="hidePageSize"
-                 [pageIndex]="pageIndex">
+                 [pageIndex]="pageIndex"
+                 aria-label="Select page">
   </mat-paginator>
 
   <div> Output event: {{pageEvent | json}} </div>
diff --git a/src/dev-app/paginator/paginator-demo.html b/src/dev-app/paginator/paginator-demo.html
index af3c21879c14..77bb73ea92b0 100644
--- a/src/dev-app/paginator/paginator-demo.html
+++ b/src/dev-app/paginator/paginator-demo.html
@@ -1,6 +1,6 @@
 <mat-card class="demo-section">
   <h2>No inputs</h2>
-  <mat-paginator></mat-paginator>
+  <mat-paginator aria-label="Select page"></mat-paginator>
 </mat-card>
 
 <mat-card class="demo-section">
@@ -31,7 +31,8 @@ <h2>No inputs</h2>
                  [showFirstLastButtons]="showFirstLastButtons"
                  [pageSizeOptions]="showPageSizeOptions ? pageSizeOptions : []"
                  [hidePageSize]="hidePageSize"
-                 [pageIndex]="pageIndex">
+                 [pageIndex]="pageIndex"
+                 aria-label="Select page">
   </mat-paginator>
 
   <div> Output event: {{pageEvent | json}} </div>
diff --git a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template
index fde2d6bf4a85..de4cced69ff8 100644
--- a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template
+++ b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template
@@ -20,6 +20,7 @@
       [length]="dataSource?.data?.length"
       [pageIndex]="0"
       [pageSize]="10"
-      [pageSizeOptions]="[5, 10, 20]">
+      [pageSizeOptions]="[5, 10, 20]"
+      aria-label="Select page">
   </mat-paginator>
 </div>
diff --git a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html
index 3f11c0dff602..2bcddf329968 100644
--- a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html
+++ b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html
@@ -141,7 +141,8 @@ <h2>MDC Tabs</h2>
 <h2>MDC Paginator</h2>
 
 <mat-paginator [length]="100"
-               [pageSizeOptions]="[5, 10, 25, 100]">
+               [pageSizeOptions]="[5, 10, 25, 100]"
+               aria-label="Select page">
 </mat-paginator>
 
 <h2>MDC Table</h2>
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html
index 85121131f582..ca0409dc9747 100644
--- a/src/universal-app/kitchen-sink/kitchen-sink.html
+++ b/src/universal-app/kitchen-sink/kitchen-sink.html
@@ -236,7 +236,8 @@ <h2>Tabs</h2>
 <h2>Paginator</h2>
 
 <mat-paginator [length]="100"
-              [pageSizeOptions]="[5, 10, 25, 100]">
+               [pageSizeOptions]="[5, 10, 25, 100]"
+               aria-label="Select page">
 </mat-paginator>
 
 <h2>Toolbar</h2>