Make the federation scope selectable via keyboard

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>

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
 		 */

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 "		<li>\n			<a href=\"#\" class=\"menuitem action action-"
+  return "		<li tabindex=\"0\">\n			<a href=\"#\" class=\"menuitem action action-"
     + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
     + " permanent "
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.active : depth0),{"name":"if","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")

settings/js/templates/federationscopemenu.handlebars

@@ -1,6 +1,6 @@
 <ul>
 	{{#each items}}
-		<li>
+		<li tabindex="0">
 			<a href="#" class="menuitem action action-{{name}} permanent {{#if active}}active{{/if}}" data-action="{{name}}">
 				{{#if iconClass}}
 					<span class="icon {{iconClass}}"></span>