fix(scrollable-region-focusable): exclude overflow:hidden as not scro…

…llable (#1599) * fix(scrollable-region-focusable): exlcude overflow:hidden as not scrollable * remove comments
dequelabs · May 30, 2019 · 940de07 · 940de07
1 parent 3de0b05
commit 940de07
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 20 deletions.
diff --git a/lib/core/utils/get-scroll.js b/lib/core/utils/get-scroll.js
@@ -19,8 +19,12 @@ axe.utils.getScroll = function getScroll(elm, buffer = 0) {
 	}
 
 	const style = window.getComputedStyle(elm);
-	const scrollableX = style.getPropertyValue('overflow-x') !== 'visible';
-	const scrollableY = style.getPropertyValue('overflow-y') !== 'visible';
+	const overflowXStyle = style.getPropertyValue('overflow-x');
+	const overflowYStyle = style.getPropertyValue('overflow-y');
+	const scrollableX =
+		overflowXStyle !== 'visible' && overflowXStyle !== 'hidden';
+	const scrollableY =
+		overflowYStyle !== 'visible' && overflowYStyle !== 'hidden';
 
 	/**
 	 * check direction of `overflow` and `scrollable`

diff --git a/test/core/utils/get-scroll.js b/test/core/utils/get-scroll.js
@@ -42,10 +42,7 @@ describe('axe.utils.getScroll', function() {
 				'</div>'
 		);
 		var actual = axe.utils.getScroll(target.actualNode);
-		assert.isDefined(actual);
-		assert.hasAllKeys(actual, ['elm', 'top', 'left']);
-		assert.equal(actual.top, 0);
-		assert.equal(actual.left, 0);
+		assert.isUndefined(actual);
 	});
 
 	it('returns scroll offset when element overflow is auto', function() {

diff --git a/test/core/utils/scroll-state.js b/test/core/utils/scroll-state.js
@@ -53,7 +53,7 @@ describe('axe.utils.getScrollState', function() {
 		fixture.innerHTML =
 			'<div style="overflow:auto; height: 50px" id="tgt1">' +
 			'<div style="height: 100px"> Han Solo </div>' +
-			'<div style="overflow: hidden; height: 50px" id="tgt2">' +
+			'<div style="overflow: auto; height: 50px" id="tgt2">' +
 			'<div style="height: 100px"> Chewbacca </div>' +
 			'</div>' +
 			'</div>';

diff --git a/test/integration/rules/scrollable-region-focusable/scrollable-region-focusable.html b/test/integration/rules/scrollable-region-focusable/scrollable-region-focusable.html
@@ -1,9 +1,9 @@
 <!-- pass -->
-<div id="pass1" style="overflow: hidden; height: 5px;">
+<div id="pass1" style="overflow-y: scroll; height: 5px;">
 	<input type="text" />
 </div>
 
-<div id="pass2" style="height: 200px; overflow: hidden" tabindex="0">
+<div id="pass2" style="height: 200px; overflow-y: auto" tabindex="0">
 	<div style="height: 2000px">
 		<p>Content</p>
 	</div>
@@ -17,17 +17,11 @@
 </div>
 
 <!-- fail -->
-<div id="fail1" style="height: 200px; width: 200px; overflow: hidden">
-	<div style="height: 2000px; width: 100px;">
-		<p>Content</p>
-	</div>
-</div>
-
-<div id="fail2" style="height: 5px; overflow: auto;">
+<div id="fail1" style="height: 5px; overflow: auto;">
 	<input type="text" tabindex="-1" />
 </div>
 
-<div id="fail3" style="height: 5px; overflow: auto;">
+<div id="fail2" style="height: 5px; overflow: auto;">
 	<input type="text" tabindex="-1" />
 	<select tabindex="-1"></select>
 	<textarea tabindex="-1"></textarea>
@@ -68,3 +62,9 @@
 		<p>Content</p>
 	</div>
 </div>
+
+<div id="inapplicable6" style="height: 200px; width: 200px; overflow: hidden">
+	<div style="height: 2000px; width: 100px;">
+		<p>Content</p>
+	</div>
+</div>
diff --git a/test/integration/rules/scrollable-region-focusable/scrollable-region-focusable.json b/test/integration/rules/scrollable-region-focusable/scrollable-region-focusable.json
@@ -1,6 +1,6 @@
 {
 	"description": "scrollable-region-focusable tests",
 	"rule": "scrollable-region-focusable",
-	"violations": [["#fail1"], ["#fail2"], ["#fail3"]],
+	"violations": [["#fail1"], ["#fail2"]],
 	"passes": [["#pass1"], ["#pass2"], ["#pass3"]]
 }
diff --git a/test/rule-matches/scrollable-region-focusable-matches.js b/test/rule-matches/scrollable-region-focusable-matches.js
@@ -42,7 +42,7 @@ describe('scrollable-region-focusable-matches', function() {
 		assert.isFalse(actual);
 	});
 
-	it('returns true when element is scrollable (overflow=hidden)', function() {
+	it('returns false when element is not scrollable (overflow=hidden)', function() {
 		var target = queryFixture(
 			'<div id="target" style="height: 200px; width: 200px; overflow: hidden">' +
 				'<div style="height: 2000px; width: 100px; background-color: pink;">' +
@@ -51,7 +51,7 @@ describe('scrollable-region-focusable-matches', function() {
 				'</div>'
 		);
 		var actual = rule.matches(target.actualNode, target);
-		assert.isTrue(actual);
+		assert.isFalse(actual);
 	});
 
 	it('returns true when element is scrollable (overflow=auto)', function() {