Merge pull request #14808 from nextcloud/fix/personal-settings-fed-scope-tabindex

Fix personal settings fed scope tabindex

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;

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/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'));

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>

settings/templates/settings/personal/personal.info.php

@@ -40,7 +40,7 @@ script('settings', [
 			<form id="avatarform" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>">
 				<h3>
 					<label><?php p($l->t('Profile picture')); ?></label>
-					<div class="federation-menu">
+					<div class="federation-menu" tabindex="0">
 						<span class="icon-federation-menu icon-password">
 							<span class="icon-triangle-s"></span>
 						</span>
@@ -102,7 +102,7 @@ script('settings', [
 			<form id="displaynameform" class="section">
 				<h3>
 					<label for="displayname"><?php p($l->t('Full name')); ?></label>
-					<div class="federation-menu">
+					<div class="federation-menu" tabindex="0">
 						<span class="icon-federation-menu icon-password">
 							<span class="icon-triangle-s"></span>
 						</span>
@@ -126,7 +126,7 @@ script('settings', [
 			<form id="emailform" class="section">
 				<h3>
 					<label for="email"><?php p($l->t('Email')); ?></label>
-					<div class="federation-menu">
+					<div class="federation-menu" tabindex="0">
 						<span class="icon-federation-menu icon-password">
 							<span class="icon-triangle-s"></span>
 						</span>
@@ -169,7 +169,7 @@ script('settings', [
 			<form id="phoneform" class="section">
 				<h3>
 					<label for="phone"><?php p($l->t('Phone number')); ?></label>
-					<div class="federation-menu">
+					<div class="federation-menu" tabindex="0">
 						<span class="icon-federation-menu icon-password">
 							<span class="icon-triangle-s"></span>
 						</span>
@@ -191,7 +191,7 @@ script('settings', [
 			<form id="addressform" class="section">
 				<h3>
 					<label for="address"><?php p($l->t('Address')); ?></label>
-					<div class="federation-menu">
+					<div class="federation-menu" tabindex="0">
 						<span class="icon-federation-menu icon-password">
 							<span class="icon-triangle-s"></span>
 						</span>
@@ -213,7 +213,7 @@ script('settings', [
 			<form id="websiteform" class="section">
 				<h3>
 					<label for="website"><?php p($l->t('Website')); ?></label>
-					<div class="federation-menu">
+					<div class="federation-menu" tabindex="0">
 						<span class="icon-federation-menu icon-password">
 							<span class="icon-triangle-s"></span>
 						</span>
@@ -262,7 +262,7 @@ script('settings', [
 			<form id="twitterform" class="section">
 				<h3>
 					<label for="twitter"><?php p($l->t('Twitter')); ?></label>
-					<div class="federation-menu">
+					<div class="federation-menu" tabindex="0">
 						<span class="icon-federation-menu icon-password">
 							<span class="icon-triangle-s"></span>
 						</span>