feat(a11y): Making the accordions work via keyboard navigation.

mportuga · Nov 20, 2016 · 385e61f · 385e61f
1 parent d82a112
commit 385e61f
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 21 deletions.
diff --git a/example/example-report.html b/example/example-report.html
@@ -1367,17 +1367,23 @@ <h3 class="page-header">All Rules</h3>
 	// accordion
 	lintResults.forEach(function setUpAccordion(result) {
 		if (!result.className.includes('bg-success')) {
-			result.addEventListener('click', function() {
-				var inGroup = document.getElementsByClassName(this.getAttribute('data-group'));
-
-				this.className = this.className.includes('open') ? this.className.replace(' open', '') : this.className + ' open';
-				for (var j = 0; j < inGroup.length; j++) {
-					inGroup[j].style.display = (inGroup[j].style.display !== 'none') ? 'none' : 'table-row';
+			result.setAttribute('tabindex', 0);
+			result.addEventListener('click', toggleAccordion);
+			result.addEventListener('keydown', function(event) {
+				if (event.which === 13) {
+					toggleAccordion.apply(this);
 				}
 			});
 		}
 	});
 
+	function toggleAccordion() {
+		var resultDetails = document.getElementsByClassName(this.getAttribute('data-group'));
+
+		this.className = this.className.includes('open') ? this.className.replace(' open', '') : this.className + ' open';
+		resultDetails[0].style.display = resultDetails[0].style.display !== 'none' ? 'none' : 'table-row';
+	}
+
 	// filter
 	filters.forEach(function addChangeListener(filter) {
 		filter.addEventListener('change', filterResults);
@@ -1404,7 +1410,7 @@ <h3 class="page-header">All Rules</h3>
 		currentTabs.forEach(disableTabs);
 		tabPanes.forEach(hideElement);
 		this.parentNode.className = 'active';
-		tabContent.style.display = (tabContent.style.display !== 'none') ? 'none' : 'block';
+		toggleDisplay(tabContent);
 	}
 
 	function disableTabs(tab) {

diff --git a/example/success-report.html b/example/success-report.html
@@ -389,17 +389,23 @@ <h2 class="page-header">Details</h2>
 	// accordion
 	lintResults.forEach(function setUpAccordion(result) {
 		if (!result.className.includes('bg-success')) {
-			result.addEventListener('click', function() {
-				var inGroup = document.getElementsByClassName(this.getAttribute('data-group'));
-
-				this.className = this.className.includes('open') ? this.className.replace(' open', '') : this.className + ' open';
-				for (var j = 0; j < inGroup.length; j++) {
-					inGroup[j].style.display = (inGroup[j].style.display !== 'none') ? 'none' : 'table-row';
+			result.setAttribute('tabindex', 0);
+			result.addEventListener('click', toggleAccordion);
+			result.addEventListener('keydown', function(event) {
+				if (event.which === 13) {
+					toggleAccordion.apply(this);
 				}
 			});
 		}
 	});
 
+	function toggleAccordion() {
+		var resultDetails = document.getElementsByClassName(this.getAttribute('data-group'));
+
+		this.className = this.className.includes('open') ? this.className.replace(' open', '') : this.className + ' open';
+		resultDetails[0].style.display = resultDetails[0].style.display !== 'none' ? 'none' : 'table-row';
+	}
+
 	// filter
 	filters.forEach(function addChangeListener(filter) {
 		filter.addEventListener('change', filterResults);
@@ -426,7 +432,7 @@ <h2 class="page-header">Details</h2>
 		currentTabs.forEach(disableTabs);
 		tabPanes.forEach(hideElement);
 		this.parentNode.className = 'active';
-		tabContent.style.display = (tabContent.style.display !== 'none') ? 'none' : 'block';
+		toggleDisplay(tabContent);
 	}
 
 	function disableTabs(tab) {

diff --git a/lib/helpers/scripts.html b/lib/helpers/scripts.html
@@ -15,17 +15,23 @@
 	// accordion
 	lintResults.forEach(function setUpAccordion(result) {
 		if (!result.className.includes('bg-success')) {
-			result.addEventListener('click', function() {
-				var inGroup = document.getElementsByClassName(this.getAttribute('data-group'));
-
-				this.className = this.className.includes('open') ? this.className.replace(' open', '') : this.className + ' open';
-				for (var j = 0; j < inGroup.length; j++) {
-					inGroup[j].style.display = (inGroup[j].style.display !== 'none') ? 'none' : 'table-row';
+			result.setAttribute('tabindex', 0);
+			result.addEventListener('click', toggleAccordion);
+			result.addEventListener('keydown', function(event) {
+				if (event.which === 13) {
+					toggleAccordion.apply(this);
 				}
 			});
 		}
 	});
 
+	function toggleAccordion() {
+		var resultDetails = document.getElementsByClassName(this.getAttribute('data-group'));
+
+		this.className = this.className.includes('open') ? this.className.replace(' open', '') : this.className + ' open';
+		resultDetails[0].style.display = resultDetails[0].style.display !== 'none' ? 'none' : 'table-row';
+	}
+
 	// filter
 	filters.forEach(function addChangeListener(filter) {
 		filter.addEventListener('change', filterResults);
@@ -52,7 +58,7 @@
 		currentTabs.forEach(disableTabs);
 		tabPanes.forEach(hideElement);
 		this.parentNode.className = 'active';
-		tabContent.style.display = (tabContent.style.display !== 'none') ? 'none' : 'block';
+		toggleDisplay(tabContent);
 	}
 
 	function disableTabs(tab) {