Fix tabindex and meno open/close via keyboard on fed scope menu

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

diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 42d6f285aac0f7263c8000de5e7b477f21b507a6..8d38e71460f26eb4a94747a309255619c934b46e 100644 (file)
--- 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 e2781833ed77aeacfad35268580a636865850fa2..9cefaf132f2abc411cd8605a0297b5defd0b5ab1 100644 (file)
--- 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 d873f6821b8723d2b2304bee60c26ce3e2806060..b1ad66d100db4f8bcbaff20962896f2ea36a1987 100644 (file)
--- 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>