Merge pull request #12941 from owncloud/wave-accessibility-compliance

Wave accessibility compliance

apps/files/css/upload.css

@@ -9,7 +9,7 @@
 	overflow: hidden;
 	vertical-align: top;
 }
-#upload a {
+#upload .icon-upload {
 	position: relative;
 	display: block;
 	width: 100%;

apps/files/js/file-upload.js

@@ -187,7 +187,7 @@ OC.Upload = {
 	},
 
 	_hideProgressBar: function() {
-		$('#uploadprogresswrapper input.stop').fadeOut();
+		$('#uploadprogresswrapper .stop').fadeOut();
 		$('#uploadprogressbar').fadeOut(function() {
 			$('#file_upload_start').trigger(new $.Event('resized'));
 		});
@@ -469,13 +469,13 @@ OC.Upload = {
 					OC.Upload.log('progress handle fileuploadadd', e, data);
 					//show cancel button
 					//if (data.dataType !== 'iframe') { //FIXME when is iframe used? only for ie?
-					//	$('#uploadprogresswrapper input.stop').show();
+					//	$('#uploadprogresswrapper .stop').show();
 					//}
 				});
 				// add progress handlers
 				fileupload.on('fileuploadstart', function(e, data) {
 					OC.Upload.log('progress handle fileuploadstart', e, data);
-					$('#uploadprogresswrapper input.stop').show();
+					$('#uploadprogresswrapper .stop').show();
 					$('#uploadprogressbar').progressbar({value: 0});
 					OC.Upload._showProgressBar();
 				});
@@ -589,10 +589,15 @@ OC.Upload = {
 			var form = $('<form></form>');
 			var input = $('<input type="text">');
 			var newName = $(this).attr('data-newname') || '';
+			var fileType = 'input-' + $(this).attr('data-type');
 			if (newName) {
 				input.val(newName);
+				input.attr('id', fileType);
 			}
-			form.append(input);
+			var label = $('<label class="hidden-visually" for="">' + escapeHTML(newName) + '</label>');
+			label.attr('for', fileType);
+
+			form.append(label).append(input);
 			$(this).append(form);
 			var lastPos;
 			var checkInput = function () {

apps/files/templates/appnavigation.php

@@ -11,8 +11,10 @@
 			</button>
 		</div>
 		<div id="app-settings-content">
-				<h2><?php p($l->t('WebDAV'));?></h2>
-				<div><input id="webdavurl" type="text" readonly="readonly" value="<?php p(OC_Helper::linkToRemote('webdav')); ?>" /></div>
+				<h2>
+					<label for="webdavurl"><?php p($l->t('WebDAV'));?></label>
+				</h2>
+				<input id="webdavurl" type="text" readonly="readonly" value="<?php p(OC_Helper::linkToRemote('webdav')); ?>" />
 				<em><?php print_unescaped($l->t('Use this address to <a href="%s" target="_blank">access your Files via WebDAV</a>', array(link_to_docs('user-webdav'))));?></em>
 		</div>
 	</div>

apps/files/templates/list.php

@@ -34,13 +34,17 @@
 						   value="(max <?php isset($_['uploadMaxHumanFilesize']) ? p($_['uploadMaxHumanFilesize']) : ''; ?>)">
 					<input type="file" id="file_upload_start" name='files[]'
 						   data-url="<?php print_unescaped(OCP\Util::linkTo('files', 'ajax/upload.php')); ?>" />
-					<a href="#" class="svg icon-upload"></a>
+					<label for="file_upload_start" class="svg icon-upload">
+						<span class="hidden-visually"><?php p($l->t('Upload'))?></span>
+					</label>
 			</div>
 			<div id="uploadprogresswrapper">
 				<div id="uploadprogressbar"></div>
-				<input type="button" class="stop icon-close"
-					style="display:none" value=""
-					alt="<?php p($l->t('Cancel upload'))?>" />
+				<button class="stop icon-close" style="display:none">
+					<span class="hidden-visually">
+						<?php p($l->t('Cancel upload'))?>
+					</span>
+				</button>
 			</div>
 		</div>
 		<div id="file_action_panel"></div>
@@ -68,7 +72,7 @@
 					<a class="name sort columntitle" data-sort="name"><span><?php p($l->t( 'Name' )); ?></span><span class="sort-indicator"></span></a>
 					<span id="selectedActionsList" class="selectedActions">
 						<a href="" class="download">
-							<img class="svg" alt="Download"
+							<img class="svg" alt=""
 								 src="<?php print_unescaped(OCP\image_path("core", "actions/download.svg")); ?>" />
 							<?php p($l->t('Download'))?>
 						</a>
@@ -82,7 +86,7 @@
 				<a id="modified" class="columntitle" data-sort="mtime"><span><?php p($l->t( 'Modified' )); ?></span><span class="sort-indicator"></span></a>
 					<span class="selectedActions"><a href="" class="delete-selected">
 						<?php p($l->t('Delete'))?>
-						<img class="svg" alt="<?php p($l->t('Delete'))?>"
+						<img class="svg" alt=""
 							 src="<?php print_unescaped(OCP\image_path("core", "actions/delete.svg")); ?>" />
 					</a></span>
 			</th>

apps/files_sharing/js/public.js

@@ -96,7 +96,7 @@ OCA.Sharing.PublicApp = {
 			scalingup: 0
 		};
 
-		var img = $('<img class="publicpreview">');
+		var img = $('<img class="publicpreview" alt="">');
 		if (previewSupported === 'true' || mimetype.substr(0, mimetype.indexOf('/')) === 'image' && mimetype !== 'image/svg+xml') {
 			img.attr('src', OC.filePath('files_sharing', 'ajax', 'publicpreview.php') + '?' + OC.buildQueryString(params));
 			img.appendTo('#imgframe');

apps/files_sharing/templates/public.php

@@ -45,7 +45,11 @@ $previewSupported = OC\Preview::isMimeSupported($_['mimetype']) ? 'true' : 'fals
 <header><div id="header" class="<?php p((isset($_['folder']) ? 'share-folder' : 'share-file')) ?>">
 		<a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
 		   title="" id="owncloud">
-			<div class="logo-wide svg"></div>
+			<div class="logo-wide svg">
+				<h1 class="hidden-visually">
+					<?php p($theme->getName()); ?>
+				</h1>
+			</div>
 		</a>
 		<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
 		<div class="header-right">

apps/files_trashbin/js/app.js

@@ -68,6 +68,7 @@ OCA.Trashbin.App = {
 			render: function(actionSpec, isDefault, context) {
 				var $actionLink = fileActions._makeActionLink(actionSpec, context);
 				$actionLink.attr('original-title', t('files', 'Delete permanently'));
+				$actionLink.children('img').attr('alt', t('files', 'Delete permanently'));
 				context.$file.find('td:last').append($actionLink);
 				return $actionLink;
 			},

apps/files_trashbin/templates/index.php

@@ -18,11 +18,13 @@
 			<th id='headerName' class="hidden column-name">
 				<div id="headerName-container">
 					<input type="checkbox" id="select_all_trash" class="select-all"/>
-					<label for="select_all_trash"></label>
+					<label for="select_all_trash">
+						<span class="hidden-visually"><?php p($l->t('Select all'))?></span>
+					</label>
 					<a class="name sort columntitle" data-sort="name"><span><?php p($l->t( 'Name' )); ?></span><span class="sort-indicator"></span></a>
 					<span id="selectedActionsList" class='selectedActions'>
 						<a href="" class="undelete">
-							<img class="svg" alt="<?php p($l->t( 'Restore' )); ?>"
+							<img class="svg" alt=""
 								 src="<?php print_unescaped(OCP\image_path("core", "actions/history.svg")); ?>" />
 							<?php p($l->t('Restore'))?>
 						</a>
@@ -34,7 +36,7 @@
 				<span class="selectedActions">
 					<a href="" class="delete-selected">
 						<?php p($l->t('Delete'))?>
-						<img class="svg" alt="<?php p($l->t('Delete'))?>"
+						<img class="svg" alt=""
 							src="<?php print_unescaped(OCP\image_path("core", "actions/delete.svg")); ?>" />
 					</a>
 				</span>

core/css/header.css

@@ -48,9 +48,6 @@
 	height: 120px;
 	margin: 0 auto;
 }
-#header .logo h1 {
-	display: none;
-}
 
 #header .logo-wide {
 	background-image: url(../img/logo-wide.svg);

core/css/styles.css

@@ -193,8 +193,8 @@ input[type="button"]:hover, input[type="button"]:focus,
 button:hover, button:focus,
 .button:hover, .button:focus,
 select:hover, select:focus, select:active {
-	background-color:rgba(250,250,250,.9);
-	color:#333;
+	background-color: rgba(255, 255, 255, .95);
+	color: #111;
 }
 input[type="submit"] img, input[type="button"] img, button img, .button img { cursor:pointer; }
 #header .button {

core/js/share.js

@@ -380,6 +380,7 @@ OC.Share={
 				}
 			});
 
+			html += '<label for="shareWith" class="hidden-visually">'+t('core', 'Share')+'</label>';
 			html += '<input id="shareWith" type="text" placeholder="'+t('core', 'Share with user or group …')+'" />';
 			html += '<span class="shareWithLoading icon-loading-small hidden"></span>';
 			html += '<ul id="shareWithList">';
@@ -396,9 +397,11 @@ OC.Share={
 					defaultExpireMessage = t('core', 'The public link will expire no later than {days} days after it is created',  {'days': escapeHTML(oc_appconfig.core.defaultExpireDate)}) + '<br/>';
 				}
 
+				html += '<label for="linkText" class="hidden-visually">'+t('core', 'Link')+'</label>';
 				html += '<input id="linkText" type="text" readonly="readonly" />';
 				html += '<input type="checkbox" name="showPassword" id="showPassword" value="1" style="display:none;" /><label for="showPassword" style="display:none;">'+t('core', 'Password protect')+'</label>';
 				html += '<div id="linkPass">';
+				html += '<label for="linkPassText" class="hidden-visually">'+t('core', 'Password')+'</label>';
 				html += '<input id="linkPassText" type="password" placeholder="'+t('core', 'Choose a password for the public link')+'" />';
 				html += '<span class="icon-loading-small hidden"></span>';
 				html += '</div>';
@@ -422,6 +425,7 @@ OC.Share={
 
 			html += '<div id="expiration">';
 			html += '<input type="checkbox" name="expirationCheckbox" id="expirationCheckbox" value="1" /><label for="expirationCheckbox">'+t('core', 'Set expiration date')+'</label>';
+			html += '<label for="expirationDate" class="hidden-visually">'+t('core', 'Expiration')+'</label>';
 			html += '<input id="expirationDate" type="text" placeholder="'+t('core', 'Expiration date')+'" style="display:none; width:90%;" />';
 			html += '<em id="defaultExpireMessage">'+defaultExpireMessage+'</em>';
 			html += '</div>';
@@ -636,7 +640,7 @@ OC.Share={
 			if (possiblePermissions & OC.PERMISSION_CREATE || possiblePermissions & OC.PERMISSION_UPDATE || possiblePermissions & OC.PERMISSION_DELETE) {
 				html += '<input id="canEdit-'+escapeHTML(shareWith)+'" type="checkbox" name="edit" class="permissions" '+editChecked+' /><label for="canEdit-'+escapeHTML(shareWith)+'">'+t('core', 'can edit')+'</label>';
 			}
-			showCrudsButton = '<a href="#" class="showCruds"><img class="svg" alt="'+t('core', 'access control')+'" title="'+t('core', 'access control')+'" src="'+OC.imagePath('core', 'actions/triangle-s')+'"/></a>';
+			showCrudsButton = '<a href="#" class="showCruds"><img class="svg" alt="'+t('core', 'access control')+'" src="'+OC.imagePath('core', 'actions/triangle-s')+'"/></a>';
 			html += '<div class="cruds" style="display:none;">';
 				if (possiblePermissions & OC.PERMISSION_CREATE) {
 					html += '<input id="canCreate-'+escapeHTML(shareWith)+'" type="checkbox" name="create" class="permissions" '+createChecked+' data-permissions="'+OC.PERMISSION_CREATE+'"/><label for="canCreate-'+escapeHTML(shareWith)+'">'+t('core', 'create')+'</label>';

core/templates/layout.guest.php

@@ -32,7 +32,9 @@
 					<header>
 						<div id="header">
 							<div class="logo svg">
-								<h1><?php p($theme->getName()); ?></h1>
+								<h1 class="hidden-visually">
+									<?php p($theme->getName()); ?>
+								</h1>
 							</div>
 							<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
 						</div>

core/templates/layout.user.php

@@ -41,7 +41,11 @@
 	</div>
 	<header><div id="header">
 			<a href="<?php print_unescaped(link_to('', 'index.php')); ?>" title="" id="owncloud">
-				<div class="logo-icon svg"></div>
+				<div class="logo-icon svg">
+					<h1 class="hidden-visually">
+						<?php p($theme->getName()); ?>
+					</h1>
+				</div>
 			</a>
 			<a href="#" class="menutoggle" tabindex="1">
 				<h1 class="header-appname">
@@ -91,7 +95,7 @@
 			</div>
 
 			<form class="searchbox" action="#" method="post">
-				<label for="query" class="visually-hidden">
+				<label for="searchbox" class="hidden-visually">
 					<?php p($l->t('Search'));?>
 				</label>
 				<input id="searchbox" class="svg" type="search" name="query"

settings/templates/personal.php

@@ -24,13 +24,16 @@
 <div class="clientsbox center">
 	<h2><?php p($l->t('Get the apps to sync your files'));?></h2>
 	<a href="<?php p($_['clients']['desktop']); ?>" target="_blank">
-		<img src="<?php print_unescaped(OCP\Util::imagePath('core', 'desktopapp.png')); ?>" />
+		<img src="<?php print_unescaped(OCP\Util::imagePath('core', 'desktopapp.png')); ?>"
+			alt="<?php p($l->t('Desktop client'));?>" />
 	</a>
 	<a href="<?php p($_['clients']['android']); ?>" target="_blank">
-		<img src="<?php print_unescaped(OCP\Util::imagePath('core', 'googleplay.png')); ?>" />
+		<img src="<?php print_unescaped(OCP\Util::imagePath('core', 'googleplay.png')); ?>"
+			alt="<?php p($l->t('Android app'));?>" />
 	</a>
 	<a href="<?php p($_['clients']['ios']); ?>" target="_blank">
-		<img src="<?php print_unescaped(OCP\Util::imagePath('core', 'appstore.png')); ?>" />
+		<img src="<?php print_unescaped(OCP\Util::imagePath('core', 'appstore.png')); ?>"
+			alt="<?php p($l->t('iOS app'));?>" />
 	</a>
 
 	<?php if (OC_Util::getEditionString() === ''): ?>
@@ -89,7 +92,9 @@ if($_['passwordChangeSupported']) {
 if($_['displayNameChangeSupported']) {
 ?>
 <form id="displaynameform" class="section">
-	<h2><?php echo $l->t('Full Name');?></h2>
+	<h2>
+		<label for="displayName"><?php echo $l->t('Full Name');?></label>
+	</h2>
 	<input type="text" id="displayName" name="displayName"
 		value="<?php p($_['displayName'])?>"
 		autocomplete="on" autocapitalize="off" autocorrect="off" />
@@ -104,7 +109,9 @@ if($_['displayNameChangeSupported']) {
 if($_['passwordChangeSupported']) {
 ?>
 <form id="lostpassword" class="section">
-	<h2><?php p($l->t('Email'));?></h2>
+	<h2>
+		<label for="email"><?php p($l->t('Email'));?></label>
+	</h2>
 	<input type="email" name="email" id="email" value="<?php p($_['email']); ?>"
 		placeholder="<?php p($l->t('Your email address'));?>"
 		autocomplete="on" autocapitalize="off" autocorrect="off" />
@@ -139,7 +146,9 @@ if($_['passwordChangeSupported']) {
 <?php endif; ?>
 
 <form class="section">
-	<h2><?php p($l->t('Language'));?></h2>
+	<h2>
+		<label for="languageinput"><?php p($l->t('Language'));?></label>
+	</h2>
 	<select id="languageinput" name="lang" data-placeholder="<?php p($l->t('Language'));?>">
 		<option value="<?php p($_['activelanguage']['code']);?>">
 			<?php p($_['activelanguage']['name']);?>