Skip to content

Commit 3037a90

Browse files
tinayuangaojelbourn
authored andcommitted
fix(checkbox): Set aria-checkbox to mixed for indeterminate checkbox (#8089)
1 parent f2a0206 commit 3037a90

File tree

3 files changed

+11
-0
lines changed

3 files changed

+11
-0
lines changed

src/lib/checkbox/checkbox.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
[indeterminate]="indeterminate"
1414
[attr.aria-label]="ariaLabel"
1515
[attr.aria-labelledby]="ariaLabelledby"
16+
[attr.aria-checked]="_getAriaChecked()"
1617
(change)="_onInteractionEvent($event)"
1718
(click)="_onInputClick($event)">
1819
<div matRipple class="mat-checkbox-ripple"

src/lib/checkbox/checkbox.spec.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,13 +87,17 @@ describe('MatCheckbox', () => {
8787
expect(checkboxNativeElement.classList).not.toContain('mat-checkbox-checked');
8888
expect(inputElement.checked).toBe(false);
8989
expect(inputElement.indeterminate).toBe(false);
90+
expect(inputElement.getAttribute('aria-checked'))
91+
.toBe('false', 'Expect aria-checked to be false');
9092

9193
testComponent.isIndeterminate = true;
9294
fixture.detectChanges();
9395

9496
expect(checkboxNativeElement.classList).toContain('mat-checkbox-indeterminate');
9597
expect(inputElement.checked).toBe(false);
9698
expect(inputElement.indeterminate).toBe(true);
99+
expect(inputElement.getAttribute('aria-checked'))
100+
.toBe('mixed', 'Expect aria checked to be mixed for indeterminate checkbox');
97101

98102
testComponent.isIndeterminate = false;
99103
fixture.detectChanges();
@@ -133,6 +137,8 @@ describe('MatCheckbox', () => {
133137
expect(inputElement.indeterminate).toBe(true);
134138
expect(inputElement.checked).toBe(true);
135139
expect(testComponent.isIndeterminate).toBe(true);
140+
expect(inputElement.getAttribute('aria-checked'))
141+
.toBe('true', 'Expect aria checked to be true');
136142

137143
inputElement.click();
138144
fixture.detectChanges();

src/lib/checkbox/checkbox.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -303,6 +303,10 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
303303
this._changeDetectorRef.markForCheck();
304304
}
305305

306+
_getAriaChecked(): 'true' | 'false' | 'mixed' {
307+
return this.checked ? 'true' : (this.indeterminate ? 'mixed' : 'false');
308+
}
309+
306310
private _transitionCheckState(newState: TransitionCheckState) {
307311
let oldState = this._currentCheckState;
308312
let renderer = this._renderer;

0 commit comments

Comments
 (0)