Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit c609385

Browse files
committed
fix(checkbox): aria-checked state is not computed correctly in all cases
Fixes #12046
1 parent eab5c81 commit c609385

File tree

2 files changed

+37
-3
lines changed

2 files changed

+37
-3
lines changed

src/components/checkbox/checkbox.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,15 +245,27 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
245245

246246
function render() {
247247
// Cast the $viewValue to a boolean since it could be undefined
248-
element.toggleClass('md-checked', !!ngModelCtrl.$viewValue && !isIndeterminate);
248+
var checked = !!ngModelCtrl.$viewValue && !isIndeterminate;
249+
element.toggleClass('md-checked', checked);
250+
if (!isIndeterminate) {
251+
if (checked) {
252+
element.attr('aria-checked', 'true');
253+
} else {
254+
element.attr('aria-checked', 'false');
255+
}
256+
}
249257
}
250258

259+
/**
260+
* @param {string=} newValue
261+
*/
251262
function setIndeterminateState(newValue) {
252263
isIndeterminate = newValue !== false;
253264
if (isIndeterminate) {
254265
element.attr('aria-checked', 'mixed');
255266
}
256267
element.toggleClass('md-indeterminate', isIndeterminate);
268+
ngModelCtrl.$render();
257269
}
258270
}
259271
}

src/components/checkbox/checkbox.spec.js

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -650,18 +650,39 @@ describe('mdCheckbox', function() {
650650
it('should change from the indeterminate to checked state correctly', function() {
651651
var checked = false;
652652
pageScope.isChecked = function() { return checked; };
653-
pageScope.isIndet = function() { return !checked; };
653+
pageScope.isIndeterminate = function() { return !checked; };
654654

655-
var checkbox = compileAndLink('<md-checkbox md-indeterminate="isIndet()" ng-checked="isChecked()"></md-checkbox>');
655+
var checkbox = compileAndLink('<md-checkbox md-indeterminate="isIndeterminate()" ng-checked="isChecked()"></md-checkbox>');
656656

657657
expect(checkbox).toHaveClass(INDETERMINATE_CSS);
658658
expect(checkbox).not.toHaveClass(CHECKED_CSS);
659+
expect(checkbox.attr('aria-checked')).toEqual('mixed');
659660

660661
checked = true;
661662
pageScope.$apply();
662663

663664
expect(checkbox).not.toHaveClass(INDETERMINATE_CSS);
664665
expect(checkbox).toHaveClass(CHECKED_CSS);
666+
expect(checkbox.attr('aria-checked')).toEqual('true');
667+
});
668+
669+
it('should change from the indeterminate to unchecked state correctly', function() {
670+
var checked = true;
671+
pageScope.isChecked = function() { return checked; };
672+
pageScope.isIndeterminate = function() { return checked; };
673+
674+
var checkbox = compileAndLink('<md-checkbox md-indeterminate="isIndeterminate()" ng-checked="isChecked()"></md-checkbox>');
675+
676+
expect(checkbox).toHaveClass(INDETERMINATE_CSS);
677+
expect(checkbox).not.toHaveClass(CHECKED_CSS);
678+
expect(checkbox.attr('aria-checked')).toEqual('mixed');
679+
680+
checked = false;
681+
pageScope.$apply();
682+
683+
expect(checkbox).not.toHaveClass(INDETERMINATE_CSS);
684+
expect(checkbox).not.toHaveClass(CHECKED_CSS);
685+
expect(checkbox.attr('aria-checked')).toEqual('false');
665686
});
666687

667688
it('should mark the checkbox as selected, if the model is true and "md-indeterminate" is false', function() {
@@ -670,6 +691,7 @@ describe('mdCheckbox', function() {
670691

671692
expect(checkbox).toHaveClass(CHECKED_CSS);
672693
expect(checkbox).not.toHaveClass(INDETERMINATE_CSS);
694+
expect(checkbox.attr('aria-checked')).toEqual('true');
673695
});
674696

675697
});

0 commit comments

Comments
 (0)