[tracing] Add keyboard navigation to the tab view

tracing/tracing/ui/base/tab_view.html

Index: tracing/tracing/ui/base/tab_view.html
diff --git a/tracing/tracing/ui/base/tab_view.html b/tracing/tracing/ui/base/tab_view.html
index 08a15c61d1e1eb8b34faa41a0a8ef5a2a5e20b2b..4857da85e69f6657bcf583e7d6ac2e4dff911122 100644
--- a/tracing/tracing/ui/base/tab_view.html
+++ b/tracing/tracing/ui/base/tab_view.html
@@ -60,6 +60,11 @@ and limit users to having one option selected at a time.
         font-weight: bold;
       }
 
+      #tabs:focus input[type=radio]:checked ~ label {
+        outline: dotted 1px #8e8e8e;
+        outline-offset: -2px;
+      }
+
       #tabs input[type=radio]:checked ~ label {
         background-color: white;
         border: 1px solid #8e8e8e;
@@ -110,10 +115,16 @@ Polymer({
     },
     tabsHidden: {
       type: Boolean,
-      value: false
+      value: false,
+      observer: 'tabsHiddenChanged_'
     }
   },
 
+  ready: function() {
+    this.$.tabs.addEventListener('keydown', this.onKeyDown_.bind(this), true);
+    this.updateFocusability_();
+  },
+
   set label(newLabel) {
     this.set('label_', newLabel);
   },
@@ -144,6 +155,7 @@ Polymer({
   clearSubViews: function() {
     this.splice('subViews_', 0, this.subViews_.length);
     this.selectedSubView = undefined;
+    this.updateFocusability_();
   },
 
   addSubView: function(subView) {
@@ -151,6 +163,7 @@ Polymer({
       this.selectedSubView = subView;
 
     this.push('subViews_', subView);
+    this.updateFocusability_();
   },
 
   resetSubViews: function(subViews) {
@@ -163,6 +176,7 @@ Polymer({
     else {
       this.selectedSubView = undefined;
     }
+    this.updateFocusability_();
   },
 
   onTabChanged_: function(event) {
@@ -173,6 +187,50 @@ Polymer({
     return this.selectedSubView_ === subView;
   },
 
+  tabsHiddenChanged_: function() {
+    this.updateFocusability_();
+  },
+
+  onKeyDown_: function(e) {
+    if (this.tabsHidden || !this.selectedSubView_)
+      return;
+
+    var currentIndex = this.subViews_.indexOf(this.selectedSubView_);
+    var nextIndex = undefined;
+    switch (e.keyCode) {
+      // Arrow left.
+      case 37:
+        nextIndex = currentIndex - 1;
+        break;
+      // Arrow right.
+      case 39:
+        nextIndex = currentIndex + 1;
+        break;
+    }
+
+    if (nextIndex === undefined)

[petrcermak, 2016/09/28 17:26:30]

this should be a `default` case in the `switch` statement above instead.

[hjd, 2016/09/29 10:06:51]

Done.

+      return;
+
+    var tab = Polymer.dom(this.root).querySelectorAll('#tabs tab')[nextIndex];
+    if (tab)
+      tab.querySelector('input').click();
+
+    e.stopPropagation();
+    e.preventDefault();
+  },
+
+  shouldBeFocusable_: function() {
+    return !this.tabsHidden && this.subViews_.length > 0;
+  },
+
+  updateFocusability_: function() {
+    if (this.shouldBeFocusable_()) {
+      Polymer.dom(this.$.tabs).setAttribute('tabindex', 0);
+    } else {
+      Polymer.dom(this.$.tabs).removeAttribute('tabindex');
+    }
+  },
+
   computeRadioId_: function(subView) {
     // We can't just use the tagName as the radio's ID because there are
     // instances where a single subview type can handle multiple event types,