Merge pull request #12070 from owncloud/accessibility-fixes

Accessibility fixes

8 files changed, 95 insertions, 31 deletions

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index fddfd02caa6..60afcf9b579 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -6,7 +6,11 @@
 .actions { padding:5px; height:32px; display: inline-block; float: left; }
 .actions input, .actions button, .actions .button { margin:0; float:left; }
 .actions .button a { color: #555; }
-.actions .button a:hover, .actions .button a:active { color: #333; }
+.actions .button a:hover,
+.actions .button a:focus,
+.actions .button a:active {
+	color: #333;
+}
 .actions.hidden { display: none; }
 
 #new {
@@ -99,7 +103,9 @@
 }
 
 #filestable tbody tr { background-color:#fff; height:40px; }
-#filestable tbody tr:hover, tbody tr:active {
+#filestable tbody tr:hover,
+#filestable tbody tr:focus,
+#filestable tbody tr:active {
 	background-color: rgb(240,240,240);
 }
 #filestable tbody tr.selected {
@@ -123,7 +129,8 @@ span.extension {
 	transition: opacity 300ms;
 	vertical-align: top;
 }
-tr:hover span.extension {
+tr:hover span.extension,
+tr:focus span.extension {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 	filter: alpha(opacity=100);
 	opacity: 1;
@@ -166,7 +173,8 @@ table th .sort-indicator {
 .sort-indicator.hidden {
 	visibility: hidden;
 }
-table th:hover .sort-indicator.hidden {
+table th:hover .sort-indicator.hidden,
+table th:focus .sort-indicator.hidden {
 	visibility: visible;
 }
 
@@ -252,8 +260,10 @@ table td.filename .nametext, .uploadtext, .modified, .column-last>span:first-chi
 	width: 90%;
 }
 /* ellipsize long modified dates to make room for showing delete button */
-#fileList tr:hover .modified, #fileList tr:hover .column-last>span:first-child,
-#fileList tr:focus .modified, #fileList tr:focus .column-last>span:first-child {
+#fileList tr:hover .modified,
+#fileList tr:focus .modified,
+#fileList tr:hover .column-last>span:first-child,
+#fileList tr:focus .column-last>span:first-child {
 	width: 75%;
 }
 
@@ -280,7 +290,8 @@ table td.filename .nametext .innernametext {
 		max-width: 760px;
 	}
 
-	table tr:hover td.filename .nametext .innernametext {
+	table tr:hover td.filename .nametext .innernametext,
+	table tr:focus td.filename .nametext .innernametext {
 		max-width: 480px;
 	}
 }
@@ -290,7 +301,8 @@ table td.filename .nametext .innernametext {
 		max-width: 600px;
 	}
 
-	table tr:hover td.filename .nametext .innernametext {
+	table tr:hover td.filename .nametext .innernametext,
+	table tr:focus td.filename .nametext .innernametext {
 		max-width: 320px;
 	}
 }
@@ -300,7 +312,8 @@ table td.filename .nametext .innernametext {
 		max-width: 400px;
 	}
 
-	table tr:hover td.filename .nametext .innernametext {
+	table tr:hover td.filename .nametext .innernametext,
+	table tr:focus td.filename .nametext .innernametext {
 		max-width: 120px;
 	}
 }
@@ -310,7 +323,8 @@ table td.filename .nametext .innernametext {
 		max-width: 320px;
 	}
 
-	table tr:hover td.filename .nametext .innernametext {
+	table tr:hover td.filename .nametext .innernametext,
+	table tr:focus td.filename .nametext .innernametext {
 		max-width: 40px;
 	}
 }
@@ -344,11 +358,13 @@ table td.filename .uploadtext {
 }
 /* Show checkbox when hovering, checked, or selected */
 #fileList tr:hover td.filename>input[type="checkbox"]:first-child,
+#fileList tr:focus td.filename>input[type="checkbox"]:first-child,
 #fileList tr td.filename>input[type="checkbox"]:checked:first-child,
 #fileList tr.selected td.filename>input[type="checkbox"]:first-child {
 	opacity: 1;
 }
 .lte9 #fileList tr:hover td.filename>input[type="checkbox"]:first-child,
+.lte9 #fileList tr:focus td.filename>input[type="checkbox"]:first-child,
 .lte9 #fileList tr td.filename>input[type="checkbox"][checked=checked]:first-child,
 .lte9 #fileList tr.selected td.filename>input[type="checkbox"]:first-child {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
@@ -469,13 +485,15 @@ a.action>img {
 	position: relative;
 	top: -21px;
 }
-#fileList tr:hover a.action, #fileList a.action.permanent {
+#fileList tr:hover a.action, #fileList a.action.permanent
+#fileList tr:focus a.action, #fileList a.action.permanent {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 	filter: alpha(opacity=50);
 	opacity: .5;
 	display:inline;
 }
-#fileList tr:hover a.action:hover {
+#fileList tr:hover a.action:hover,
+#fileList tr:focus a.action:focus {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 	filter: alpha(opacity=100);
 	opacity: 1;
@@ -489,7 +507,10 @@ a.action>img {
 	height: 70px;
 }
 
-.summary:hover, .summary, table tr.summary td {
+.summary:hover,
+.summary:focus,
+.summary,
+table tr.summary td {
 	background-color: transparent;
 }
 
diff --git a/apps/files/js/fileactions.js b/apps/files/js/fileactions.js
index 8ae0d8f1b2e..38ede46beb8 100644
--- a/apps/files/js/fileactions.js
+++ b/apps/files/js/fileactions.js
@@ -261,7 +261,7 @@
 					}
 					var html = '<a href="#" class="action action-' + name.toLowerCase() + '" data-action="' + name + '">';
 					if (img) {
-						html += '<img class ="svg" src="' + img + '" />';
+						html += '<img class ="svg" alt="" src="' + img + '" />';
 					}
 					html += '<span> ' + actionText + '</span></a>';
 
diff --git a/core/css/apps.css b/core/css/apps.css
index ce2e15595af..e5cf6201688 100644
--- a/core/css/apps.css
+++ b/core/css/apps.css
@@ -55,6 +55,7 @@
 }
 
 #app-navigation li:hover > a,
+#app-navigation li:focus > a,
 #app-navigation .selected,
 #app-navigation .selected a {
 	background-color: #ddd;
@@ -96,10 +97,12 @@
 	outline: none !important;
 	box-shadow: none;
 }
-#app-navigation .collapsible:hover > a {
+#app-navigation .collapsible:hover > a,
+#app-navigation .collapsible:focus > a {
 	background-image: none;
 }
-#app-navigation .collapsible:hover > .collapse {
+#app-navigation .collapsible:hover > .collapse,
+#app-navigation .collapsible:focus > .collapse {
 	display: block;
 }
 
@@ -139,7 +142,8 @@
 	background-image: -ms-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
 }
 
-#app-navigation > ul .collapsible.open:hover {
+#app-navigation > ul .collapsible.open:hover,
+#app-navigation > ul .collapsible.open:focus {
 	box-shadow: inset 0 0 3px #ddd;
 }
 
@@ -179,7 +183,8 @@
 		opacity: .5;
 	}
 
-	#app-navigation .app-navigation-entry-deleted-button:hover {
+	#app-navigation .app-navigation-entry-deleted-button:hover,
+	#app-navigation .app-navigation-entry-deleted-button:focus {
 		opacity: 1;
 	}
 
diff --git a/core/css/header.css b/core/css/header.css
index 33eb7e25cc6..026240ea1b0 100644
--- a/core/css/header.css
+++ b/core/css/header.css
@@ -48,6 +48,9 @@
 	height: 120px;
 	margin: 0 auto;
 }
+#header .logo h1 {
+	display: none;
+}
 
 #header .logo-wide {
 	background-image: url(../img/logo-wide.svg);
diff --git a/core/css/styles.css b/core/css/styles.css
index 9604cb0fa4a..c45588cece6 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -731,12 +731,44 @@ label.infield {
 	margin-left: 1em;
 }
 
-tr .action:not(.permanent), .selectedActions a { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; }
-tr:hover .action, tr .action.permanent, .selectedActions a { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=50); opacity:.5; }
-tr .action { width:16px; height:16px; }
-.header-action { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter:alpha(opacity=80); opacity:.8; }
-tr:hover .action:hover, .selectedActions a:hover, .header-action:hover { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; }
-tbody tr:hover, tr:active { background-color:#f8f8f8; }
+tr .action:not(.permanent),
+.selectedActions a {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	filter: alpha(opacity=0);
+	opacity: 0;
+}
+tr:hover .action,
+tr:focus .action,
+tr .action.permanent,
+.selectedActions a {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	filter: alpha(opacity=50);
+	opacity: .5;
+}
+tr .action {
+	width: 16px;
+	height: 16px;
+}
+.header-action {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+	filter: alpha(opacity=80);
+	opacity: .8;
+}
+tr:hover .action:hover,
+tr:focus .action:focus,
+.selectedActions a:hover,
+.selectedActions a:focus,
+.header-action:hover,
+.header-action:focus {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	filter: alpha(opacity=100);
+	opacity: 1;
+}
+tbody tr:hover,
+tbody tr:focus,
+tbody tr:active {
+	background-color: #f8f8f8;
+}
 
 code { font-family:"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", monospace; }
 
diff --git a/core/templates/layout.guest.php b/core/templates/layout.guest.php
index 763af4dc1d2..34d7a210841 100644
--- a/core/templates/layout.guest.php
+++ b/core/templates/layout.guest.php
@@ -31,7 +31,9 @@
 				<?php if ($_['bodyid'] === 'body-login' ): ?>
 					<header>
 						<div id="header">
-							<div class="logo svg"></div>
+							<div class="logo svg">
+								<h1><?php p($theme->getName()); ?></h1>
+							</div>
 							<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
 						</div>
 					</header>
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index f7f2b3dc735..d8129ecfc67 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -43,8 +43,8 @@
 			<a href="<?php print_unescaped(link_to('', 'index.php')); ?>" title="" id="owncloud">
 				<div class="logo-icon svg"></div>
 			</a>
-			<a href="#" class="menutoggle">
-				<div class="header-appname">
+			<a href="#" class="menutoggle" tabindex="1">
+				<h1 class="header-appname">
 					<?php
 						if(OC_Util::getEditionString() === '') {
 							p(!empty($_['application'])?$_['application']: $l->t('Apps'));
@@ -52,12 +52,12 @@
 							print_unescaped($theme->getHTMLName());
 						}
 					?>
-				</div>
+				</h1>
 				<div class="icon-caret svg"></div>
 			</a>
 			<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
 			<div id="settings" class="svg">
-				<div id="expand" tabindex="0" role="link">
+				<div id="expand" tabindex="3" role="link">
 					<?php if ($_['enableAvatars']): ?>
 					<div class="avatardiv<?php if ($_['userAvatarSet']) { print_unescaped(' avatardiv-shown"'); } else { print_unescaped('" style="display: none"'); } ?>>
 						<?php if ($_['userAvatarSet']): ?>
@@ -92,7 +92,7 @@
 			<form class="searchbox" action="#" method="post">
 				<input id="searchbox" class="svg" type="search" name="query"
 					value="<?php if(isset($_POST['query'])) {p($_POST['query']);};?>"
-					autocomplete="off" />
+					autocomplete="off" tabindex="2" />
 			</form>
 		</div></header>
 
diff --git a/core/templates/login.php b/core/templates/login.php
index ad9db14bac1..425c3db75c8 100644
--- a/core/templates/login.php
+++ b/core/templates/login.php
@@ -14,7 +14,8 @@
 			</div>
 		<?php endif; ?>
 		<p id="message" class="hidden">
-			<img class="float-spinner" src="<?php p(\OCP\Util::imagePath('core', 'loading-dark.gif'));?>"/>
+			<img class="float-spinner" alt=""
+				src="<?php p(\OCP\Util::imagePath('core', 'loading-dark.gif'));?>" />
 			<span id="messageText"></span>
 			<!-- the following div ensures that the spinner is always inside the #message div -->
 			<div style="clear: both;"></div>