Merge pull request #26548 from nextcloud/design/files-accessibility
Files & Core accessibility fixes
This commit is contained in:
commit
9d1e2c5082
|
@ -476,10 +476,18 @@ table td.selection {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Use label to have bigger clickable size for checkbox */
|
/* Use label to have bigger clickable size for checkbox */
|
||||||
#fileList tr td.selection>.selectCheckBox + label,
|
#fileList tr td.selection>.selectCheckBox,
|
||||||
.select-all + label {
|
.select-all {
|
||||||
|
& + label {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus + label {
|
||||||
|
background-color: var(--color-background-hover);
|
||||||
|
border-radius: var(--border-radius-pill);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#fileList tr td.selection>.selectCheckBox:focus-visible + label,
|
#fileList tr td.selection>.selectCheckBox:focus-visible + label,
|
||||||
.select-all:focus-visible + label {
|
.select-all:focus-visible + label {
|
||||||
outline-offset: 0px;
|
outline-offset: 0px;
|
||||||
|
@ -639,7 +647,11 @@ a.action > img {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover, &:focus {
|
&:hover, &:focus {
|
||||||
opacity: .7;
|
opacity: 1;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
background-color: var(--color-background-hover);
|
||||||
|
border-radius: var(--border-radius-pill);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.fileActionsMenu a.action, a.action.action-share.shared-style {
|
.fileActionsMenu a.action, a.action.action-share.shared-style {
|
||||||
|
@ -690,12 +702,14 @@ a.action > img {
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary {
|
.summary {
|
||||||
opacity: .3;
|
color: var(--color-text-maxcontrast);
|
||||||
/* add whitespace to bottom of files list to correctly show dropdowns */
|
/* add whitespace to bottom of files list to correctly show dropdowns */
|
||||||
height: 250px;
|
height: 250px;
|
||||||
}
|
}
|
||||||
#filestable .filesummary {
|
#filestable .filesummary {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
/* Width of checkbox and file preview */
|
||||||
|
padding-left: 101px;
|
||||||
}
|
}
|
||||||
/* Less whitespace needed on link share page
|
/* Less whitespace needed on link share page
|
||||||
* as there is a footer and action menus have fewer entries.
|
* as there is a footer and action menus have fewer entries.
|
||||||
|
@ -714,8 +728,8 @@ table tr.summary td {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
}
|
}
|
||||||
.summary .info {
|
.summary td:first-child {
|
||||||
margin-left: 2px;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.hiddeninfo {
|
.hiddeninfo {
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
|
|
|
@ -93,7 +93,10 @@ function NavigationListElements($item, $l, $pinned) {
|
||||||
NavigationElementMenu($item);
|
NavigationElementMenu($item);
|
||||||
if (isset($item['sublist'])) {
|
if (isset($item['sublist'])) {
|
||||||
?>
|
?>
|
||||||
<button class="collapse app-navigation-noclose" <?php if (sizeof($item['sublist']) == 0) { ?> style="display: none" <?php } ?>></button>
|
<button class="collapse app-navigation-noclose"
|
||||||
|
aria-label="<?php p($l->t('Toggle %1$s sublist', $item['name'])) ?>"
|
||||||
|
<?php if (sizeof($item['sublist']) == 0) { ?> style="display: none" <?php } ?>>
|
||||||
|
</button>
|
||||||
<ul id="sublist-<?php p($item['id']); ?>">
|
<ul id="sublist-<?php p($item['id']); ?>">
|
||||||
<?php
|
<?php
|
||||||
foreach ($item['sublist'] as $item) {
|
foreach ($item['sublist'] as $item) {
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
|
|
||||||
<?php if (!$_['isIE']) { ?>
|
<?php if (!$_['isIE']) { ?>
|
||||||
<input type="checkbox" class="hidden-visually" id="showgridview"
|
<input type="checkbox" class="hidden-visually" id="showgridview"
|
||||||
|
aria-label="<?php p($l->t('Toggle grid view'))?>"
|
||||||
<?php if ($_['showgridview']) { ?>checked="checked" <?php } ?>/>
|
<?php if ($_['showgridview']) { ?>checked="checked" <?php } ?>/>
|
||||||
<label id="view-toggle" for="showgridview" class="button <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>"
|
<label id="view-toggle" for="showgridview" class="button <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>"
|
||||||
title="<?php p($l->t('Toggle grid view'))?>"></label>
|
title="<?php p($l->t('Toggle grid view'))?>"></label>
|
||||||
|
|
|
@ -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;
|
||||||
|
@ -118,10 +121,20 @@ input {
|
||||||
width: 100%;
|
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'] {
|
&[type='text'], &[type='email'], &[type='tel'], &[type='url'] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
|
@ -361,11 +374,20 @@ select {
|
||||||
.federation-menu {
|
.federation-menu {
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-left: 10px;
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
padding: 10px;
|
||||||
|
margin: -12px 0 0 8px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
|
background-color: var(--color-background-hover);
|
||||||
|
border-radius: var(--border-radius-pill);
|
||||||
|
|
||||||
.icon-federation-menu {
|
.icon-federation-menu {
|
||||||
opacity: 0.7;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -928,10 +950,6 @@ span.version {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.personal-settings-setting-box .section {
|
|
||||||
padding: 10px 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.followupsection {
|
.followupsection {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0 30px 30px 30px;
|
padding: 0 30px 30px 30px;
|
||||||
|
|
|
@ -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,7 +8,7 @@ templates['federationscopemenu'] = template({"1":function(container,depth0,helpe
|
||||||
return undefined
|
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)))
|
+ 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 "
|
+ " 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 : "")
|
+ ((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 : "")
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<ul>
|
<ul>
|
||||||
{{#each items}}
|
{{#each items}}
|
||||||
<li tabindex="0">
|
<li>
|
||||||
<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>
|
||||||
|
|
|
@ -39,20 +39,20 @@ 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">
|
<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-federation-menu icon-password">
|
||||||
<span class="icon-triangle-s"></span>
|
<span class="icon-triangle-s"></span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
<div id="displayavatar">
|
<div id="displayavatar">
|
||||||
<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: ?>
|
||||||
|
@ -101,11 +101,11 @@ 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" tabindex="0">
|
<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-federation-menu icon-password">
|
||||||
<span class="icon-triangle-s"></span>
|
<span class="icon-triangle-s"></span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
<input type="text" id="displayname" name="displayname"
|
<input type="text" id="displayname" name="displayname"
|
||||||
<?php if (!$_['displayNameChangeSupported']) {
|
<?php if (!$_['displayNameChangeSupported']) {
|
||||||
|
@ -131,11 +131,11 @@ 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" tabindex="0">
|
<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-federation-menu icon-password">
|
||||||
<span class="icon-triangle-s"></span>
|
<span class="icon-triangle-s"></span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
<div class="verify <?php if ($_['email'] === '' || $_['emailScope'] !== 'public') {
|
<div class="verify <?php if ($_['email'] === '' || $_['emailScope'] !== 'public') {
|
||||||
p('hidden');
|
p('hidden');
|
||||||
|
@ -181,11 +181,11 @@ 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" tabindex="0">
|
<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-federation-menu icon-password">
|
||||||
<span class="icon-triangle-s"></span>
|
<span class="icon-triangle-s"></span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
<input type="tel" id="phone" name="phone"
|
<input type="tel" id="phone" name="phone"
|
||||||
value="<?php p($_['phone']) ?>"
|
value="<?php p($_['phone']) ?>"
|
||||||
|
@ -200,11 +200,11 @@ 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" tabindex="0">
|
<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-federation-menu icon-password">
|
||||||
<span class="icon-triangle-s"></span>
|
<span class="icon-triangle-s"></span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
<input type="text" id="address" name="address"
|
<input type="text" id="address" name="address"
|
||||||
placeholder="<?php p($l->t('Your postal address')); ?>"
|
placeholder="<?php p($l->t('Your postal address')); ?>"
|
||||||
|
@ -219,11 +219,11 @@ 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" tabindex="0">
|
<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-federation-menu icon-password">
|
||||||
<span class="icon-triangle-s"></span>
|
<span class="icon-triangle-s"></span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
<?php if ($_['lookupServerUploadEnabled']) { ?>
|
<?php if ($_['lookupServerUploadEnabled']) { ?>
|
||||||
<div class="verify <?php if ($_['website'] === '' || $_['websiteScope'] !== 'public') {
|
<div class="verify <?php if ($_['website'] === '' || $_['websiteScope'] !== 'public') {
|
||||||
|
@ -268,11 +268,11 @@ 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" tabindex="0">
|
<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-federation-menu icon-password">
|
||||||
<span class="icon-triangle-s"></span>
|
<span class="icon-triangle-s"></span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
<?php if ($_['lookupServerUploadEnabled']) { ?>
|
<?php if ($_['lookupServerUploadEnabled']) { ?>
|
||||||
<div class="verify <?php if ($_['twitter'] === '' || $_['twitterScope'] !== 'public') {
|
<div class="verify <?php if ($_['twitter'] === '' || $_['twitterScope'] !== 'public') {
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -28,7 +28,10 @@
|
||||||
@close="onClose">
|
@close="onClose">
|
||||||
<!-- Header icon -->
|
<!-- Header icon -->
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<Magnify class="unified-search__trigger" :size="20" fill-color="var(--color-primary-text)" />
|
<Magnify class="unified-search__trigger"
|
||||||
|
:size="20"
|
||||||
|
:title="ariaLabel"
|
||||||
|
fill-color="var(--color-primary-text)" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- Search form & filters wrapper -->
|
<!-- Search form & filters wrapper -->
|
||||||
|
@ -191,6 +194,10 @@ export default {
|
||||||
}, {})
|
}, {})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
ariaLabel() {
|
||||||
|
return t('core', 'Search')
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Is there any result to display
|
* Is there any result to display
|
||||||
* @returns {boolean}
|
* @returns {boolean}
|
||||||
|
|
Loading…
Reference in New Issue