Fixes webcompat#1489 - Adds keyboard navigation to the label editor.

brizental · Apr 27, 2017 · 2ff3b3f · 2ff3b3f
1 parent de711fc
commit 2ff3b3f
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 15 deletions.
diff --git a/webcompat/static/css/development/components/label-editor.css b/webcompat/static/css/development/components/label-editor.css
@@ -88,6 +88,12 @@
       text-decoration:underline;
     }
 
+    .wc-LabelEditor-button:focus {
+      outline-width: 2px;
+      outline-style: solid;
+      outline-color: Highlight;
+    }
+
   /* list label */
   .wc-LabelEditor-list {
     background-color: #FFF;
@@ -119,6 +125,15 @@
           border-bottom:1px solid #ddd;
       }
 
+      /* event */
+      .wc-LabelEditor--list-item:focus,
+      .wc-LabelEditor--list-item:hover,
+      .wc-LabelEditor--list-item:active {
+          outline-width: 2px;
+          outline-style: solid;
+          outline-color: Highlight;
+      }
+
     /* square color */
     .wc-LabelEditor-list-item-squareColor {
       display: inline-block;

diff --git a/webcompat/static/js/lib/labels.js b/webcompat/static/js/lib/labels.js
@@ -92,7 +92,10 @@ issues.LabelEditorView = Backbone.View.extend({
   events: {
     "change input[type=checkbox]": "updateView",
     "click button": "closeEditor",
-    "keyup .wc-LabelEditor-search": "filterLabels"
+    "keyup": "closeEditor",    
+    "keyup .wc-LabelEditor-search": "filterLabels",
+    "keyup .wc-LabelEditor-list-item": "checkUncheckLabels",
+    "keydown .wc-LabelEditor-list-item:visible:last": "backToTop"
   },
   keyboardEvents: {
     esc: "closeEditor"
@@ -156,7 +159,8 @@ issues.LabelEditorView = Backbone.View.extend({
     // the others.
     var checked;
     if (
-      $(evt.target).data("remotename").match(/^status/) && evt.target.checked
+      $(evt.target).data("remotename").match(/^status/) &&
+      evt.target.checked
     ) {
       checked = $('input[type=checkbox][data-remotename^="status"]:checked');
       _.each(checked, function(item) {
@@ -178,14 +182,16 @@ issues.LabelEditorView = Backbone.View.extend({
     });
     this.reRender({ labels: _.uniq(modelUpdate) });
   },
-  closeEditor: function() {
-    var checked = $("input[type=checkbox]:checked");
-    var labelsArray = _.pluck(checked, "name");
-    this.issueView.editorButton.removeClass("is-active");
-    this.issueView.model.updateLabels(labelsArray);
-    // detach() (vs remove()) here because we don't want to lose events if the
-    // user reopens the editor.
-    this.$el.children().detach();
+  closeEditor: function(e) {
+    if (e.keyCode === 27 || e.keyCode === undefined) {
+      var checked = $("input[type=checkbox]:checked");
+      var labelsArray = _.pluck(checked, "name");
+      this.issueView.editorButton.removeClass("is-active");
+      this.issueView.model.updateLabels(labelsArray);
+      // detach() (vs remove()) here because we don't want to lose events if the
+      // user reopens the editor.
+      this.$el.children().detach();
+    }
   },
   filterLabels: _.debounce(function(e) {
     var escape = function(s) {
@@ -205,5 +211,15 @@ issues.LabelEditorView = Backbone.View.extend({
         .closest(".wc-LabelEditor-list-item")
         .hide();
     });
-  }, 100)
+  }, 100),
+  checkUncheckLabels: _.debounce(function(e) {
+    if (e.keyCode === 13) {
+      $(e.target).find("input").click();
+    }
+  }, 100),
+  backToTop: _.debounce(function(e) {
+    if (e.keyCode === 9) {
+      this.$el.find(".wc-LabelEditor-search").focus();
+    }
+  }, 1)
 });
diff --git a/webcompat/templates/web_modules/label-editor.html b/webcompat/templates/web_modules/label-editor.html
@@ -1,13 +1,13 @@
 <script type="text/template" id="label-editor-tmpl">
   <div class="wc-LabelEditor-header">
     <input class="form-control wc-LabelEditor-search" placeholder="filter label">
-      <button class="wc-LabelEditor-button r-ResetButton">Save &amp; Close</button>
+    <button class="wc-LabelEditor-button r-ResetButton" tabindex="0">Save &amp; Close</button>
   </div>
-  <div class="wc-LabelEditor-list">
+  <div class="wc-LabelEditor-list" tabindex="-1">
     <% _.each(labels, function(label) { %>
-      <label class="wc-LabelEditor-list-item">
+      <label class="wc-LabelEditor-list-item" tabindex="0">
         <span class="wc-LabelEditor-list-item-squareColor" style="background-color:#<%=label.color%>">
-          <input class="wc-LabelEditor-list-item-checkbox" type="checkbox" name="<%= label.name %>" data-color="<%=label.color%>" data-remotename="<%= label.remoteName %>">
+          <input class="wc-LabelEditor-list-item-checkbox" type="checkbox" name="<%= label.name %>" data-color="<%=label.color%>" data-remotename="<%= label.remoteName %>" tabindex="-1">
         </span>
         <span class="wc-LabelEditor-list-item-name"><%= label.name %></span>
       </label>