fix(get-background-color): process tbody, thead, and tfoot when getting background color (#1653)

* feat(get-background-color): process tbody, thead, and tfoot when getting background color

* uppercase nodenme

* fix other nodeName

Author: straker

lib/commons/color/get-background-color.js

@@ -260,45 +260,48 @@ function sortPageBackground(elmStack) {
  */
 function includeMissingElements(elmStack, elm) {
 	/*eslint max-depth:["error",7]*/
+	const nodeName = elm.nodeName.toUpperCase();
 	const elementMap = {
-		TD: ['TR', 'TBODY'],
-		TH: ['TR', 'THEAD'],
+		TD: ['TR', 'THEAD', 'TBODY', 'TFOOT'],
+		TH: ['TR', 'THEAD', 'TBODY', 'TFOOT'],
 		INPUT: ['LABEL']
 	};
 	const tagArray = elmStack.map(elm => {
-		return elm.nodeName;
+		return elm.nodeName.toUpperCase();
 	});
 	let bgNodes = elmStack;
 	for (let candidate in elementMap) {
 		// check that TR or LABEL has paired nodeName from elementMap, but don't expect elm to be that candidate
 		if (tagArray.includes(candidate)) {
-			for (let candidateIndex in elementMap[candidate]) {
-				if (candidate.hasOwnProperty(candidateIndex)) {
-					// look up the tree for a matching candidate
-					let ancestorMatch = axe.commons.dom.findUp(
-						elm,
-						elementMap[candidate][candidateIndex]
+			for (
+				let candidateIndex = 0;
+				candidateIndex < elementMap[candidate].length;
+				candidateIndex++
+			) {
+				// look up the tree for a matching 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 (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);
-						}
-					}
-					// nodeName matches value
-					// (such as LABEL, when matching itself. It should be in the list, but Phantom skips it)
-					if (
-						elm.nodeName === elementMap[candidate][candidateIndex] &&
-						tagArray.indexOf(elm.nodeName) === -1
-					) {
-						bgNodes.splice(tagArray.indexOf(candidate) + 1, 0, elm);
+					if (overlaps) {
+						// if target is in the elementMap, use its position.
+						bgNodes.splice(tagArray.indexOf(candidate) + 1, 0, ancestorMatch);
 					}
 				}
+				// nodeName matches value
+				// (such as LABEL, when matching itself. It should be in the list, but Phantom skips it)
+				if (
+					nodeName === elementMap[candidate][candidateIndex] &&
+					tagArray.indexOf(nodeName) === -1
+				) {
+					bgNodes.splice(tagArray.indexOf(candidate) + 1, 0, elm);
+				}
 			}
 		}
 	}

test/commons/color/get-background-color.js

@@ -358,6 +358,72 @@ describe('color.getBackgroundColor', function() {
 		assert.deepEqual(bgNodes, [parent]);
 	});
 
+	it('should count a THEAD as a background element for a child element', function() {
+		fixture.innerHTML =
+			'<div style="background-color:#007acc;">' +
+			'<table style="width:100%">' +
+			'<thead style="background-color:#f3f3f3; height:40px;" id="parent">' +
+			'<td>' +
+			'<span style="color:#007acc" id="target">Cell content</span>' +
+			'</td></thead>' +
+			'</table></div>';
+		var target = fixture.querySelector('#target'),
+			parent = fixture.querySelector('#parent');
+		var bgNodes = [];
+		axe.testUtils.flatTreeSetup(fixture.firstChild);
+		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 TBODY as a background element for a child element', function() {
+		fixture.innerHTML =
+			'<div style="background-color:#007acc;">' +
+			'<table style="width:100%">' +
+			'<tbody style="background-color:#f3f3f3; height:40px;" id="parent">' +
+			'<td>' +
+			'<span style="color:#007acc" id="target">Cell content</span>' +
+			'</td></tbody>' +
+			'</table></div>';
+		var target = fixture.querySelector('#target'),
+			parent = fixture.querySelector('#parent');
+		var bgNodes = [];
+		axe.testUtils.flatTreeSetup(fixture.firstChild);
+		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 TFOOT as a background element for a child element', function() {
+		fixture.innerHTML =
+			'<div style="background-color:#007acc;">' +
+			'<table style="width:100%">' +
+			'<tfoot style="background-color:#f3f3f3; height:40px;" id="parent">' +
+			'<td>' +
+			'<span style="color:#007acc" id="target">Cell content</span>' +
+			'</td></tfoot>' +
+			'</table></div>';
+		var target = fixture.querySelector('#target'),
+			parent = fixture.querySelector('#parent');
+		var bgNodes = [];
+		axe.testUtils.flatTreeSetup(fixture.firstChild);
+		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 ignore TR elements that don't overlap", function() {
 		fixture.innerHTML =
 			'<table style="position:relative; width:100%;">' +