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

Fix personal settings fed scope tabindex
This commit is contained in:
Roeland Jago Douma 2019-03-25 09:40:34 +01:00 committed by GitHub
commit 4ce191b7cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 35 additions and 11 deletions

View File

@ -300,6 +300,11 @@ select {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
margin-left: 10px; margin-left: 10px;
&:focus {
.icon-federation-menu {
opacity: 0.7;
}
}
.icon-federation-menu { .icon-federation-menu {
padding-left: 16px; padding-left: 16px;
background-size: 16px; background-size: 16px;

View File

@ -57,7 +57,8 @@
_context: null, _context: null,
events: { events: {
'click a.action': '_onClickAction' 'click a.action': '_onSelectScope',
'keydown a.action': '_onSelectScopeKeyboard'
}, },
/** /**
@ -65,7 +66,7 @@
* *
* @param {Object} event event object * @param {Object} event event object
*/ */
_onClickAction: function(event) { _onSelectScope: function(event) {
var $target = $(event.currentTarget); var $target = $(event.currentTarget);
if (!$target.hasClass('menuitem')) { if (!$target.hasClass('menuitem')) {
$target = $target.closest('.menuitem'); $target = $target.closest('.menuitem');
@ -76,6 +77,14 @@
OC.hideMenus(); 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 * Renders the menu with the currently set items
*/ */

View File

@ -70,6 +70,16 @@
}); });
$icon.append(scopeMenu.$el); $icon.append(scopeMenu.$el);
$icon.on('click', _.bind(scopeMenu.show, scopeMenu)); $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 // Restore initial state
self._setFieldScopeIcon(field, self._config.get(field + 'Scope')); self._setFieldScopeIcon(field, self._config.get(field + 'Scope'));

View File

@ -3,7 +3,7 @@
templates['federationscopemenu'] = template({"1":function(container,depth0,helpers,partials,data) { 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; 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))) + 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 " + " 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 : "") + ((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 : "")

View File

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

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