fix(material/checkbox): hide svg from assistive technology (#23340)

Fixes that the `svg` node inside of the checkbox might be read out by some screen readers.

Fixes #23338.

(cherry picked from commit 8bd8f75)

Author: crisbeto

src/material-experimental/mdc-checkbox/checkbox.html

@@ -24,7 +24,8 @@
     <div class="mdc-checkbox__background">
       <svg class="mdc-checkbox__checkmark"
            focusable="false"
-           viewBox="0 0 24 24">
+           viewBox="0 0 24 24"
+           aria-hidden="true">
         <path class="mdc-checkbox__checkmark-path"
               fill="none"
               d="M1.73,12.91 8.1,19.28 22.79,4.59"/>

src/material-experimental/mdc-checkbox/checkbox.spec.ts

@@ -75,6 +75,11 @@ describe('MDC-based MatCheckbox', () => {
       expect(checkboxInstance.ripple).toBeTruthy();
     });
 
+    it('should hide the internal SVG', () => {
+      const svg = checkboxNativeElement.querySelector('svg')!;
+      expect(svg.getAttribute('aria-hidden')).toBe('true');
+    });
+
     it('should toggle checkbox ripple disabledness correctly', fakeAsync(() => {
       const rippleSelector = '.mat-ripple-element:not(.mat-checkbox-persistent-ripple)';
 

src/material-experimental/mdc-list/list-option.html

@@ -14,7 +14,8 @@
            [checked]="selected" [disabled]="disabled"/>
     <div class="mdc-checkbox__background">
       <svg class="mdc-checkbox__checkmark"
-           viewBox="0 0 24 24">
+           viewBox="0 0 24 24"
+           aria-hidden="true">
         <path class="mdc-checkbox__checkmark-path"
               fill="none"
               d="M1.73,12.91 8.1,19.28 22.79,4.59"/>

src/material-experimental/mdc-list/selection-list.spec.ts

@@ -570,6 +570,13 @@ describe('MDC-based MatSelectionList without forms', () => {
         .every(element => element.querySelector('.mat-mdc-focus-indicator') !== null)).toBe(true);
     });
 
+    it('should hide the internal SVG', () => {
+      listOptions.forEach(option => {
+        const svg = option.nativeElement.querySelector('.mdc-checkbox svg');
+        expect(svg.getAttribute('aria-hidden')).toBe('true');
+      });
+    });
+
   });
 
   describe('with list option selected', () => {

src/material/checkbox/checkbox.html

@@ -30,7 +30,8 @@
            focusable="false"
            class="mat-checkbox-checkmark"
            viewBox="0 0 24 24"
-           xml:space="preserve">
+           xml:space="preserve"
+           aria-hidden="true">
         <path class="mat-checkbox-checkmark-path"
               fill="none"
               stroke="white"

src/material/checkbox/checkbox.spec.ts

@@ -76,6 +76,11 @@ describe('MatCheckbox', () => {
       expect(checkboxInstance.ripple).toBeTruthy();
     });
 
+    it('should hide the internal SVG', () => {
+      const svg = checkboxNativeElement.querySelector('svg')!;
+      expect(svg.getAttribute('aria-hidden')).toBe('true');
+    });
+
     it('should add and remove indeterminate state', () => {
       expect(checkboxNativeElement.classList).not.toContain('mat-checkbox-checked');
       expect(inputElement.checked).toBe(false);