fix(material/paginator): add aria-hidden="true" to decorative svg's (#…

…27083)

For the mat-paginator component, add aria-hidden="true" to the
decorative svg elements.

Previously, the svg elements for the chevron icons would produce an img
node in the a11y tree nested under the button node for "Previous
page"/"Next page". This seemed to cause issue with JAWS screenreader
where screen reader navigation would have duplicate navigation (#26967).

With this change applied, the svg elements are aria-hidden and do not
affect the accessibility tree. This is appripriate since the chevron
icons are purely decorative.

Fix #26967

(cherry picked from commit a3250c3)

src/material/paginator/paginator.html

@@ -43,7 +43,10 @@
               [matTooltipPosition]="'above'"
               [disabled]="_previousButtonsDisabled()"
               *ngIf="showFirstLastButtons">
-        <svg class="mat-mdc-paginator-icon" viewBox="0 0 24 24" focusable="false">
+        <svg class="mat-mdc-paginator-icon"
+             viewBox="0 0 24 24"
+             focusable="false"
+             aria-hidden="true">
           <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/>
         </svg>
       </button>
@@ -55,7 +58,10 @@
               [matTooltipDisabled]="_previousButtonsDisabled()"
               [matTooltipPosition]="'above'"
               [disabled]="_previousButtonsDisabled()">
-        <svg class="mat-mdc-paginator-icon" viewBox="0 0 24 24" focusable="false">
+        <svg class="mat-mdc-paginator-icon"
+             viewBox="0 0 24 24"
+             focusable="false"
+             aria-hidden="true">
           <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
         </svg>
       </button>
@@ -67,7 +73,10 @@
               [matTooltipDisabled]="_nextButtonsDisabled()"
               [matTooltipPosition]="'above'"
               [disabled]="_nextButtonsDisabled()">
-        <svg class="mat-mdc-paginator-icon" viewBox="0 0 24 24" focusable="false">
+        <svg class="mat-mdc-paginator-icon"
+             viewBox="0 0 24 24"
+             focusable="false"
+             aria-hidden="true">
           <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
         </svg>
       </button>
@@ -80,7 +89,10 @@
               [matTooltipPosition]="'above'"
               [disabled]="_nextButtonsDisabled()"
               *ngIf="showFirstLastButtons">
-        <svg class="mat-mdc-paginator-icon" viewBox="0 0 24 24" focusable="false">
+        <svg class="mat-mdc-paginator-icon"
+             viewBox="0 0 24 24"
+             focusable="false"
+             aria-hidden="true">
           <path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/>
         </svg>
       </button>