fix(material/checkbox): fix ARIA semantics and use native DOM propert…

…ies (#26710)

For the checkbox component, fix semantics so that a11y produces a state
of "mixed" when both the `checked` and `indeterminate` Inputs to
mat-checkbox are both true.

Also, remove the use of aria-checked in favor of the native DOM
properties for checked and indeterminate. Conform to [ARIA in HTML W3C
input checkbox specification](https://www.w3.org/TR/html-aria/#el-input-checkbox).

Fix a11y bug where checkbox renders the indeterminate visual state but
accessibility tree has a state of "checked". Aligns with native
checkbox, which produces the mixed state when indeterminate property is
true, regardless of the value of the checked property.

Some accessibility checkers produce an error when native checkbox has
aria-checked on it. Remove aria-checked to fix errors.

Does not make visual changes.

Fix #26709

src/material/checkbox/checkbox.html

@@ -8,13 +8,13 @@
            type="checkbox"
            class="mdc-checkbox__native-control"
            [class.mdc-checkbox--selected]="checked"
-           [attr.aria-checked]="_getAriaChecked()"
            [attr.aria-label]="ariaLabel || null"
            [attr.aria-labelledby]="ariaLabelledby"
            [attr.aria-describedby]="ariaDescribedby"
            [attr.name]="name"
            [attr.value]="value"
            [checked]="checked"
+           [indeterminate]="indeterminate"
            [disabled]="disabled"
            [id]="inputId"
            [required]="required"

src/material/checkbox/checkbox.spec.ts

@@ -96,19 +96,16 @@ describe('MDC-based MatCheckbox', () => {
     it('should add and remove indeterminate state', fakeAsync(() => {
       expect(inputElement.checked).toBe(false);
       expect(inputElement.indeterminate).toBe(false);
-      expect(inputElement.getAttribute('aria-checked'))
-        .withContext('Expect aria-checked to be false')
-        .toBe('false');
 
       testComponent.isIndeterminate = true;
       fixture.detectChanges();
       flush();
 
       expect(inputElement.checked).toBe(false);
       expect(inputElement.indeterminate).toBe(true);
-      expect(inputElement.getAttribute('aria-checked'))
-        .withContext('Expect aria checked to be mixed for indeterminate checkbox')
-        .toBe('mixed');
+      expect(inputElement.hasAttribute('aria-checked'))
+        .withContext('Expect aria-checked attribute to not be used')
+        .toBe(false);
 
       testComponent.isIndeterminate = false;
       fixture.detectChanges();
@@ -148,9 +145,9 @@ describe('MDC-based MatCheckbox', () => {
       expect(inputElement.indeterminate).toBe(true);
       expect(inputElement.checked).toBe(true);
       expect(testComponent.isIndeterminate).toBe(true);
-      expect(inputElement.getAttribute('aria-checked'))
-        .withContext('Expect aria checked to be true')
-        .toBe('true');
+      expect(inputElement.hasAttribute('aria-checked'))
+        .withContext('Expect aria-checked attribute to not be used')
+        .toBe(false);
 
       inputElement.click();
       fixture.detectChanges();

src/material/checkbox/checkbox.ts

@@ -311,14 +311,6 @@ export abstract class _MatCheckboxBase<E>
     this.disabled = isDisabled;
   }
 
-  _getAriaChecked(): 'true' | 'false' | 'mixed' {
-    if (this.checked) {
-      return 'true';
-    }
-
-    return this.indeterminate ? 'mixed' : 'false';
-  }
-
   private _transitionCheckState(newState: TransitionCheckState) {
     let oldState = this._currentCheckState;
     let element = this._getAnimationTargetElement();

src/material/legacy-checkbox/checkbox.html

@@ -12,7 +12,6 @@
            [tabIndex]="tabIndex"
            [attr.aria-label]="ariaLabel || null"
            [attr.aria-labelledby]="ariaLabelledby"
-           [attr.aria-checked]="_getAriaChecked()"
            [attr.aria-describedby]="ariaDescribedby"
            (change)="_onInteractionEvent($event)"
            (click)="_onInputClick($event)">

src/material/legacy-checkbox/checkbox.spec.ts

@@ -73,19 +73,13 @@ describe('MatLegacyCheckbox', () => {
       expect(checkboxNativeElement.classList).not.toContain('mat-checkbox-checked');
       expect(inputElement.checked).toBe(false);
       expect(inputElement.indeterminate).toBe(false);
-      expect(inputElement.getAttribute('aria-checked'))
-        .withContext('Expect aria-checked to be false')
-        .toBe('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'))
-        .withContext('Expect aria checked to be mixed for indeterminate checkbox')
-        .toBe('mixed');
 
       testComponent.isIndeterminate = false;
       fixture.detectChanges();
@@ -125,9 +119,6 @@ describe('MatLegacyCheckbox', () => {
       expect(inputElement.indeterminate).toBe(true);
       expect(inputElement.checked).toBe(true);
       expect(testComponent.isIndeterminate).toBe(true);
-      expect(inputElement.getAttribute('aria-checked'))
-        .withContext('Expect aria checked to be true')
-        .toBe('true');
 
       inputElement.click();
       fixture.detectChanges();

tools/public_api_guard/material/checkbox.md

@@ -94,8 +94,6 @@ export abstract class _MatCheckboxBase<E> extends _MatCheckboxMixinBase implemen
     abstract focus(origin?: FocusOrigin): void;
     protected abstract _getAnimationTargetElement(): HTMLElement | null;
     // (undocumented)
-    _getAriaChecked(): 'true' | 'false' | 'mixed';
-    // (undocumented)
     protected _handleInputClick(): void;
     id: string;
     get indeterminate(): boolean;