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.
angular · Aug 18, 2021 · 8bd8f75 · 8bd8f75
1 parent 2789d8e
commit 8bd8f75
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);