filter tabs with keys

css/styles1.css

@@ -32,7 +32,8 @@ input[type='image']:focus,
 h1:focus, h2:focus, h3:focus,
 .esriOverviewMap:focus,
 .esriSimpleSliderIncrementButton:focus, .esriSimpleSliderDecrementButton:focus,
-h3[tabindex='0']:focus
+h3[tabindex='0']:focus,
+.tab label span:focus
 {
     /*outline-width: 2px;
     outline-offset: -2px;

js/Filters/FilterTab.js

@@ -42,6 +42,13 @@ define([
              }));
         },
 
+        filterKeyPress: function(btn) {
+            // console.log(btn, btn.currentTarget.parentElement);
+            if(btn.keyCode == 13 || btn.keyCode == 32) {
+                btn.currentTarget.parentElement.click();
+            }
+        },
+
         filterChange: function(ev) {
              var pageId = ev.target.value;
 //             console.log(page, ev);

js/Filters/Templates/FilterTab.html

@@ -2,7 +2,7 @@
 	<div class="tab">
 	    <input id="${id}_btn" type="radio" name="tabsGroup" ${checked} data-dojo-attach-event="onchange: filterChange" value="${id}_page" data-dojo-attach-point="btn">
 	    <label for="${id}_btn" aria-label="${filter_name}">
-	   		<span tabindex=0>${filter_name}</span>
+	   		<span tabindex=0 data-dojo-attach-event="onkeypress: filterKeyPress">${filter_name}</span>
 			<img src="images/set.png" class="setIndicator" style="display:none; left:-4px;"
 			     data-dojo-attach-point="setIndicator" 
 			     Alt="Some Filters Apply" title="Some Filters Apply"