Merge pull request #26548 from nextcloud/design/files-accessibility

Files & Core accessibility fixes

8 files changed, 80 insertions, 37 deletions

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index dae10e343d3..66e2f2af1dd 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -476,10 +476,18 @@ table td.selection {
 }
 
 /* Use label to have bigger clickable size for checkbox */
-#fileList tr td.selection>.selectCheckBox + label,
-.select-all + label {
-	padding: 16px;
+#fileList tr td.selection>.selectCheckBox,
+.select-all {
+	& + label {
+		padding: 16px;
+	}
+
+	&:focus + label {
+		background-color: var(--color-background-hover);
+		border-radius: var(--border-radius-pill);
+	}
 }
+
 #fileList tr td.selection>.selectCheckBox:focus-visible + label,
 .select-all:focus-visible + label {
 	outline-offset: 0px;
@@ -639,7 +647,11 @@ a.action > img {
 			}
 		}
 		&: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 {
@@ -690,12 +702,14 @@ a.action > img {
 }
 
 .summary {
-	opacity: .3;
+	color: var(--color-text-maxcontrast);
 	/* add whitespace to bottom of files list to correctly show dropdowns */
 	height: 250px;
 }
 #filestable .filesummary {
 	width: 100%;
+	/* Width of checkbox and file preview */
+	padding-left: 101px;
 }
 /* Less whitespace needed on link share page
  * as there is a footer and action menus have fewer entries.
@@ -714,8 +728,8 @@ table tr.summary td {
 	vertical-align: top;
 	padding-top: 20px;
 }
-.summary .info {
-	margin-left: 2px;
+.summary td:first-child {
+	padding: 0;
 }
 .hiddeninfo {
 	white-space: pre-line;
diff --git a/apps/files/templates/appnavigation.php b/apps/files/templates/appnavigation.php
index 8e654567946..7946d2a138a 100644
--- a/apps/files/templates/appnavigation.php
+++ b/apps/files/templates/appnavigation.php
@@ -93,7 +93,10 @@ function NavigationListElements($item, $l, $pinned) {
 		NavigationElementMenu($item);
 	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']); ?>">
 				<?php
 				foreach ($item['sublist'] as $item) {
diff --git a/apps/files/templates/index.php b/apps/files/templates/index.php
index 8b6e2b0b91b..1e8b7cf1ac9 100644
--- a/apps/files/templates/index.php
+++ b/apps/files/templates/index.php
@@ -4,6 +4,7 @@
 
 	<?php if (!$_['isIE']) { ?>
 		<input type="checkbox" class="hidden-visually" id="showgridview"
+			aria-label="<?php p($l->t('Toggle grid view'))?>"
 			<?php if ($_['showgridview']) { ?>checked="checked" <?php } ?>/>
 		<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>
diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index cc798868c53..88c5e4dbcf9 100644
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@@ -55,6 +55,9 @@ input {
 #uploadavatarbutton, #selectavatar, #removeavatar {
 	padding: 21px;
 }
+#selectavatar, #removeavatar {
+	vertical-align: top;
+}
 
 .jcrop-holder {
 	z-index: 500;
@@ -118,9 +121,19 @@ input {
 	width: 100%;
 }
 
-.personal-settings-setting-box input {
-	&[type='text'], &[type='email'], &[type='tel'], &[type='url'] {
-		width: 100%;
+.personal-settings-setting-box {
+	.section {
+		padding: 10px 30px;
+
+		h3 {
+			margin-bottom: 0;
+		}
+
+		input {
+			&[type='text'], &[type='email'], &[type='tel'], &[type='url'] {
+				width: 100%;
+			}
+		}
 	}
 }
 
@@ -361,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;
 		}
 	}
 
@@ -928,10 +950,6 @@ span.version {
 	}
 }
 
-.personal-settings-setting-box .section {
-	padding: 10px 30px;
-}
-
 .followupsection {
 	display: block;
 	padding: 0 30px 30px 30px;
diff --git a/apps/settings/js/settings/personalInfo.js b/apps/settings/js/settings/personalInfo.js
index e71f4840123..f53e120dcf5 100644
--- a/apps/settings/js/settings/personalInfo.js
+++ b/apps/settings/js/settings/personalInfo.js
@@ -306,6 +306,13 @@ window.addEventListener('DOMContentLoaded', function () {
 
 	$('#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 () {
 		OC.dialogs.filepicker(
 			t('settings', "Select a profile picture"),
diff --git a/apps/settings/js/templates.js b/apps/settings/js/templates.js
index 25c2e790040..d0d623d9ed9 100644
--- a/apps/settings/js/templates.js
+++ b/apps/settings/js/templates.js
@@ -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 : "")
diff --git a/apps/settings/js/templates/federationscopemenu.handlebars b/apps/settings/js/templates/federationscopemenu.handlebars
index 4bd945b094d..e5cfd942f46 100644
--- a/apps/settings/js/templates/federationscopemenu.handlebars
+++ b/apps/settings/js/templates/federationscopemenu.handlebars
@@ -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>
diff --git a/apps/settings/templates/settings/personal/personal.info.php b/apps/settings/templates/settings/personal/personal.info.php
index f2e3a51aad7..8aa7b195ff5 100644
--- a/apps/settings/templates/settings/personal/personal.info.php
+++ b/apps/settings/templates/settings/personal/personal.info.php
@@ -39,20 +39,20 @@ script('settings', [
 		<div>
 			<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" tabindex="0">
+					<?php p($l->t('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>
 					<div class="warning hidden"></div>
 					<?php if ($_['avatarChangeSupported']): ?>
-						<label for="uploadavatar" class="inlineblock button icon-upload svg" id="uploadavatarbutton" title="<?php p($l->t('Upload new')); ?>"></label>
-						<div class="inlineblock button icon-folder svg" id="selectavatar" title="<?php p($l->t('Select from Files')); ?>"></div>
-						<div class="hidden button icon-delete svg" id="removeavatar" title="<?php p($l->t('Remove image')); ?>"></div>
+						<label for="uploadavatar" class="inlineblock button icon-upload svg" id="uploadavatarbutton" title="<?php p($l->t('Upload new')); ?>" tabindex="0"></label>
+						<button class="inlineblock button icon-folder svg" id="selectavatar" title="<?php p($l->t('Select from Files')); ?>"></button>
+						<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/*">
 						<p><em><?php p($l->t('png or jpg, max. 20 MB')); ?></em></p>
 					<?php else: ?>
@@ -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">
+					<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">
+					<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">
+					<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">
+					<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">
+					<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">
+					<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') {