diff options
| author | Morris Jobke <hey@morrisjobke.de> | 2018-06-26 08:03:45 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-06-26 08:03:45 +0200 |
| commit | a17750df7e2062486e68bbe82db5757d30ea4575 (patch) | |
| tree | 2b03f343bef2d563a1316e6e55d99fab01eb6d50 | |
| parent | d6113990279eb3651c7a0dd0f516e18385b89bf0 (diff) | |
| parent | 4e1feb5c7bffd7cd581ef426b3add6d9ccc7dc89 (diff) | |
| download | nextcloud-server-a17750df7e2062486e68bbe82db5757d30ea4575.tar.gz nextcloud-server-a17750df7e2062486e68bbe82db5757d30ea4575.zip | |
Merge pull request #9956 from kevgathuku/enable-outline
Add focus indicator to File Details tabs view
| -rw-r--r-- | apps/files/js/detailsview.js | 14 | ||||
| -rw-r--r-- | core/css/apps.scss | 14 |
2 files changed, 13 insertions, 15 deletions
diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js index 7bfc3d5ad7b..7e2a5f0e8a9 100644 --- a/apps/files/js/detailsview.js +++ b/apps/files/js/detailsview.js @@ -15,8 +15,8 @@ ' {{#if tabHeaders}}' + ' <ul class="tabHeaders">' + ' {{#each tabHeaders}}' + - ' <li class="tabHeader" data-tabid="{{tabId}}" data-tabindex="{{tabIndex}}">' + - ' <a href="#">{{label}}</a>' + + ' <li class="tabHeader" data-tabid="{{tabId}}" tabindex="0">' + + ' <a href="#" tabindex="-1">{{label}}</a>' + ' </li>' + ' {{/each}}' + ' </ul>' + @@ -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 fd2e92773e5..13b4c7eb9fc 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -764,7 +764,7 @@ kbd { margin: 15px; .tabHeader { float: left; - padding: 5px; + padding: 12px; cursor: pointer; color: var(--color-text-lighter); margin-bottom: 1px; @@ -774,21 +774,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); } } } |