fix(commons/dom): change isFocusable to check visibility in screenreader

mode fixes #647
dequelabs · Dec 15, 2017 · 1610a82 · 1610a82
1 parent 9e3ca45
commit 1610a82
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 3 deletions.
diff --git a/lib/commons/dom/is-focusable.js b/lib/commons/dom/is-focusable.js
@@ -38,7 +38,7 @@ dom.isNativelyFocusable = function(el) {
 
 	if (!el ||
 		el.disabled ||
-		(!dom.isVisible(el) && el.nodeName.toUpperCase() !== 'AREA')) {
+		(!dom.isVisible(el, true) && el.nodeName.toUpperCase() !== 'AREA')) {
 		return false;
 	}
 

diff --git a/test/commons/dom/is-natively-focusable.js b/test/commons/dom/is-natively-focusable.js
@@ -3,6 +3,21 @@ describe('dom.isNativelyFocusable', function () {
 
 	var fixture = document.getElementById('fixture');
 
+	function hideByClipping (el) {
+		el.style.cssText = 'position: absolute !important;' +
+			' clip: rect(0px 0px 0px 0px); /* IE6, IE7 */' +
+			' clip: rect(0px, 0px, 0px, 0px);';
+	}
+
+	function hideByMovingOffScreen (el) {
+		el.style.cssText = 'position:absolute;' +
+			' left:-10000px;' +
+			' top:auto;' +
+			' width:1px;' +
+			' height:1px;' +
+			' overflow:hidden;';
+	}
+
 	afterEach(function () {
 		document.getElementById('fixture').innerHTML = '';
 	});
@@ -72,14 +87,74 @@ describe('dom.isNativelyFocusable', function () {
 
 	});
 
-	it('should return false for non-visible elements', function () {
-		fixture.innerHTML = '<input type="text" id="target" style="display: none">';
+	it('should return false for elements hidden with display:none', function () {
+		fixture.innerHTML = '<button id="target" style="display: none">button</button>';
 		var el = document.getElementById('target');
 
 		assert.isFalse(axe.commons.dom.isNativelyFocusable(el));
 
 	});
 
+	it('should return false for elements hidden with visibility:hidden', function () {
+		fixture.innerHTML = '<button id="target" style="visibility: hidden">button</button>';
+		var el = document.getElementById('target');
+
+		assert.isFalse(axe.commons.dom.isNativelyFocusable(el));
+
+	});
+
+	it('should return true for clipped elements', function () {
+		fixture.innerHTML = '<button id="target">button</button>';
+		var el = document.getElementById('target');
+		hideByClipping(el);
+
+		assert.isTrue(axe.commons.dom.isNativelyFocusable(el));
+
+	});
+
+	it('should return true for elements positioned off screen', function () {
+		fixture.innerHTML = '<button id="target">button</button>';
+		var el = document.getElementById('target');
+		hideByMovingOffScreen(el);
+
+		assert.isTrue(axe.commons.dom.isNativelyFocusable(el));
+
+	});
+
+	it('should return false for elements hidden with display:none on an ancestor', function () {
+		fixture.innerHTML = '<div id="parent" style="display:none"><button id="target">button</button></div>';
+		var el = document.getElementById('target');
+
+		assert.isFalse(axe.commons.dom.isNativelyFocusable(el));
+
+	});
+
+	it('should return false for elements hidden with visibility:hidden on an ancestor', function () {
+		fixture.innerHTML = '<div id="parent" style="visibility: hidden"><button id="target">button</button></div>';
+		var el = document.getElementById('target');
+
+		assert.isFalse(axe.commons.dom.isNativelyFocusable(el));
+
+	});
+
+	it('should return true for elements with a clipped ancestor', function () {
+		fixture.innerHTML = '<div id="parent"><button id="target">button</button></div>';
+		hideByClipping(document.getElementById('parent'));
+		var el = document.getElementById('target');
+
+		assert.isTrue(axe.commons.dom.isNativelyFocusable(el));
+
+	});
+
+	it('should return true for elements off-screened by an ancestor', function () {
+		fixture.innerHTML = '<div id="parent"><button id="target">button</button></div>';
+		hideByMovingOffScreen(document.getElementById('parent'));
+		var el = document.getElementById('target');
+
+		assert.isTrue(axe.commons.dom.isNativelyFocusable(el));
+
+	});
+
 	it('should return true for an anchor with an href', function () {
 		fixture.innerHTML = '<a href="something.html" id="target"></a>';
 		var el = document.getElementById('target');