fix(checkbox): Set aria-checkbox to mixed for indeterminate checkbox (#8089)

Author: tinayuangao

src/lib/checkbox/checkbox.html

@@ -13,6 +13,7 @@
            [indeterminate]="indeterminate"
            [attr.aria-label]="ariaLabel"
            [attr.aria-labelledby]="ariaLabelledby"
+           [attr.aria-checked]="_getAriaChecked()"
            (change)="_onInteractionEvent($event)"
            (click)="_onInputClick($event)">
     <div matRipple class="mat-checkbox-ripple"

src/lib/checkbox/checkbox.spec.ts

@@ -87,13 +87,17 @@ describe('MatCheckbox', () => {
       expect(checkboxNativeElement.classList).not.toContain('mat-checkbox-checked');
       expect(inputElement.checked).toBe(false);
       expect(inputElement.indeterminate).toBe(false);
+      expect(inputElement.getAttribute('aria-checked'))
+          .toBe('false', 'Expect aria-checked to be false');
 
       testComponent.isIndeterminate = true;
       fixture.detectChanges();
 
       expect(checkboxNativeElement.classList).toContain('mat-checkbox-indeterminate');
       expect(inputElement.checked).toBe(false);
       expect(inputElement.indeterminate).toBe(true);
+      expect(inputElement.getAttribute('aria-checked'))
+          .toBe('mixed', 'Expect aria checked to be mixed for indeterminate checkbox');
 
       testComponent.isIndeterminate = false;
       fixture.detectChanges();
@@ -133,6 +137,8 @@ describe('MatCheckbox', () => {
       expect(inputElement.indeterminate).toBe(true);
       expect(inputElement.checked).toBe(true);
       expect(testComponent.isIndeterminate).toBe(true);
+      expect(inputElement.getAttribute('aria-checked'))
+          .toBe('true', 'Expect aria checked to be true');
 
       inputElement.click();
       fixture.detectChanges();

src/lib/checkbox/checkbox.ts

@@ -303,6 +303,10 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
     this._changeDetectorRef.markForCheck();
   }
 
+  _getAriaChecked(): 'true' | 'false' | 'mixed' {
+    return this.checked ? 'true' : (this.indeterminate ? 'mixed' : 'false');
+  }
+
   private _transitionCheckState(newState: TransitionCheckState) {
     let oldState = this._currentCheckState;
     let renderer = this._renderer;