diff --git a/src/lib/checkbox/checkbox.html b/src/lib/checkbox/checkbox.html index 3174c6804464..ef37a3001ce6 100644 --- a/src/lib/checkbox/checkbox.html +++ b/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)">
{ 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(); @@ -94,6 +96,8 @@ describe('MatCheckbox', () => { 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(); diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 8959caeaf8a4..cfb6941532f5 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/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;