fix(color-contrast): incl. elements w/ line breaks

Closes #607 Closes #556
dequelabs · Dec 12, 2017 · a464918 · a464918
1 parent 28fe4d6
commit a464918
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/lib/commons/color/get-background-color.js b/lib/commons/color/get-background-color.js
@@ -121,6 +121,9 @@ function elmPartiallyObscured(elm, bgElm, bgColor) {
  * @param {Element} elm
  */
 function includeMissingElements(elmStack, elm) {
+	if (!elmStack.includes(elm)) {
+		elmStack.unshift(elm);
+	}
 	const elementMap = {'TD': ['TR', 'TBODY'], 'TH': ['TR', 'THEAD'], 'INPUT': ['LABEL']};
 	const tagArray = elmStack.map((elm) => {
 		return elm.tagName;

diff --git a/test/checks/color/color-contrast.js b/test/checks/color/color-contrast.js
@@ -95,6 +95,21 @@ describe('color-contrast', function () {
 		assert.deepEqual(checkContext._relatedNodes, []);
 	});
 
+	it('should return true for inline elements with sufficient contrast spanning multiple lines', function () {
+		fixture.innerHTML = '<p>Text oh heyyyy <a href="#" id="target">and here\'s <br>a link</a></p>';
+		var target = fixture.querySelector('#target');
+		assert.isTrue(checks['color-contrast'].evaluate.call(checkContext, target));
+		assert.deepEqual(checkContext._relatedNodes, []);
+	});
+
+	it('should return true for inline elements with sufficient contrast', function () {
+		fixture.innerHTML = '<p>Text oh heyyyy <b id="target">and here\'s bold text</b></p>';
+		var target = fixture.querySelector('#target');
+		var result = checks['color-contrast'].evaluate.call(checkContext, target);
+		assert.isTrue(result);
+		assert.deepEqual(checkContext._relatedNodes, []);
+	});
+
 	it('should return false when there is not sufficient contrast', function () {
 		fixture.innerHTML = '<div style="color: yellow; background-color: white;" id="target">' +
 			'My text</div>';