diff --git a/settings/css/settings.scss b/settings/css/settings.scss index 42d6f285aa..8d38e71460 100644 --- a/settings/css/settings.scss +++ b/settings/css/settings.scss @@ -300,6 +300,11 @@ select { position: relative; cursor: pointer; margin-left: 10px; + &:focus { + .icon-federation-menu { + opacity: 0.7; + } + } .icon-federation-menu { padding-left: 16px; background-size: 16px; diff --git a/settings/js/federationscopemenu.js b/settings/js/federationscopemenu.js index e55b26198e..29303258c9 100644 --- a/settings/js/federationscopemenu.js +++ b/settings/js/federationscopemenu.js @@ -57,7 +57,8 @@ _context: null, events: { - 'click a.action': '_onClickAction' + 'click a.action': '_onSelectScope', + 'keydown a.action': '_onSelectScopeKeyboard' }, /** @@ -65,7 +66,7 @@ * * @param {Object} event event object */ - _onClickAction: function(event) { + _onSelectScope: function(event) { var $target = $(event.currentTarget); if (!$target.hasClass('menuitem')) { $target = $target.closest('.menuitem'); @@ -76,6 +77,14 @@ OC.hideMenus(); }, + _onSelectScopeKeyboard: function(event) { + if (event.keyCode === 13 || event.keyCode === 32) { + // Enter and space can be used to select a scope + event.preventDefault(); + this._onSelectScope(event); + } + }, + /** * Renders the menu with the currently set items */ diff --git a/settings/js/federationsettingsview.js b/settings/js/federationsettingsview.js index e2781833ed..9cefaf132f 100644 --- a/settings/js/federationsettingsview.js +++ b/settings/js/federationsettingsview.js @@ -70,6 +70,16 @@ }); $icon.append(scopeMenu.$el); $icon.on('click', _.bind(scopeMenu.show, scopeMenu)); + $icon.on('keydown', function(e) { + if (e.keyCode === 32) { + // Open the menu when the user presses the space bar + e.preventDefault(); + scopeMenu.show(e); + } else if (e.keyCode === 27) { + // Close the menu again if opened + OC.hideMenus(); + } + }.bind(this)); // Restore initial state self._setFieldScopeIcon(field, self._config.get(field + 'Scope')); diff --git a/settings/js/templates.js b/settings/js/templates.js index 10c671bad6..7ab08db206 100644 --- a/settings/js/templates.js +++ b/settings/js/templates.js @@ -3,7 +3,7 @@ templates['federationscopemenu'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression; - return "