Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

fix(checkbox): added aria-checked=mixed to indeterminate state #2389

Merged
merged 4 commits into from
Mar 13, 2018
Merged

fix(checkbox): added aria-checked=mixed to indeterminate state #2389

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d83aff0
fix(checkbox): added aria-checked=mixed to indeterminate state
Mar 12, 2018
4676199
Merge branch 'master' into fix/checkbox/a11y
aprigogin Mar 13, 2018
7ba7562
fix(checkbox): moved attribute update logic into transitionCheckState_.
Mar 13, 2018
5bfba7f
fix(checkbox): moved attribute update logic into transitionCheckState_2.
Mar 13, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions packages/mdc-checkbox/adapter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,19 @@ class MDCCheckboxAdapter {
/** @param {string} className */
removeClass(className) {}

/**
* Sets an attribute with a given value on the input element.
* @param {string} attr
* @param {string} value
*/
setNativeControlAttr(attr, value) {}

/**
* Removes an attribute from the input element.
* @param {string} attr
*/
removeNativeControlAttr(attr) {}

/** @param {!EventListener} handler */
registerAnimationEndHandler(handler) {}

Expand Down
2 changes: 2 additions & 0 deletions packages/mdc-checkbox/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ const strings = {
TRANSITION_STATE_CHECKED: 'checked',
TRANSITION_STATE_UNCHECKED: 'unchecked',
TRANSITION_STATE_INDETERMINATE: 'indeterminate',
ARIA_CHECKED_ATTR: 'aria-checked',
ARIA_CHECKED_INDETERMINATE_VALUE: 'mixed',
};

/** @enum {number} */
Expand Down
12 changes: 12 additions & 0 deletions packages/mdc-checkbox/foundation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ class MDCCheckboxFoundation extends MDCFoundation {
return /** @type {!MDCCheckboxAdapter} */ ({
addClass: (/* className: string */) => {},
removeClass: (/* className: string */) => {},
setNativeControlAttr: () => {},
removeNativeControlAttr: () => {},
registerAnimationEndHandler: (/* handler: EventListener */) => {},
deregisterAnimationEndHandler: (/* handler: EventListener */) => {},
registerChangeHandler: (/* handler: EventListener */) => {},
Expand Down Expand Up @@ -108,6 +110,12 @@ class MDCCheckboxFoundation extends MDCFoundation {
/** @param {boolean} indeterminate */
setIndeterminate(indeterminate) {
this.getNativeControl_().indeterminate = indeterminate;
if (indeterminate) {
this.adapter_.setNativeControlAttr(
strings.ARIA_CHECKED_ATTR, strings.ARIA_CHECKED_INDETERMINATE_VALUE);
} else {
this.adapter_.removeNativeControlAttr(strings.ARIA_CHECKED_ATTR);
}
}

/** @return {boolean} */
Expand Down Expand Up @@ -203,6 +211,10 @@ class MDCCheckboxFoundation extends MDCFoundation {
return;
}

// Remove aria-checked (needed for initial inditerminate state) - screen
// readers will pick the right state from input.
this.adapter_.removeNativeControlAttr(strings.ARIA_CHECKED_ATTR);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this a possible race condition between when the property change callback gets called and when the attribute gets added?

If so, the attr settter could be moved inside this (transitionCheckState_) method with a check made to newState to determine whether to add or remove.


// Check to ensure that there isn't a previously existing animation class, in case for example
// the user interacted with the checkbox before the animation was finished.
if (this.currentAnimationClass_.length > 0) {
Expand Down
10 changes: 6 additions & 4 deletions test/unit/mdc-checkbox/foundation.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,9 @@ test('exports numbers', () => {

test('defaultAdapter returns a complete adapter implementation', () => {
verifyDefaultAdapter(MDCCheckboxFoundation, [
'addClass', 'removeClass', 'registerAnimationEndHandler', 'deregisterAnimationEndHandler',
'registerChangeHandler', 'deregisterChangeHandler', 'getNativeControl', 'forceLayout',
'isAttachedToDOM',
'addClass', 'removeClass', 'setNativeControlAttr', 'removeNativeControlAttr', 'registerAnimationEndHandler',
'deregisterAnimationEndHandler', 'registerChangeHandler', 'deregisterChangeHandler', 'getNativeControl',
'forceLayout', 'isAttachedToDOM',
]);
});

Expand Down Expand Up @@ -207,13 +207,15 @@ test('#isChecked returns false when no native control is returned', () => {
});

test('#setIndeterminate updates the value of nativeControl.indeterminate', () => {
const {foundation, nativeControl} = setupTest();
const {foundation, nativeControl, mockAdapter} = setupTest();
foundation.setIndeterminate(true);
assert.isOk(foundation.isIndeterminate());
assert.isOk(nativeControl.indeterminate);
td.verify(mockAdapter.setNativeControlAttr('aria-checked', 'mixed'));
foundation.setIndeterminate(false);
assert.isNotOk(foundation.isIndeterminate());
assert.isNotOk(nativeControl.indeterminate);
td.verify(mockAdapter.removeNativeControlAttr('aria-checked'));
});

test('#setIndeterminate works when no native control is returned', () => {
Expand Down