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..9ce6c3383454b95d306d0149dad83f9bf9ef27a7 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,49 @@ 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; |
+ default: |
+ 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, |