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

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
This commit is contained in:
Christoph Wurst 2019-03-22 11:51:48 +01:00
parent b1b2378758
commit f127de0ab2
No known key found for this signature in database
GPG key ID: CC42AC2A7F0E56D8
3 changed files with 22 additions and 7 deletions

View file

@ -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;

View file

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

View file

@ -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>