fix(multiple): set aria-hidden on presentational svgs (#27116)

Adds `aria-hidden` on all SVG nodes that didn't have them already to prevent them from being treated as images. Fixes #27113. (cherry picked from commit b637301)
angular · May 19, 2023 · 12474aa · 12474aa
1 parent d7b8cce
commit 12474aa
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 12 deletions.
diff --git a/src/material/chips/chip-option.html b/src/material/chips/chip-option.html
@@ -16,7 +16,11 @@
     <span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic" *ngIf="_hasLeadingGraphic()">
       <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
       <span class="mdc-evolution-chip__checkmark">
-        <svg class="mdc-evolution-chip__checkmark-svg" viewBox="-2 -3 30 30" focusable="false">
+        <svg
+          class="mdc-evolution-chip__checkmark-svg"
+          viewBox="-2 -3 30 30"
+          focusable="false"
+          aria-hidden="true">
           <path class="mdc-evolution-chip__checkmark-path"
                 fill="none" stroke="currentColor" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
         </svg>
@@ -35,4 +39,4 @@
   <ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
 </span>
 
-<span class="cdk-visually-hidden" [id]="_ariaDescriptionId">{{ariaDescription}}</span>
+<span class="cdk-visually-hidden" [id]="_ariaDescriptionId">{{ariaDescription}}</span>
diff --git a/src/material/datepicker/datepicker-toggle.html b/src/material/datepicker/datepicker-toggle.html
@@ -15,7 +15,8 @@
     width="24px"
     height="24px"
     fill="currentColor"
-    focusable="false">
+    focusable="false"
+    aria-hidden="true">
     <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
   </svg>
 

diff --git a/src/material/legacy-menu/menu-item.html b/src/material/legacy-menu/menu-item.html
@@ -8,4 +8,5 @@
   *ngIf="_triggersSubmenu"
   class="mat-menu-submenu-icon"
   viewBox="0 0 5 10"
-  focusable="false"><polygon points="0,0 5,5 0,10"/></svg>
+  focusable="false"
+  aria-hidden="true"><polygon points="0,0 5,5 0,10"/></svg>
diff --git a/src/material/legacy-paginator/paginator.html b/src/material/legacy-paginator/paginator.html
@@ -42,7 +42,7 @@
               [matTooltipPosition]="'above'"
               [disabled]="_previousButtonsDisabled()"
               *ngIf="showFirstLastButtons">
-        <svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
+        <svg class="mat-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>
@@ -54,7 +54,7 @@
               [matTooltipDisabled]="_previousButtonsDisabled()"
               [matTooltipPosition]="'above'"
               [disabled]="_previousButtonsDisabled()">
-        <svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
+        <svg class="mat-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>
@@ -66,7 +66,7 @@
               [matTooltipDisabled]="_nextButtonsDisabled()"
               [matTooltipPosition]="'above'"
               [disabled]="_nextButtonsDisabled()">
-        <svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
+        <svg class="mat-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>
@@ -79,7 +79,7 @@
               [matTooltipPosition]="'above'"
               [disabled]="_nextButtonsDisabled()"
               *ngIf="showFirstLastButtons">
-        <svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
+        <svg class="mat-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>

diff --git a/src/material/menu/menu-item.html b/src/material/menu/menu-item.html
@@ -8,4 +8,5 @@
   *ngIf="_triggersSubmenu"
   class="mat-mdc-menu-submenu-icon"
   viewBox="0 0 5 10"
-  focusable="false"><polygon points="0,0 5,5 0,10"/></svg>
+  focusable="false"
+  aria-hidden="true"><polygon points="0,0 5,5 0,10"/></svg>
diff --git a/src/material/select/select.html b/src/material/select/select.html
@@ -24,7 +24,7 @@
   <div class="mat-mdc-select-arrow-wrapper">
     <div class="mat-mdc-select-arrow">
       <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode. -->
-      <svg viewBox="0 0 24 24" width="24px" height="24px" focusable="false">
+      <svg viewBox="0 0 24 24" width="24px" height="24px" focusable="false" aria-hidden="true">
         <path d="M7 10l5 5 5-5z"/>
       </svg>
     </div>

diff --git a/src/material/slide-toggle/slide-toggle.html b/src/material/slide-toggle/slide-toggle.html
@@ -32,10 +32,16 @@
             [matRippleCentered]="true"></div>
         </div>
         <div class="mdc-switch__icons">
-          <svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">
+          <svg
+            class="mdc-switch__icon mdc-switch__icon--on"
+            viewBox="0 0 24 24"
+            aria-hidden="true">
             <path d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" />
           </svg>
-          <svg class="mdc-switch__icon mdc-switch__icon--off" viewBox="0 0 24 24">
+          <svg
+            class="mdc-switch__icon mdc-switch__icon--off"
+            viewBox="0 0 24 24"
+            aria-hidden="true">
             <path d="M20 13H4v-2h16v2z" />
           </svg>
         </div>