Merge pull request #12906 from owncloud/keyboardnav-feedback

Accessibility: Keyboard navigation feedback

4 files changed, 33 insertions, 7 deletions

diff --git a/core/css/apps.css b/core/css/apps.css
index e5cf6201688..08877402a4b 100644
--- a/core/css/apps.css
+++ b/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;
diff --git a/core/css/header.css b/core/css/header.css
index 2ec82ce844a..2a2622a9d0d 100644
--- a/core/css/header.css
+++ b/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);
diff --git a/core/css/styles.css b/core/css/styles.css
index 3996aade6d4..df4db4d745a 100644
--- a/core/css/styles.css
+++ b/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);
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 11e2df71458..238b2dd163e 100644
--- a/core/templates/layout.user.php
+++ b/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>