fix(material/checkbox): hide decorative elements from assistive technology

Hides the checkbox's decorative elements from screen readers so they don't interfere.

Author: crisbeto

src/material/checkbox/checkbox.html

@@ -1,7 +1,10 @@
 <div mat-internal-form-field [labelPosition]="labelPosition" (click)="_preventBubblingFromLabel($event)">
   <div #checkbox class="mdc-checkbox">
     <!-- Render this element first so the input is on top. -->
-    <div class="mat-mdc-checkbox-touch-target" (click)="_onTouchTargetClick()"></div>
+    <div
+      class="mat-mdc-checkbox-touch-target"
+      (click)="_onTouchTargetClick()"
+      aria-hidden="true"></div>
     <input #input
            type="checkbox"
            class="mdc-checkbox__native-control"
@@ -25,19 +28,20 @@
            (blur)="_onBlur()"
            (click)="_onInputClick()"
            (change)="_onInteractionEvent($event)"/>
-    <div class="mdc-checkbox__ripple"></div>
-    <div class="mdc-checkbox__background">
+    <div class="mdc-checkbox__ripple" aria-hidden="true"></div>
+    <div class="mdc-checkbox__background" aria-hidden="true">
       <svg class="mdc-checkbox__checkmark"
            focusable="false"
-           viewBox="0 0 24 24"
-           aria-hidden="true">
+           viewBox="0 0 24 24">
         <path class="mdc-checkbox__checkmark-path"
               fill="none"
               d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
       </svg>
       <div class="mdc-checkbox__mixedmark"></div>
     </div>
-    <div class="mat-mdc-checkbox-ripple mat-focus-indicator" mat-ripple
+    <div class="mat-mdc-checkbox-ripple mat-focus-indicator"
+      mat-ripple
+      aria-hidden="true"
       [matRippleTrigger]="checkbox"
       [matRippleDisabled]="disableRipple || disabled"
       [matRippleCentered]="true"></div>

src/material/checkbox/checkbox.spec.ts

@@ -58,9 +58,9 @@ describe('MatCheckbox', () => {
       expect(inputElement.checked).toBe(false);
     }));
 
-    it('should hide the internal SVG', () => {
-      const svg = checkboxNativeElement.querySelector('svg')!;
-      expect(svg.getAttribute('aria-hidden')).toBe('true');
+    it('should hide the decorative element', () => {
+      const background = checkboxNativeElement.querySelector('.mdc-checkbox__background')!;
+      expect(background.getAttribute('aria-hidden')).toBe('true');
     });
 
     it('should toggle checkbox ripple disabledness correctly', fakeAsync(() => {