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
GitHub
commit
4ce191b7cc
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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'));
|
||||
|
|
|
|||
|
|
@ -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 : "")
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue