Skip to content

Commit db26bc9

Browse files
Marcy Suttonmarcysutton
authored andcommitted
fix(color-contrast): allow disabled label children
Closes #596
1 parent a464918 commit db26bc9

File tree

2 files changed

+16
-1
lines changed

2 files changed

+16
-1
lines changed

lib/rules/color-contrast-matches.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,12 @@ if (nodeName === 'FIELDSET' && node.disabled || axe.commons.dom.findUp(node, 'fi
3535
var nodeParentLabel = axe.commons.dom.findUp(node, 'label');
3636
if (nodeName === 'LABEL' || nodeParentLabel) {
3737
var relevantNode = node;
38+
var relevantVirtualNode = virtualNode;
39+
3840
if (nodeParentLabel) {
3941
relevantNode = nodeParentLabel;
42+
// we need an input candidate from a parent to account for label children
43+
relevantVirtualNode = axe.utils.getNodeFromTree(axe._tree[0], nodeParentLabel);
4044
}
4145
// explicit label of disabled input
4246
let doc = axe.commons.dom.getRootNode(relevantNode);
@@ -45,7 +49,7 @@ if (nodeName === 'LABEL' || nodeParentLabel) {
4549
return false;
4650
}
4751

48-
var candidate = axe.utils.querySelectorAll(virtualNode, 'input:not([type="hidden"]):not([type="image"])' +
52+
var candidate = axe.utils.querySelectorAll(relevantVirtualNode, 'input:not([type="hidden"]):not([type="image"])' +
4953
':not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea');
5054
if (candidate.length && candidate[0].actualNode.disabled) {
5155
return false;

test/rule-matches/color-contrast-matches.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,18 @@ describe('color-contrast-matches', function () {
149149
var target = fixture.querySelector('input');
150150
var tree = axe._tree = axe.utils.getFlattenedTree(fixture);
151151
assert.isFalse(rule.matches(target, axe.utils.getNodeFromTree(tree[0], target)));
152+
});
152153

154+
it('should not match a disabled implicit label child', function () {
155+
fixture.innerHTML = '<label>' +
156+
'<input type="checkbox" style="position: absolute;display: inline-block;width: 1.5rem;height: 1.5rem;opacity: 0;" disabled checked>' +
157+
'<span style="background-color:rgba(0, 0, 0, 0.26);display:inline-block;width: 1.5rem;height: 1.5rem;" aria-hidden="true"></span>' +
158+
'<span style="color:rgba(0, 0, 0, 0.38);" id="target">Baseball</span>' +
159+
'</label>';
160+
var target = fixture.querySelector('#target');
161+
var tree = axe._tree = axe.utils.getFlattenedTree(fixture);
162+
var result = rule.matches(target, axe.utils.getNodeFromTree(tree[0], target));
163+
assert.isFalse(result);
153164
});
154165

155166
it('should not match <textarea disabled>', function () {

0 commit comments

Comments
 (0)