diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js index 7bfc3d5ad7..7e2a5f0e8a 100644 --- a/apps/files/js/detailsview.js +++ b/apps/files/js/detailsview.js @@ -15,8 +15,8 @@ ' {{#if tabHeaders}}' + '
' + @@ -67,7 +67,8 @@ events: { 'click a.close': '_onClose', - 'click .tabHeaders .tabHeader': '_onClickTab' + 'click .tabHeaders .tabHeader': '_onClickTab', + 'keyup .tabHeaders .tabHeader': '_onKeyboardActivateTab' }, /** @@ -99,6 +100,12 @@ this.selectTab(tabId); }, + _onKeyboardActivateTab: function (event) { + if (event.key === " " || event.key === "Enter") { + this._onClickTab(event); + } + }, + template: function(vars) { if (!this._template) { this._template = Handlebars.compile(TEMPLATE); @@ -126,7 +133,6 @@ templateVars.tabHeaders = _.map(this._tabViews, function(tabView, i) { return { tabId: tabView.id, - tabIndex: i, label: tabView.getLabel() }; }); diff --git a/core/css/apps.scss b/core/css/apps.scss index 702ab5d75b..4e1504ed60 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -768,7 +768,7 @@ kbd { margin: 15px; .tabHeader { float: left; - padding: 5px; + padding: 12px; cursor: pointer; color: var(--color-text-lighter); margin-bottom: 1px; @@ -778,21 +778,13 @@ kbd { } &.selected { font-weight: 600; - border-bottom: 1px solid var(--color-border); - } - &:hover, - &:focus { - border-bottom: 1px solid var(--color-border); } &.selected, - &:hover + &:hover, &:focus { margin-bottom: 0px; color: var(--color-main-text); - a { - margin-bottom: 0px; - color: var(--color-main-text); - } + border-bottom: 1px solid var(--color-text-lighter); } } }