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

brizental · Jun 29, 2017 · dbb430b · dbb430b
1 parent 36960a7
commit dbb430b
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 14 deletions.
diff --git a/webcompat/static/css/development/components/label-editor.css b/webcompat/static/css/development/components/label-editor.css
@@ -87,6 +87,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;
@@ -117,6 +123,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,12 @@ 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-search": "focusSaveClose",
+    "keydown .wc-LabelEditor-list-item": "removeFocus",
+    "keydown .wc-LabelEditor-list-item:visible:last": "backToTop"
   },
   keyboardEvents: {
     esc: "closeEditor"
@@ -180,16 +185,28 @@ 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) {
+    setTimeout(function() {
+      if (e.keyCode === 13) {
+        $(".wc-LabelEditor-list-item:visible:first").focus();
+        // if you call the focus() function in a label element,'
+        // the focus automatically goes to the input.
+        // that's why we need to add the focused class.
+        $(".wc-LabelEditor-list-item:visible:first").addClass("focused");
+      }
+    }, 100);
+
     var escape = function(s) {
       return s.replace(/[-\/\\^$*+?:.()|[\]{}]/g, "\\$&");
     };
@@ -207,5 +224,27 @@ issues.LabelEditorView = Backbone.View.extend({
         .closest(".wc-LabelEditor-list-item")
         .hide();
     });
-  }, 100)
+  }, 100),
+  checkUncheckLabels: _.debounce(function(e) {
+    if (e.keyCode === 13) {
+      $(e.target).click();
+      $(e.target).addClass("focused");
+    }
+  }, 100),
+  focusSaveClose: _.debounce(function(e) {
+    if (e.keyCode === 9) {
+      // Safari workaround.
+      $(".wc-LabelEditor-button.r-ResetButton").focus();
+    }
+  }, 1),
+  removeFocus: _.debounce(function(e) {
+    if (e.keyCode === 9) {
+      $(e.target).closest("label").removeClass("focused");
+    }
+  }, 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>