Account for styles on the TBODY element

dequelabs · Sep 7, 2017 · 3fc3a33 · 3fc3a33
1 parent 1d9d3df
commit 3fc3a33
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 14 deletions.
diff --git a/lib/commons/color/get-background-color.js b/lib/commons/color/get-background-color.js
@@ -121,29 +121,35 @@ function elmPartiallyObscured(elm, bgElm, bgColor) {
  * @param {Element} elm
  */
 function includeMissingElements(elmStack, elm) {
-	const elementMap = {'TD': 'TR', 'TH': 'THEAD', 'INPUT': 'LABEL'};
+	const elementMap = {'TD': ['TR', 'TBODY'], 'TH': ['THEAD'], 'INPUT': ['LABEL']};
 	const tagArray = elmStack.map((elm) => {
 		return elm.tagName;
 	});
 	let bgNodes = elmStack;
+	//jshint maxdepth:7
 	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);
+			for (let candidateIndex in elementMap[candidate]) {
+				if (candidate.hasOwnProperty(candidateIndex)) {
+
+					// tagName matches key
+					if (elm.tagName === candidate) {
+						let ancestorMatch = axe.commons.dom.findUp(elm, elementMap[candidate][candidateIndex]);
+						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);
+							}
+						}
+					}
+					// tagName matches value
+					// (such as LABEL, when matching itself. It should be in the list, but Phantom skips it)
+					if (elm.tagName === elementMap[candidate][candidateIndex] && tagArray.indexOf(elm.tagName) === -1) {
+						bgNodes.splice(tagArray.indexOf(candidate) + 1, 0, elm);
 					}
 				}
 			}
-			// tagName matches value
-			// (such as LABEL, when matching itself. It should be in the list, but Phantom skips it)
-			if (elm.tagName === elementMap[candidate] && tagArray.indexOf(elm.tagName) === -1) {
-				bgNodes.splice(tagArray.indexOf(candidate) + 1, 0, elm);
-			}
 		}
 	}
 	return bgNodes;

diff --git a/test/checks/color/color-contrast.js b/test/checks/color/color-contrast.js
@@ -197,6 +197,13 @@ describe('color-contrast', function () {
 		assert.deepEqual(checkContext._relatedNodes, []);
 	});
 
+	it('should return true when there is sufficient contrast based on tbody', function () {
+		fixture.innerHTML = '<table><tbody style="background: #d00d2c"><tr><td id="target" style="color: #fff; padding: .5em">Col 1</td></tr></tbody></table>';
+		var target = fixture.querySelector('#target');
+		assert.isTrue(checks['color-contrast'].evaluate.call(checkContext, target));
+		assert.deepEqual(checkContext._relatedNodes, []);
+	});
+
 	it('should return undefined if element overlaps text content', function () {
 		fixture.innerHTML = '<div style="background-color: white; height: 60px; width: 80px; border:1px solid;position: relative;">' +
 			'<div id="target" style="color: white; height: 40px; width: 60px; border:1px solid red;">Hi</div>' +