mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix accessibility of profile picture section 

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan C. Borchardt 2021-04-15 13:22:53 +02:00
parent f86a2239e7
commit 64e90cdc66
No known key found for this signature in database
GPG Key ID: CBD846FC845CBE17
3 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/settings/css/settings.scss
View File

@ -55,6 +55,9 @@ input {
#uploadavatarbutton, #selectavatar, #removeavatar { #uploadavatarbutton, #selectavatar, #removeavatar {
padding: 21px; padding: 21px;
} }
#selectavatar, #removeavatar {
vertical-align: top;
}
.jcrop-holder { .jcrop-holder {
z-index: 500; z-index: 500;

7
apps/settings/js/settings/personalInfo.js
View File

@ -306,6 +306,13 @@ window.addEventListener('DOMContentLoaded', function () {
$('#uploadavatar').fileupload(uploadparms); $('#uploadavatar').fileupload(uploadparms);
// Trigger upload action also with keyboard navigation on enter
$('#uploadavatarbutton').on('keyup', function(event) {
if (event.key === ' ' || event.key === 'Enter') {
$('#uploadavatar').trigger('click');
}
});
$('#selectavatar').click(function () { $('#selectavatar').click(function () {
OC.dialogs.filepicker( OC.dialogs.filepicker(
t('settings', "Select a profile picture"), t('settings', "Select a profile picture"),

8
apps/settings/templates/settings/personal/personal.info.php
View File

@ -39,7 +39,7 @@ script('settings', [
<div> <div>
<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> <?php p($l->t('Profile picture')); ?>
<div class="federation-menu" tabindex="0" aria-label="<?php p($l->t('Change privacy level of profile picture')); ?>"> <div class="federation-menu" tabindex="0" aria-label="<?php p($l->t('Change privacy level of profile picture')); ?>">
<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>
@ -50,9 +50,9 @@ script('settings', [
<div class="avatardiv"></div> <div class="avatardiv"></div>
<div class="warning hidden"></div> <div class="warning hidden"></div>
<?php if ($_['avatarChangeSupported']): ?> <?php if ($_['avatarChangeSupported']): ?>
<label for="uploadavatar" class="inlineblock button icon-upload svg" id="uploadavatarbutton" title="<?php p($l->t('Upload new')); ?>"></label> <label for="uploadavatar" class="inlineblock button icon-upload svg" id="uploadavatarbutton" title="<?php p($l->t('Upload new')); ?>" tabindex="0"></label>
<div class="inlineblock button icon-folder svg" id="selectavatar" title="<?php p($l->t('Select from Files')); ?>"></div> <button class="inlineblock button icon-folder svg" id="selectavatar" title="<?php p($l->t('Select from Files')); ?>"></button>
<div class="hidden button icon-delete svg" id="removeavatar" title="<?php p($l->t('Remove image')); ?>"></div> <button class="hidden button icon-delete svg" id="removeavatar" title="<?php p($l->t('Remove image')); ?>"></button>
<input type="file" name="files[]" id="uploadavatar" class="hiddenuploadfield" accept="image/*"> <input type="file" name="files[]" id="uploadavatar" class="hiddenuploadfield" accept="image/*">
<p><em><?php p($l->t('png or jpg, max. 20 MB')); ?></em></p> <p><em><?php p($l->t('png or jpg, max. 20 MB')); ?></em></p>
<?php else: ?> <?php else: ?>