Merge pull request #9433 from nextcloud/backport/9224/accessibility-improvements-13

[stable13] Add labels for Contacts menu and Settings

apps/files/css/detailsView.scss

@@ -100,7 +100,7 @@
 }
 
 #app-sidebar .file-details {
-	color: #999;
+	color: $color-text-details;
 }
 
 #app-sidebar .action-favorite {

apps/files/css/files.scss

@@ -147,10 +147,9 @@ table tr.mouseOver td {
 tbody a { color: $color-main-text; }
 
 span.conflict-path, span.extension, span.uploading, td.date {
-	color: #999;
+	color: $color-text-details;
 }
 span.conflict-path, span.extension {
-	opacity: .7;
 	-webkit-transition: opacity 300ms;
 	-moz-transition: opacity 300ms;
 	-o-transition: opacity 300ms;
@@ -162,11 +161,11 @@ tr:focus span.conflict-path,
 tr:hover span.extension,
 tr:focus span.extension {
 	opacity: 1;
-	color: #777;
+	color: $color-text-details;
 }
 
 table th, table th a {
-	color: #999;
+	color: $color-text-details;
 }
 table.multiselect th a {
 	color: #000;

apps/files/js/filelist.js

@@ -1327,7 +1327,9 @@
 			// size column
 			if (typeof(fileData.size) !== 'undefined' && fileData.size >= 0) {
 				simpleSize = humanFileSize(parseInt(fileData.size, 10), true);
-				sizeColor = Math.round(160-Math.pow((fileData.size/(1024*1024)),2));
+				// rgb(118, 118, 118) / #767676
+				// min. color contrast for normal text on white background according to WCAG AA
+				sizeColor = Math.round(118-Math.pow((fileData.size/(1024*1024)),2));
 			} else {
 				simpleSize = t('files', 'Pending');
 			}
@@ -1342,8 +1344,10 @@
 			// difference in days multiplied by 5 - brightest shade for files older than 32 days (160/5)
 			var modifiedColor = Math.round(((new Date()).getTime() - mtime )/1000/60/60/24*5 );
 			// ensure that the brightest color is still readable
-			if (modifiedColor >= '160') {
-				modifiedColor = 160;
+			// rgb(118, 118, 118) / #767676
+			// min. color contrast for normal text on white background according to WCAG AA
+			if (modifiedColor >= '118') {
+				modifiedColor = 118;
 			}
 			var formatted;
 			var text;

core/css/variables.scss

@@ -7,6 +7,11 @@ $color-warning: #ffcc44;
 $color-success: #46ba61;
 $color-primary-element: $color-primary;
 
+// rgb(118, 118, 118) / #767676
+// min. color contrast for normal text on white background according to WCAG AA
+// (Works as well: color: #000; opacity: 0.57;)
+$color-text-details: #767676;
+
 @function nc-darken($color, $value) {
   @return darken($color, $value);
 }

core/js/js.js

@@ -677,6 +677,10 @@ var OCP = {},
 				// close it
 				self.hideMenus();
 			}
+
+			// Set menu to expanded
+			$toggle.attr('aria-expanded', true);
+
 			$menuEl.slideToggle(OC.menuSpeed, toggle);
 			OC._currentMenu = $menuEl;
 			OC._currentMenuToggle = $toggle;
@@ -711,6 +715,10 @@ var OCP = {},
 				}
 			});
 		}
+
+		// Set menu to closed
+		$('.menutoggle').attr('aria-expanded', false);
+
 		OC._currentMenu = null;
 		OC._currentMenuToggle = null;
 	},

core/templates/layout.base.php

@@ -7,7 +7,7 @@
 		</title>
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta name="referrer" content="never">
-		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
 		<meta name="theme-color" content="<?php p($theme->getColorPrimary()); ?>">
 		<link rel="icon" href="<?php print_unescaped(image_path('', 'favicon.ico')); /* IE11+ supports png */ ?>">
 		<link rel="apple-touch-icon-precomposed" href="<?php print_unescaped(image_path('', 'favicon-touch.png')); ?>">

core/templates/layout.guest.php

@@ -7,7 +7,7 @@
 		</title>
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta name="referrer" content="never">
-		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
 		<meta name="apple-itunes-app" content="app-id=<?php p($theme->getiTunesAppId()); ?>">
 		<meta name="theme-color" content="<?php p($theme->getColorPrimary()); ?>">
 		<link rel="icon" href="<?php print_unescaped(image_path('', 'favicon.ico')); /* IE11+ supports png */ ?>">
@@ -37,7 +37,9 @@
 						</div>
 					</header>
 				<?php endif; ?>
-				<?php print_unescaped($_['content']); ?>
+				<main>
+					<?php print_unescaped($_['content']); ?>
+				</main>
 			</div>
 		</div>
 		<footer role="contentinfo">

core/templates/layout.user.php

@@ -10,7 +10,7 @@
 		</title>
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta name="referrer" content="never">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
 		<meta name="apple-itunes-app" content="app-id=<?php p($theme->getiTunesAppId()); ?>">
 		<meta name="apple-mobile-web-app-capable" content="yes">
 		<meta name="apple-mobile-web-app-status-bar-style" content="black">
@@ -45,8 +45,9 @@
 					<?php foreach ($_['navigation'] as $entry): ?>
 						<li data-id="<?php p($entry['id']); ?>" class="hidden">
 							<a href="<?php print_unescaped($entry['href']); ?>"
-								<?php if ($entry['active']): ?> class="active"<?php endif; ?>>
-									<svg width="20" height="20" viewBox="0 0 20 20">
+								<?php if ($entry['active']): ?> class="active"<?php endif; ?>
+								aria-label="<?php p($entry['name']); ?>">
+									<svg width="20" height="20" viewBox="0 0 20 20" alt="">
 										<?php if ($_['themingInvertMenu']) { ?>
 										<defs><filter id="invertMenuMain-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter></defs>
 										<?php } ?>
@@ -60,8 +61,9 @@
 							</span>
 						</li>
 					<?php endforeach; ?>
-					<li id="more-apps" class="menutoggle">
-						<a href="#">
+					<li id="more-apps" class="menutoggle"
+						aria-haspopup="true" aria-controls="navigation" aria-expanded="false">
+						<a href="#" aria-label="<?php p($l->t('More apps')); ?>">
 							<div class="icon-more-white"></div>
 							<span><?php p($l->t('More apps')); ?></span>
 						</a>
@@ -69,14 +71,15 @@
 				</ul>
 
 				<nav role="navigation">
-					<div id="navigation" style="display: none;">
+					<div id="navigation" style="display: none;"  aria-label="<?php p($l->t('More apps menu')); ?>">
 						<div id="apps">
 							<ul>
 								<?php foreach($_['navigation'] as $entry): ?>
 									<li data-id="<?php p($entry['id']); ?>">
 									<a href="<?php print_unescaped($entry['href']); ?>"
-										<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
-										<svg width="16" height="16" viewBox="0 0 16 16">
+										<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>
+										aria-label="<?php p($entry['name']); ?>">
+										<svg width="16" height="16" viewBox="0 0 16 16" alt="">
 											<defs><filter id="invertMenuMore-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter></defs>
 											<image x="0" y="0" width="16" height="16" preserveAspectRatio="xMinYMin meet" filter="url(#invertMenuMore-<?php p($entry['id']); ?>)" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"  class="app-icon"></image>
 										</svg>
@@ -103,11 +106,17 @@
 					<button class="icon-close-white" type="reset"><span class="hidden-visually"><?php p($l->t('Reset search'));?></span></button>
 				</form>
 				<div id="contactsmenu">
-					<div class="icon-contacts menutoggle" tabindex="0" role="link"></div>
-					<div class="menu"></div>
+					<div class="icon-contacts menutoggle" tabindex="0" role="button"
+					aria-haspopup="true" aria-controls="contactsmenu-menu" aria-expanded="false">
+						<span class="hidden-visually"><?php p($l->t('Contacts'));?>
+					</div>
+					<div id="contactsmenu-menu" class="menu"
+						aria-label="<?php p($l->t('Contacts menu'));?>"></div>
 				</div>
 				<div id="settings">
-					<div id="expand" tabindex="0" role="link" class="menutoggle">
+					<div id="expand" tabindex="0" role="button" class="menutoggle"
+						aria-label="<?php p($l->t('Settings'));?>"
+						aria-haspopup="true" aria-controls="expanddiv" aria-expanded="false">
 						<div class="avatardiv<?php if ($_['userAvatarSet']) { print_unescaped(' avatardiv-shown'); } else { print_unescaped('" style="display: none'); } ?>">
 							<?php if ($_['userAvatarSet']): ?>
 								<img alt="" width="32" height="32"
@@ -118,7 +127,8 @@
 						</div>
 						<div id="expandDisplayName" class="icon-settings-white"></div>
 					</div>
-					<div id="expanddiv" style="display:none;">
+					<nav id="expanddiv" style="display:none;"
+						aria-label="<?php p($l->t('Settings menu'));?>">
 					<ul>
 					<?php foreach($_['settingsnavigation'] as $entry):?>
 						<li>
@@ -130,8 +140,7 @@
 						</li>
 					<?php endforeach; ?>
 					</ul>
-
-					</div>
+					</nav>
 				</div>
 			</div>
 		</div></header>

core/templates/login.php

@@ -37,6 +37,7 @@ script('core', 'merged-login');
 		<p class="grouptop<?php if (!empty($_['invalidpassword'])) { ?> shake<?php } ?>">
 			<input type="text" name="user" id="user"
 				placeholder="<?php p($l->t('Username or email')); ?>"
+				aria-label="<?php p($l->t('Username or email')); ?>"
 				value="<?php p($_['loginName']); ?>"
 				<?php p($_['user_autofocus'] ? 'autofocus' : ''); ?>
 				autocomplete="on" autocapitalize="none" autocorrect="off" required>
@@ -46,6 +47,7 @@ script('core', 'merged-login');
 		<p class="groupbottom<?php if (!empty($_['invalidpassword'])) { ?> shake<?php } ?>">
 			<input type="password" name="password" id="password" value=""
 				placeholder="<?php p($l->t('Password')); ?>"
+				aria-label="<?php p($l->t('Password')); ?>"
 				<?php p($_['user_autofocus'] ? '' : 'autofocus'); ?>
 				autocomplete="on" autocapitalize="off" autocorrect="none" required>
 			<label for="password" class="infield"><?php p($l->t('Password')); ?></label>