docs(material/paginator): add aria-label to <mat-paginator> usages (#23102)

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
(cherry picked from commit 8482823)

Author: jeripeierSBB

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">

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>

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>

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>

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>

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>
-

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>

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>

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>

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>

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>

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>