fix: expand tr support for color contrast

dequelabs · Aug 31, 2017 · 5a77c2f · 5a77c2f
1 parent 859f5da
commit 5a77c2f
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 15 deletions.
diff --git a/lib/commons/color/get-background-color.js b/lib/commons/color/get-background-color.js
@@ -121,22 +121,22 @@ function elmPartiallyObscured(elm, bgElm, bgColor) {
  * @param {Element} elm
  */
 function includeMissingElements(elmStack, elm) {
-	const elementMap = {'TD': 'TR', 'INPUT': 'LABEL'};
+	const elementMap = {'TD': 'TR', 'TH': 'TR', 'INPUT': 'LABEL'};
 	const tagArray = elmStack.map((elm) => {
 		return elm.tagName;
 	});
 	let bgNodes = elmStack;
 	for (let candidate in elementMap) {
-		if (elementMap.hasOwnProperty(candidate)) {
-			// tagName matches key
-			if (elm.tagName === candidate) {
-				let ancestorMatch = axe.commons.dom.findUp(elm, elementMap[candidate]);
-				if (ancestorMatch && elmStack.indexOf(ancestorMatch) === -1) {
-					// found an ancestor not in elmStack, and it overlaps
-					let overlaps = axe.commons.dom.visuallyOverlaps(elm.getBoundingClientRect(), ancestorMatch);
-					if (overlaps) {
-						bgNodes.splice(elmStack.indexOf(elm) + 1, 0, ancestorMatch);
-					}
+		// check that TR or LABEL has paired nodeName from elementMap, but don't expect elm to be that candidate 
+		if (tagArray.includes(candidate)) {
+			// look up the tree for a matching candidate
+			let ancestorMatch = axe.commons.dom.findUp(elm, elementMap[candidate]);
+			if (ancestorMatch && elmStack.indexOf(ancestorMatch) === -1) {
+				// found an ancestor not in elmStack, and it overlaps
+				let overlaps = axe.commons.dom.visuallyOverlaps(elm.getBoundingClientRect(), ancestorMatch);
+				if (overlaps) {
+					// if target is in the elementMap, use its position. 
+					bgNodes.splice(tagArray.indexOf(candidate) + 1, 0, ancestorMatch);
 				}
 			}
 			// tagName matches value

diff --git a/test/commons/color/get-background-color.js b/test/commons/color/get-background-color.js
@@ -192,14 +192,54 @@ describe('color.getBackgroundColor', function () {
 		assert.deepEqual(bgNodes, [target]);
 	});
 
-	it('should count a TR as a background element', function () {
+	it('should count a TR as a background element for TD', function () {
 		fixture.innerHTML = '<div style="background-color:#007acc;">' +
 		'<table style="width:100%">' +
 			'<tr style="background-color:#f3f3f3; height:40px;" id="parent">' +
-        '<td style="color:#007acc" id="target">' +
+				'<td style="color:#007acc" id="target">' +
 					'Cell content</td>' +
-        '</tr>' +
-      '</table></div>';
+			'</tr>' +
+		'</table></div>';
+		var target = fixture.querySelector('#target'),
+				parent = fixture.querySelector('#parent');
+		var bgNodes = [];
+		var actual = axe.commons.color.getBackgroundColor(target, bgNodes);
+		var expected = new axe.commons.color.Color(243, 243, 243, 1);
+		assert.equal(actual.red, expected.red);
+		assert.equal(actual.green, expected.green);
+		assert.equal(actual.blue, expected.blue);
+		assert.equal(actual.alpha, expected.alpha);
+		assert.deepEqual(bgNodes, [parent]);
+	});
+
+	it('should count a TR as a background element for TH', function () {
+		fixture.innerHTML = '<div style="background-color:#007acc;">' +
+		'<table style="width:100%">' +
+			'<tr style="background-color:#f3f3f3; height:40px;" id="parent">' +
+				'<th style="color:#007acc" id="target">' +
+					'Header content</th>' +
+			'</tr>' +
+		'</table></div>';
+		var target = fixture.querySelector('#target'),
+				parent = fixture.querySelector('#parent');
+		var bgNodes = [];
+		var actual = axe.commons.color.getBackgroundColor(target, bgNodes);
+		var expected = new axe.commons.color.Color(243, 243, 243, 1);
+		assert.equal(actual.red, expected.red);
+		assert.equal(actual.green, expected.green);
+		assert.equal(actual.blue, expected.blue);
+		assert.equal(actual.alpha, expected.alpha);
+		assert.deepEqual(bgNodes, [parent]);
+	});
+
+	it('should count a TR as a background element for a child element', function () {
+		fixture.innerHTML = '<div style="background-color:#007acc;">' +
+		'<table style="width:100%">' +
+			'<tr style="background-color:#f3f3f3; height:40px;" id="parent">' +
+			'<td>' +
+					'<span style="color:#007acc" id="target">Cell content</span>' +
+			'</td></tr>' +
+		'</table></div>';
 		var target = fixture.querySelector('#target'),
 				parent = fixture.querySelector('#parent');
 		var bgNodes = [];