From f127de0ab2bf94c985a173ae21c99d9c72b8f858 Mon Sep 17 00:00:00 2001
From: Christoph Wurst <christoph@winzerhof-wurst.at>
Date: Fri, 22 Mar 2019 11:51:48 +0100
Subject: Fix tabindex and meno open/close via keyboard on fed scope menu

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
---
 settings/css/settings.scss                             |  5 +++++
 settings/js/federationsettingsview.js                  | 10 ++++++++++
 settings/templates/settings/personal/personal.info.php | 14 +++++++-------
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 42d6f285aac..8d38e71460f 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/federationsettingsview.js b/settings/js/federationsettingsview.js
index e2781833ed7..9cefaf132f2 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/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php
index d873f6821b8..b1ad66d100d 100644
--- a/settings/templates/settings/personal/personal.info.php
+++ b/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>
-- 
cgit v1.2.3