Merge pull request #12906 from owncloud/keyboardnav-feedback

Accessibility: Keyboard navigation feedback

apps/files/css/files.css

@@ -105,6 +105,7 @@
 #filestable tbody tr { background-color:#fff; height:40px; }
 #filestable tbody tr:hover,
 #filestable tbody tr:focus,
+#filestable tbody .name:focus,
 #filestable tbody tr:active {
 	background-color: rgb(240,240,240);
 }
@@ -503,7 +504,7 @@ a.action>img {
 
 #fileList a.action {
 	display: inline;
-	padding: 18px 8px;
+	padding: 17px 8px;
 	line-height: 50px;
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 	filter: alpha(opacity=0);
@@ -516,15 +517,19 @@ a.action>img {
 	position: relative;
 	top: -21px;
 }
-#fileList tr:hover a.action, #fileList a.action.permanent
-#fileList tr:focus a.action, #fileList a.action.permanent {
+#fileList tr:hover a.action,
+#fileList a.action.permanent,
+#fileList tr:focus a.action,
+#fileList a.action.permanent
+/*#fileList .name:focus .action*/ {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 	filter: alpha(opacity=50);
 	opacity: .5;
 	display:inline;
 }
 #fileList tr:hover a.action:hover,
-#fileList tr:focus a.action:focus {
+#fileList tr:focus a.action:focus,
+#fileList .name:focus a.action:focus {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 	filter: alpha(opacity=100);
 	opacity: 1;

core/css/apps.css

@@ -56,6 +56,7 @@
 
 #app-navigation li:hover > a,
 #app-navigation li:focus > a,
+#app-navigation a:focus,
 #app-navigation .selected,
 #app-navigation .selected a {
 	background-color: #ddd;

core/css/header.css

@@ -7,6 +7,22 @@
 	-ms-user-select: none;
 }
 
+#skip-to-content a {
+	position: absolute;
+	left: -10000px;
+	top: auto;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+}
+#skip-to-content a:focus {
+	left: 76px;
+	top: -9px;
+	color: #fff;
+	width: auto;
+	height: auto;
+}
+
 
 
 /* HEADERS ------------------------------------------------------------------ */
@@ -83,9 +99,9 @@
 }
 .menutoggle:hover .header-appname,
 .menutoggle:hover .icon-caret,
-.menutoggle:focus .header-appname
-.menutoggle:focus .icon-caret
-.menutoggle.active .header-appname
+.menutoggle:focus .header-appname,
+.menutoggle:focus .icon-caret,
+.menutoggle.active .header-appname,
 .menutoggle.active .icon-caret {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 	filter: alpha(opacity=100);

core/css/styles.css

@@ -192,6 +192,7 @@ input[type="submit"]:hover, input[type="submit"]:focus,
 input[type="button"]:hover, input[type="button"]:focus,
 button:hover, button:focus,
 .button:hover, .button:focus,
+.button a:focus,
 select:hover, select:focus, select:active {
 	background-color: rgba(255, 255, 255, .95);
 	color: #111;
@@ -974,6 +975,7 @@ div.crumb a.ellipsislink {
 /* some feedback for hover/tap on breadcrumbs */
 div.crumb:hover,
 div.crumb:focus,
+div.crumb a:focus,
 div.crumb:active {
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 	filter:alpha(opacity=70);

core/templates/layout.user.php

@@ -40,14 +40,16 @@
 		<?php endif; ?>
 	</div>
 	<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" tabindex="-1">
 				<div class="logo-icon svg">
 					<h1 class="hidden-visually">
 						<?php p($theme->getName()); ?>
 					</h1>
 				</div>
 			</a>
-			<a href="#" class="menutoggle" tabindex="1">
+
+			<a href="#" class="menutoggle" tabindex="2">
 				<h1 class="header-appname">
 					<?php
 						if(OC_Util::getEditionString() === '') {
@@ -59,9 +61,14 @@
 				</h1>
 				<div class="icon-caret svg"></div>
 			</a>
+
+			<div id="skip-to-content">
+				<a href="#app-content" tabindex="1"><?php p($l->t('Skip to content')); ?></a>
+			</div>
+
 			<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
 			<div id="settings" class="svg">
-				<div id="expand" tabindex="3" role="link">
+				<div id="expand" tabindex="4" role="link">
 					<?php if ($_['enableAvatars']): ?>
 					<div class="avatardiv<?php if ($_['userAvatarSet']) { print_unescaped(' avatardiv-shown"'); } else { print_unescaped('" style="display: none"'); } ?>>
 						<?php if ($_['userAvatarSet']): ?>
@@ -100,7 +107,7 @@
 				</label>
 				<input id="searchbox" class="svg" type="search" name="query"
 					value="<?php if(isset($_POST['query'])) {p($_POST['query']);};?>"
-					autocomplete="off" tabindex="2" />
+					autocomplete="off" tabindex="3" />
 			</form>
 		</div></header>