Skip to content

Commit

Permalink
feat: put 1:1 ratio contrast into incomplete
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcysutton
Marcy Sutton authored and marcysutton committed Jun 14, 2017
1 parent ad0794c commit 9feb74a
Show file tree
Hide file tree
Showing 7 changed files with 68 additions and 42 deletions.
10 changes: 8 additions & 2 deletions lib/checks/color/color-contrast.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@ var missing;
if (bgColor === null) {
missing = axe.commons.color.incompleteData.get('bgColor');
}

let equalRatio = false;
if (truncatedResult === 1) {
equalRatio = true;
missing = axe.commons.color.incompleteData.set('bgColor', 'equalRatio');
}
// need both independently in case both are missing
var data = {
fgColor: fgColor ? fgColor.toHexString() : undefined,
Expand All @@ -35,12 +41,12 @@ var data = {

this.data(data);

if (!cr.isValid) {
if (!cr.isValid || equalRatio) {
this.relatedNodes(bgNodes);
}

//We don't know, so we'll put it into Can't Tell
if (fgColor === null || bgColor === null) {
if (fgColor === null || bgColor === null || equalRatio) {
missing = null;
axe.commons.color.incompleteData.clear();
return undefined;
Expand Down
1 change: 1 addition & 0 deletions lib/checks/color/color-contrast.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"bgOverlap": "Element's background color could not be determined because it is overlapped by another element",
"fgAlpha" : "Element's foreground color could not be determined because of alpha transparency",
"elmPartiallyObscured": "Element's background color could not be determined because it's partially obscured by another element",
"equalRatio": "Element has a 1:1 contrast ratio with the background",
"default": "Unable to determine contrast ratio"
}
}
Expand Down
3 changes: 2 additions & 1 deletion lib/commons/color/incomplete-data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,10 @@ color.incompleteData = (function() {
if (typeof key !== 'string') {
throw new Error('Incomplete data: key must be a string');
}
if (reason){
if (reason) {
data[key] = reason;
}
return data[key];
},
/**
* Get incomplete data by key
Expand Down
11 changes: 11 additions & 0 deletions test/checks/color/color-contrast.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,4 +201,15 @@ describe('color-contrast', function () {
assert.equal(checkContext._data.missingData, 'bgOverlap');
assert.equal(checkContext._data.contrastRatio, 0);
});

it('should return undefined if element has same color as background', function () {
fixture.innerHTML = '<div style="background-color: white;">' +
'<div style="color:white;" id="target">Text</div>'+
'</div>';
var target = fixture.querySelector('#target');
var actual = checks['color-contrast'].evaluate.call(checkContext, target);
assert.isUndefined(actual);
assert.equal(checkContext._data.missingData, 'equalRatio');
assert.equal(checkContext._data.contrastRatio, 1);
});
});
8 changes: 6 additions & 2 deletions test/commons/color/contrast.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,6 @@ describe('color.Color', function () {

assert.isTrue(axe.commons.color.hasValidContrastRatio(black, white, 8, false).isValid);
assert.isTrue(axe.commons.color.hasValidContrastRatio(black, white, 8, false).contrastRatio > 4.5);
assert.isFalse(axe.commons.color.hasValidContrastRatio(black, black, 16, true).isValid);
assert.isTrue(axe.commons.color.hasValidContrastRatio(black, black, 16, true).contrastRatio < 3);
assert.isTrue(axe.commons.color.hasValidContrastRatio(white, gray, 24, false).isValid);
assert.isTrue(axe.commons.color.hasValidContrastRatio(white, gray, 24, false).contrastRatio > 3);
assert.isTrue(axe.commons.color.hasValidContrastRatio(white, gray, 20, true).isValid);
Expand All @@ -124,4 +122,10 @@ describe('color.Color', function () {
assert.isTrue(axe.commons.color.hasValidContrastRatio(white, gray, 8, false).contrastRatio < 4.5);
});

it('should count 1-1 ratios as visually hidden', function () {
var black = new axe.commons.color.Color(0, 0, 0, 1);

assert.isFalse(axe.commons.color.hasValidContrastRatio(black, black, 16, true).isValid);
assert.isTrue(axe.commons.color.hasValidContrastRatio(black, black, 16, true).contrastRatio === 1);
});
});
41 changes: 22 additions & 19 deletions test/integration/rules/color-contrast/color-contrast.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,26 +22,8 @@

<div id="fail2" style="background-color: gray; color: white; font-size: 8px;">This is a fail.</div>
<div id="fail3" style="background-color: yellow; color: white; font-size: 40px;">This is a fail.</div>
<div style="background-color: white;"><div style="background-color: rgba(255, 255, 255, 0.1); color: white" id="fail4">Fail.</div></div>
<div style="background-color: white; height: 60px; width: 80px;"><div id="fail5" style="color: white; height: 40px; width: 60px;">Hi</div></div>
<div style="background-color: white"><div id="fail6" style="opacity: 0.1; background-color: white; color: black">This is a fail.</div></div>
<div style="background-color: white; height: 60px; width: 80px; overflow: scroll"><div id="fail7" style="margin-left: 80px; color: white; height: 80px; width: 90px;">Hi</div></div>

<input id="fail8" style="background: #000; color: #000" value="hello" type="text">
<input id="fail9" style="background: #000; color: #000" value="hello" type="button">
<input id="fail10" style="background: #000; color: #000" value="hello" type="submit">
<input id="fail11" style="background: #000; color: #000" value="hello" type="reset">
<select id="fail12" style="background: #000; color: #000">
<option>Hello</option>
</select>
<textarea id="fail13" style="background: #000; color: #000">hello</textarea>
<input id="fail14" type="button" style="background: #000; color: #000" value="hello">
<input id="fail15" type="reset" style="background: #000; color: #000" value="hello">
<input id="fail16" type="submit" style="background: #000; color: #000" value="hello">
<input id="fail17" style="background: #000; color: #000" value="hello">
<div id="fail18" style="background: #000; color: #000" role="alert" aria-disabled="false">hello</div>

<div id="fail19" style="background: #000; color: #000" aria-hidden="true">text</div>
<div style="background-color: white"><div id="fail6" style="opacity: 0.1; background-color: white; color: black">This is a fail.</div></div>

<!-- shouldnt run -->
<input id="ignore0" style="background: #000; color: #000" value="hello" type="hidden">
Expand Down Expand Up @@ -80,3 +62,24 @@
<div id="canttell4" style="color: white; height: 40px; width: 60px; border:1px solid red;">Element overlap</div>
<div style="position: absolute; top: 0; width: 60px; height: 40px;background-color: #000"></div>
</div>
<div style="background-color: white;"><div style="background-color: rgba(255, 255, 255, 0.1); color: white" id="canttell5">1:1 ratio with transparency</div></div>

<input id="canttell6" style="background: #000; color: #000" value="hello" type="text">
<input id="canttell7" style="background: #000; color: #000" value="hello" type="button">
<input id="canttell8" style="background: #000; color: #000" value="hello" type="submit">
<input id="canttell9" style="background: #000; color: #000" value="hello" type="reset">
<select id="canttell10" style="background: #000; color: #000">
<option>Hello</option>
</select>
<textarea id="canttell11" style="background: #000; color: #000">hello</textarea>
<input id="canttell12" type="button" style="background: #000; color: #000" value="hello">
<input id="canttell13" type="reset" style="background: #000; color: #000" value="hello">
<input id="canttell14" type="submit" style="background: #000; color: #000" value="hello">
<input id="canttell15" style="background: #000; color: #000" value="hello">
<div id="canttell16" style="background: #000; color: #000" role="alert" aria-disabled="false">hello</div>

<div id="canttell17" style="background: #000; color: #000" aria-hidden="true">text</div>

<div style="background-color: white; height: 60px; width: 80px;"><div id="canttell18" style="color: white; height: 40px; width: 60px;">Hi</div></div>

<div style="background-color: white; height: 60px; width: 80px; overflow: scroll"><div id="canttell19" style="margin-left: 80px; color: white; height: 80px; width: 90px;">Hi</div></div>
36 changes: 18 additions & 18 deletions test/integration/rules/color-contrast/color-contrast.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,7 @@
["#fail1"],
["#fail2"],
["#fail3"],
["#fail4"],
["#fail5"],
["#fail6"],
["#fail7"],
["#fail8"],
["#fail9"],
["#fail10"],
["#fail11"],
["#fail12"],
["#fail13"],
["#fail14"],
["#fail15"],
["#fail16"],
["#fail17"],
["#fail18"],
["#fail19"]
["#fail6"]
],
"passes": [
["#pass1"],
Expand All @@ -29,14 +14,29 @@
["#pass4"],
["#pass5"],
["#pass6"],
["#pass6 > input"],
["#pass6 > input[type=\"text\"]"],
["#pass7"],
["#pass7 > input"]
],
"incomplete": [
["#canttell1"],
["#canttell2"],
["#canttell3"],
["#canttell4"]
["#canttell4"],
["#canttell5"],
["#canttell6"],
["#canttell7"],
["#canttell8"],
["#canttell9"],
["#canttell10"],
["#canttell11"],
["#canttell12"],
["#canttell13"],
["#canttell14"],
["#canttell15"],
["#canttell16"],
["#canttell17"],
["#canttell18"],
["#canttell19"]
]
}

0 comments on commit 9feb74a

Please sign in to comment.