Skip to content

Commit

Permalink
fix(checkbox): Set aria-checkbox to mixed for indeterminate checkbox
Browse files Browse the repository at this point in the history
  • Loading branch information
tinayuangao committed Oct 28, 2017
1 parent 4efb70c commit 55d01f8
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 0 deletions.
1 change: 1 addition & 0 deletions src/lib/checkbox/checkbox.html
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
6 changes: 6 additions & 0 deletions src/lib/checkbox/checkbox.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down
4 changes: 4 additions & 0 deletions src/lib/checkbox/checkbox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -303,6 +303,10 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
this._changeDetectorRef.markForCheck();
}

getAriaChecked(): string {
return this.checked ? 'true' : (this.indeterminate ? 'mixed' : 'false');
}

private _transitionCheckState(newState: TransitionCheckState) {
let oldState = this._currentCheckState;
let renderer = this._renderer;
Expand Down

0 comments on commit 55d01f8

Please sign in to comment.