Skip Links: Select a more useful object

Skip links can select a container and find a usable element inside. Adapt
project jquery variable style.

refs #7976
This commit is contained in:
Marius Hein 2015-02-12 16:14:07 +01:00
parent fdcad4928e
commit f586714f02
2 changed files with 20 additions and 6 deletions

View File

@ -298,5 +298,8 @@ a:focus {
} }
} }
.skip-links-inline { .skip-links-inline {
margin-top: -3.5em; margin-top: -4em;
ul > li > a {
width: 16em;
}
} }

View File

@ -335,14 +335,25 @@
}, },
handleAnchor: function(query) { handleAnchor: function(query) {
var element = $(query); var $element = $(query);
if (element.length > 0) { if ($element.length > 0) {
// Try to find the first header. It is more pleasant to users
// to select the header instead a container
var $header = $element.find(':header:first');
if ($header.length > 0) {
$element = $header;
} else {
var $input = $element.find(':header:first');
if ($input.length > 0) {
$element = $input
}
}
// If we want to focus an element which has no tabindex // If we want to focus an element which has no tabindex
// add one that we can focus is // add one that we can focus is
if (element.prop('tabindex') < 0) { if ($element.prop('tabindex') < 0) {
element.prop('tabindex', 0); $element.prop('tabindex', 0);
} }
element.focus(); $element.focus();
} }
}, },