Fix accessibility of federation menu privacy buttons

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan C. Borchardt 2021-04-15 18:48:00 +02:00 committed by backportbot[bot]
parent 22ebc3d240
commit cb906f0766
4 changed files with 40 additions and 25 deletions

View File

@ -121,11 +121,21 @@ input {
width: 100%;
}
.personal-settings-setting-box input {
.personal-settings-setting-box {
.section {
padding: 10px 30px;
h3 {
margin-bottom: 0;
}
input {
&[type='text'], &[type='email'], &[type='tel'], &[type='url'] {
width: 100%;
}
}
}
}
select {
&#timezone,
@ -364,11 +374,20 @@ select {
.federation-menu {
position: relative;
cursor: pointer;
margin-left: 10px;
width: 44px;
height: 44px;
padding: 10px;
margin: -12px 0 0 8px;
background: none;
border: none;
&:hover,
&:focus {
background-color: var(--color-background-hover);
border-radius: var(--border-radius-pill);
.icon-federation-menu {
opacity: 0.7;
opacity: 0.8;
}
}
@ -931,10 +950,6 @@ span.version {
}
}
.personal-settings-setting-box .section {
padding: 10px 30px;
}
.followupsection {
display: block;
padding: 0 30px 30px 30px;

View File

@ -8,7 +8,7 @@ templates['federationscopemenu'] = template({"1":function(container,depth0,helpe
return undefined
};
return " <li tabindex=\"0\">\n <a href=\"#\" class=\"menuitem action action-"
return " <li>\n <a href=\"#\" class=\"menuitem action action-"
+ alias4(((helper = (helper = lookupProperty(helpers,"name") || (depth0 != null ? lookupProperty(depth0,"name") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data,"loc":{"start":{"line":4,"column":45},"end":{"line":4,"column":53}}}) : helper)))
+ " permanent "
+ ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"active") : depth0),{"name":"if","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":4,"column":64},"end":{"line":4,"column":91}}})) != null ? stack1 : "")

View File

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

View File

@ -40,11 +40,11 @@ script('settings', [
<form id="avatarform" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>">
<h3>
<?php p($l->t('Profile picture')); ?>
<div class="federation-menu" tabindex="0" aria-label="<?php p($l->t('Change privacy level of profile picture')); ?>">
<a href="#" class="federation-menu" aria-label="<?php p($l->t('Change privacy level of profile picture')); ?>">
<span class="icon-federation-menu icon-password">
<span class="icon-triangle-s"></span>
</span>
</div>
</a>
</h3>
<div id="displayavatar">
<div class="avatardiv"></div>
@ -101,11 +101,11 @@ script('settings', [
<form id="displaynameform" class="section">
<h3>
<label for="displayname"><?php p($l->t('Full name')); ?></label>
<div class="federation-menu" tabindex="0" aria-label="<?php p($l->t('Change privacy level of full name')); ?>">
<a href="#" class="federation-menu" aria-label="<?php p($l->t('Change privacy level of full name')); ?>">
<span class="icon-federation-menu icon-password">
<span class="icon-triangle-s"></span>
</span>
</div>
</a>
</h3>
<input type="text" id="displayname" name="displayname"
<?php if (!$_['displayNameChangeSupported']) {
@ -131,11 +131,11 @@ script('settings', [
<form id="emailform" class="section">
<h3>
<label for="email"><?php p($l->t('Email')); ?></label>
<div class="federation-menu" tabindex="0" aria-label="<?php p($l->t('Change privacy level of email')); ?>">
<a href="#" class="federation-menu" aria-label="<?php p($l->t('Change privacy level of email')); ?>">
<span class="icon-federation-menu icon-password">
<span class="icon-triangle-s"></span>
</span>
</div>
</a>
</h3>
<div class="verify <?php if ($_['email'] === '' || $_['emailScope'] !== 'public') {
p('hidden');
@ -181,11 +181,11 @@ script('settings', [
<form id="phoneform" class="section">
<h3>
<label for="phone"><?php p($l->t('Phone number')); ?></label>
<div class="federation-menu" tabindex="0" aria-label="<?php p($l->t('Change privacy level of phone number')); ?>">
<a href="#" class="federation-menu" aria-label="<?php p($l->t('Change privacy level of phone number')); ?>">
<span class="icon-federation-menu icon-password">
<span class="icon-triangle-s"></span>
</span>
</div>
</a>
</h3>
<input type="tel" id="phone" name="phone"
value="<?php p($_['phone']) ?>"
@ -200,11 +200,11 @@ script('settings', [
<form id="addressform" class="section">
<h3>
<label for="address"><?php p($l->t('Address')); ?></label>
<div class="federation-menu" tabindex="0" aria-label="<?php p($l->t('Change privacy level of address')); ?>">
<a href="#" class="federation-menu" aria-label="<?php p($l->t('Change privacy level of address')); ?>">
<span class="icon-federation-menu icon-password">
<span class="icon-triangle-s"></span>
</span>
</div>
</a>
</h3>
<input type="text" id="address" name="address"
placeholder="<?php p($l->t('Your postal address')); ?>"
@ -219,11 +219,11 @@ script('settings', [
<form id="websiteform" class="section">
<h3>
<label for="website"><?php p($l->t('Website')); ?></label>
<div class="federation-menu" tabindex="0" aria-label="<?php p($l->t('Change privacy level of website')); ?>">
<a href="#" class="federation-menu" aria-label="<?php p($l->t('Change privacy level of website')); ?>">
<span class="icon-federation-menu icon-password">
<span class="icon-triangle-s"></span>
</span>
</div>
</a>
</h3>
<?php if ($_['lookupServerUploadEnabled']) { ?>
<div class="verify <?php if ($_['website'] === '' || $_['websiteScope'] !== 'public') {
@ -268,11 +268,11 @@ script('settings', [
<form id="twitterform" class="section">
<h3>
<label for="twitter"><?php p($l->t('Twitter')); ?></label>
<div class="federation-menu" tabindex="0" aria-label="<?php p($l->t('Change privacy level of Twitter profile')); ?>">
<a href="#" class="federation-menu" aria-label="<?php p($l->t('Change privacy level of Twitter profile')); ?>">
<span class="icon-federation-menu icon-password">
<span class="icon-triangle-s"></span>
</span>
</div>
</a>
</h3>
<?php if ($_['lookupServerUploadEnabled']) { ?>
<div class="verify <?php if ($_['twitter'] === '' || $_['twitterScope'] !== 'public') {