From 0e790d468c54a5b2b6fc67641c9993f6bcdcd89c Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Wed, 11 Aug 2021 22:25:21 +0200
Subject: [PATCH] fix(material/checkbox): hide svg from assistive technology

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

Fixes #23338.
---
 src/material-experimental/mdc-checkbox/checkbox.html      | 3 ++-
 src/material-experimental/mdc-checkbox/checkbox.spec.ts   | 5 +++++
 src/material-experimental/mdc-list/list-option.html       | 3 ++-
 src/material-experimental/mdc-list/selection-list.spec.ts | 7 +++++++
 src/material/checkbox/checkbox.html                       | 3 ++-
 src/material/checkbox/checkbox.spec.ts                    | 5 +++++
 6 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/material-experimental/mdc-checkbox/checkbox.html b/src/material-experimental/mdc-checkbox/checkbox.html
index a19e937c6e24..ccacf992be23 100644
--- a/src/material-experimental/mdc-checkbox/checkbox.html
+++ b/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"/>
diff --git a/src/material-experimental/mdc-checkbox/checkbox.spec.ts b/src/material-experimental/mdc-checkbox/checkbox.spec.ts
index 734e3961a693..7ee4ef2c39d8 100644
--- a/src/material-experimental/mdc-checkbox/checkbox.spec.ts
+++ b/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)';
 
diff --git a/src/material-experimental/mdc-list/list-option.html b/src/material-experimental/mdc-list/list-option.html
index 41ab9651188e..ff43a83e6692 100644
--- a/src/material-experimental/mdc-list/list-option.html
+++ b/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"/>
diff --git a/src/material-experimental/mdc-list/selection-list.spec.ts b/src/material-experimental/mdc-list/selection-list.spec.ts
index 012eec771f90..3a75bc2aec19 100644
--- a/src/material-experimental/mdc-list/selection-list.spec.ts
+++ b/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', () => {
diff --git a/src/material/checkbox/checkbox.html b/src/material/checkbox/checkbox.html
index 886fe28c45fe..1e46a03ef823 100644
--- a/src/material/checkbox/checkbox.html
+++ b/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"
diff --git a/src/material/checkbox/checkbox.spec.ts b/src/material/checkbox/checkbox.spec.ts
index a9252ec9772d..72fb7b27a2ac 100644
--- a/src/material/checkbox/checkbox.spec.ts
+++ b/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);