fix(commons/dom): fix isFocusable functions by checking screenreader (#…

…658) visibility and enabledness Adds tests for disabled/AT-hidden elements with tabindex fixes #647
dequelabs · Dec 21, 2017 · c665d0b · c665d0b
1 parent 9e8a310
commit c665d0b
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 7 deletions.
diff --git a/lib/commons/dom/is-focusable.js b/lib/commons/dom/is-focusable.js
@@ -1,5 +1,16 @@
 /* global dom */
 /* jshint maxcomplexity: 20 */
+
+/**
+ * Determines if focusing has been disabled on an element.
+ * @param {HTMLElement} el The HTMLElement
+ * @return {Boolean} Whether focusing has been disabled on an element.
+ */
+function focusDisabled(el) {
+	return el.disabled ||
+		(!dom.isVisible(el, true) && el.nodeName.toUpperCase() !== 'AREA');
+}
+
 /**
  * Determines if an element is focusable
  * @method isFocusable
@@ -11,8 +22,9 @@
 
 dom.isFocusable = function (el) {
 	'use strict';
-
-	if (dom.isNativelyFocusable(el)) {
+	if (focusDisabled(el)) {
+		return false;
+	} else if (dom.isNativelyFocusable(el)) {
 		return true;
 	}
 	// check if the tabindex is specified and a parseable number
@@ -36,9 +48,8 @@ dom.isFocusable = function (el) {
 dom.isNativelyFocusable = function(el) {
 	'use strict';
 
-	if (!el ||
-		el.disabled ||
-		(!dom.isVisible(el) && el.nodeName.toUpperCase() !== 'AREA')) {
+	if (!el || focusDisabled(el)) {
+
 		return false;
 	}
 

diff --git a/test/commons/dom/is-focusable.js b/test/commons/dom/is-focusable.js
@@ -56,6 +56,30 @@ describe('dom.isFocusable', function () {
 
 	});
 
+	it('should return false for hidden inputs with tabindex', function () {
+		fixture.innerHTML = '<input type="hidden" tabindex="1" id="target">';
+		var el = document.getElementById('target');
+
+		assert.isFalse(axe.commons.dom.isFocusable(el));
+
+	});
+
+	it('should return false for hidden buttons with tabindex', function () {
+		fixture.innerHTML = '<button style="visibility:hidden" tabindex="0" id="target"></button>';
+		var el = document.getElementById('target');
+
+		assert.isFalse(axe.commons.dom.isFocusable(el));
+
+	});
+
+	it('should return false for disabled buttons with tabindex', function () {
+		fixture.innerHTML = '<button tabindex="0" id="target" disabled></button>';
+		var el = document.getElementById('target');
+
+		assert.isFalse(axe.commons.dom.isFocusable(el));
+
+	});
+
 	it('should return false for non-visible elements', function () {
 		fixture.innerHTML = '<input type="text" id="target" style="display: none">';
 		var el = document.getElementById('target');

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,106 @@ 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 false for hidden inputs with tabindex', function () {
+		fixture.innerHTML = '<input type="hidden" tabindex="1" id="target">';
+		var el = document.getElementById('target');
+
+		assert.isFalse(axe.commons.dom.isFocusable(el));
+
+	});
+
+	it('should return false for disabled inputs with tabindex', function () {
+		fixture.innerHTML = '<input tabindex="1" id="target" disabled>';
+		var el = document.getElementById('target');
+
+		assert.isFalse(axe.commons.dom.isFocusable(el));
+
+	});
+
+	it('should return false for hidden buttons with tabindex', function () {
+		fixture.innerHTML = '<button style="visibility:hidden" tabindex="0" id="target"></button>';
+		var el = document.getElementById('target');
+
+		assert.isFalse(axe.commons.dom.isFocusable(el));
+
+	});
+
+	it('should return false for disabled buttons with tabindex', function () {
+		fixture.innerHTML = '<button tabindex="0" id="target" disabled></button>';
+		var el = document.getElementById('target');
+
+		assert.isFalse(axe.commons.dom.isFocusable(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');