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

Wave accessibility compliance
This commit is contained in:
Morris Jobke 2014-12-19 00:30:56 +01:00
commit 3036a8714d
14 changed files with 67 additions and 33 deletions

View File

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

View File

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

View File

@ -11,8 +11,10 @@
</button> </button>
</div> </div>
<div id="app-settings-content"> <div id="app-settings-content">
<h2><?php p($l->t('WebDAV'));?></h2> <h2>
<div><input id="webdavurl" type="text" readonly="readonly" value="<?php p(OC_Helper::linkToRemote('webdav')); ?>" /></div> <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> <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>
</div> </div>

View File

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

View File

@ -96,7 +96,7 @@ OCA.Sharing.PublicApp = {
scalingup: 0 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') { 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.attr('src', OC.filePath('files_sharing', 'ajax', 'publicpreview.php') + '?' + OC.buildQueryString(params));
img.appendTo('#imgframe'); img.appendTo('#imgframe');

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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 += '<input id="shareWith" type="text" placeholder="'+t('core', 'Share with user or group …')+'" />';
html += '<span class="shareWithLoading icon-loading-small hidden"></span>'; html += '<span class="shareWithLoading icon-loading-small hidden"></span>';
html += '<ul id="shareWithList">'; 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/>'; 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 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 += '<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 += '<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 += '<input id="linkPassText" type="password" placeholder="'+t('core', 'Choose a password for the public link')+'" />';
html += '<span class="icon-loading-small hidden"></span>'; html += '<span class="icon-loading-small hidden"></span>';
html += '</div>'; html += '</div>';
@ -422,6 +425,7 @@ OC.Share={
html += '<div id="expiration">'; html += '<div id="expiration">';
html += '<input type="checkbox" name="expirationCheckbox" id="expirationCheckbox" value="1" /><label for="expirationCheckbox">'+t('core', 'Set expiration date')+'</label>'; 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 += '<input id="expirationDate" type="text" placeholder="'+t('core', 'Expiration date')+'" style="display:none; width:90%;" />';
html += '<em id="defaultExpireMessage">'+defaultExpireMessage+'</em>'; html += '<em id="defaultExpireMessage">'+defaultExpireMessage+'</em>';
html += '</div>'; html += '</div>';
@ -636,7 +640,7 @@ OC.Share={
if (possiblePermissions & OC.PERMISSION_CREATE || possiblePermissions & OC.PERMISSION_UPDATE || possiblePermissions & OC.PERMISSION_DELETE) { 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>'; 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;">'; html += '<div class="cruds" style="display:none;">';
if (possiblePermissions & OC.PERMISSION_CREATE) { 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>'; 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>';

View File

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

View File

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

View File

@ -24,13 +24,16 @@
<div class="clientsbox center"> <div class="clientsbox center">
<h2><?php p($l->t('Get the apps to sync your files'));?></h2> <h2><?php p($l->t('Get the apps to sync your files'));?></h2>
<a href="<?php p($_['clients']['desktop']); ?>" target="_blank"> <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>
<a href="<?php p($_['clients']['android']); ?>" target="_blank"> <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>
<a href="<?php p($_['clients']['ios']); ?>" target="_blank"> <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> </a>
<?php if (OC_Util::getEditionString() === ''): ?> <?php if (OC_Util::getEditionString() === ''): ?>
@ -89,7 +92,9 @@ if($_['passwordChangeSupported']) {
if($_['displayNameChangeSupported']) { if($_['displayNameChangeSupported']) {
?> ?>
<form id="displaynameform" class="section"> <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" <input type="text" id="displayName" name="displayName"
value="<?php p($_['displayName'])?>" value="<?php p($_['displayName'])?>"
autocomplete="on" autocapitalize="off" autocorrect="off" /> autocomplete="on" autocapitalize="off" autocorrect="off" />
@ -104,7 +109,9 @@ if($_['displayNameChangeSupported']) {
if($_['passwordChangeSupported']) { if($_['passwordChangeSupported']) {
?> ?>
<form id="lostpassword" class="section"> <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']); ?>" <input type="email" name="email" id="email" value="<?php p($_['email']); ?>"
placeholder="<?php p($l->t('Your email address'));?>" placeholder="<?php p($l->t('Your email address'));?>"
autocomplete="on" autocapitalize="off" autocorrect="off" /> autocomplete="on" autocapitalize="off" autocorrect="off" />
@ -139,7 +146,9 @@ if($_['passwordChangeSupported']) {
<?php endif; ?> <?php endif; ?>
<form class="section"> <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'));?>"> <select id="languageinput" name="lang" data-placeholder="<?php p($l->t('Language'));?>">
<option value="<?php p($_['activelanguage']['code']);?>"> <option value="<?php p($_['activelanguage']['code']);?>">
<?php p($_['activelanguage']['name']);?> <?php p($_['activelanguage']['name']);?>