fix(get-background-color): scroll element into view horizontally (#1845)

* fix(get-background-color): scroll element into view horizontally * prevent infinite loop * comment
dequelabs · Oct 14, 2019 · 50df70a · 50df70a
1 parent 754d56b
commit 50df70a
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git a/lib/commons/color/get-background-color.js b/lib/commons/color/get-background-color.js
@@ -25,6 +25,21 @@ color.getBackgroundColor = function getBackgroundColor(
 		const clientHeight = elm.getBoundingClientRect().height;
 		const alignToTop = clientHeight - 2 >= window.innerHeight * 2;
 		elm.scrollIntoView(alignToTop);
+
+		// ensure element is scrolled into view horizontally
+		let center, scrollParent;
+		do {
+			const rect = elm.getBoundingClientRect();
+
+			// 'x' does not exist in IE11
+			const x = 'x' in rect ? rect.x : rect.left;
+			center = x + rect.width / 2;
+
+			if (center < 0) {
+				scrollParent = getScrollParent(elm);
+				scrollParent.scrollLeft = 0;
+			}
+		} while (center < 0 && scrollParent !== document.documentElement);
 	}
 
 	let bgColors = [];
@@ -378,6 +393,36 @@ function contentOverlapping(targetElement, bgNode) {
 	return false;
 }
 
+/**
+ * Return the scrolling parent element
+ * @see https://stackoverflow.com/questions/35939886/find-first-scrollable-parent#42543908
+ * @param {Element} element
+ * @param {Boolean} includeHidden
+ * @return {Element}
+ */
+function getScrollParent(element, includeHidden) {
+	var style = getComputedStyle(element);
+	var excludeStaticParent = style.position === 'absolute';
+	var overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
+
+	if (style.position === 'fixed') {
+		return document.documentElement;
+	}
+	for (var parent = element; (parent = parent.parentElement); ) {
+		style = getComputedStyle(parent);
+		if (excludeStaticParent && style.position === 'static') {
+			continue;
+		}
+		if (
+			overflowRegex.test(style.overflow + style.overflowY + style.overflowX)
+		) {
+			return parent;
+		}
+	}
+
+	return document.documentElement;
+}
+
 /**
  * Determines whether an element has a fully opaque background, whether solid color or an image
  * @param {Element} node

diff --git a/test/commons/color/get-background-color.js b/test/commons/color/get-background-color.js
@@ -646,6 +646,19 @@ describe('color.getBackgroundColor', function() {
 		assert.notEqual(window.pageYOffset, 0);
 	});
 
+	it('scrolls horizontally into view when scroll is enabled', function() {
+		fixture.innerHTML =
+			'<div style="width: 1000px;"><span id="target">long text to test scrolling</span></div>';
+		var targetEl = fixture.querySelector('#target');
+		var bgNodes = [];
+		window.scroll(100, 0);
+
+		axe.testUtils.flatTreeSetup(fixture.firstChild);
+		axe.commons.color.getBackgroundColor(targetEl, bgNodes, false);
+
+		assert.equal(document.documentElement.scrollLeft, 0);
+	});
+
 	it('returns elements with negative z-index', function() {
 		fixture.innerHTML =
 			'<div id="sibling" ' +