Commit b32dc3f2 authored by Thomas Müller's avatar Thomas Müller
Browse files

Merge pull request #12906 from owncloud/keyboardnav-feedback

Accessibility: Keyboard navigation feedback
parents 995f01fa 5a678a63
......@@ -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;
......
......@@ -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;
......
......@@ -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);
......
......@@ -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);
......
......@@ -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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment