demo

commit: 0a0d8c1e946f84fa8b06447c128ebe0e3b673ccb
parent: f6ec4bafca35cab7f1ad5228b1a4b49e717b0fc0
Author: Haelwenn (lanodan) Monnier <contact@hacktivis.me>
Date:   Sat, 13 Apr 2019 18:45:45 +0200

sorttable/sorttable.js: Add keydown event for accessibility

Diffstat:
M
sorttable/sorttable.js
20
+++++++++++---------

1 file changed, 11 insertions(+), 9 deletions(-)
diff --git a/sorttable/sorttable.js b/sorttable/sorttable.js
@@ -36,22 +36,24 @@ sorttable = {
 			 // make it clickable to sort
 			 headrow[i].sorttable_columnindex = i;
 			 headrow[i].sorttable_tbody       = table.tBodies[0];
-			 headrow[i].addEventListener("click", sorttable.innerSortFunction);
+			 headrow[i].addEventListener("click", event => { if(event.target){ sorttable.innerSortFunction(event.target) } });
+			 headrow[i].addEventListener("keydown", event => { if(event.target && (event.key && event.key == "Enter")){ sorttable.innerSortFunction(event.target); } });
+			 headrow[i].setAttribute("tabindex", "0");
 			 headrow[i].classList.add('made_sortable');
 		 }
 	 }
 	},
 
-	innerSortFunction : function(e) {
-	 if (this.classList.contains("sorttable_sorted")) {
-		 sorttable.reverse(this.sorttable_tbody);
-		 this.classList.replace('sorttable_sorted', 'sorttable_sorted_reverse');
-	 } else if (this.classList.contains("sorttable_sorted_reverse")) {
-		 sorttable.reverse(this.sorttable_tbody);
-		 this.classList.replace('sorttable_sorted_reverse', 'sorttable_sorted');
+	innerSortFunction : function(tr) {
+	 if (tr.classList.contains("sorttable_sorted")) {
+		 sorttable.reverse(tr.sorttable_tbody);
+		 tr.classList.replace('sorttable_sorted', 'sorttable_sorted_reverse');
+	 } else if (tr.classList.contains("sorttable_sorted_reverse")) {
+		 sorttable.reverse(tr.sorttable_tbody);
+		 tr.classList.replace('sorttable_sorted_reverse', 'sorttable_sorted');
 	 } else {
 		 // remove sorttable_sorted classes
-		 theadRow = this.parentNode;
+		 theadRow = tr.parentNode;
 		 theadRow.childNodes.forEach(function(cell) {
 			 cell.classList.remove('sorttable_sorted_reverse', 'sorttable_sorted');
 		 });