Skip to content
Snippets Groups Projects
Commit 74b9ff76 authored by Moritz Strohm's avatar Moritz Strohm Committed by Jan-Hendrik Willms
Browse files

handle skiplink focus via CSS, closes #1892 

Closes #1892

Merge request studip/studip!1239
parent 76e48ec7
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/assets/javascripts/bootstrap/skip_links.js
+ 0
− 7
View file @ 74b9ff76
STUDIP.domReady(STUDIP.SkipLinks.initialize);
jQuery(document).on('keyup', STUDIP.SkipLinks.showSkipLinkNavigation);
jQuery(document).on('click', function(event) {
if (!jQuery(event.target).is('#skip_link_navigation a')) {
STUDIP.SkipLinks.moveSkipLinkNavigationOut();
}
});
resources/assets/javascripts/lib/skip_links.js
+ 2
− 94
View file @ 74b9ff76
......@@ -10,56 +10,12 @@ const isSelectorValid = (dummyElement =>
})(document.createDocumentFragment());
const SkipLinks = {
activeElement: null,
navigationStatus: 0,
/**
* Displays the skip link navigation after first hitting the tab-key
* @param event: event-object of type keyup
*/
showSkipLinkNavigation: function(event) {
if (event.keyCode === 9) {
//tab-key
SkipLinks.moveSkipLinkNavigationIn();
}
},
/**
* shows the skiplink-navigation window by moving it from the left
*/
moveSkipLinkNavigationIn: function() {
if (SkipLinks.navigationStatus === 0) {
var VpWidth = jQuery(window).width();
jQuery('#skip_link_navigation li:first a').focus();
jQuery('#skip_link_navigation').css({ left: VpWidth / 2, opacity: 0 });
jQuery('#skip_link_navigation').animate({ opacity: 1.0 }, 500);
SkipLinks.navigationStatus = 1;
}
},
/**
* removes the skiplink-navigation window by moving it out of viewport
*/
moveSkipLinkNavigationOut: function() {
if (SkipLinks.navigationStatus === 1) {
jQuery(SkipLinks.box).hide();
jQuery('#skip_link_navigation').animate({ opacity: 0 }, 500, function() {
jQuery(this).css('left', '-600px');
});
}
SkipLinks.navigationStatus = 2;
},
/**
* Inserts the list with skip links
*/
insertSkipLinks: function() {
jQuery('#skip_link_navigation').prepend(jQuery('#skiplink_list'));
jQuery('#skiplink_list').show();
jQuery('#skip_link_navigation').attr('aria-busy', 'false');
jQuery('#skip_link_navigation').attr('tabindex', '-1');
SkipLinks.insertHeadLines();
return false;
},
/**
......@@ -67,7 +23,7 @@ const SkipLinks = {
* and highlights it
*/
setActiveTarget (id) {
var fragment = null;
let fragment = null;
// set active area only if skip links are activated
if (!document.getElementById('skip_link_navigation')) {
return false;
......@@ -78,8 +34,7 @@ const SkipLinks = {
fragment = document.location.hash;
}
if (fragment.length > 0 && isSelectorValid(fragment) && fragment !== SkipLinks.activeElement && document.querySelector(fragment)) {
SkipLinks.moveSkipLinkNavigationOut();
if (fragment.length > 0 && isSelectorValid(fragment) && document.querySelector(fragment)) {
if (jQuery(fragment).is(':focusable')) {
jQuery(fragment)
.click()
......@@ -88,60 +43,13 @@ const SkipLinks = {
//Set the focus on the first focusable element:
jQuery(fragment).find(':focusable').eq(0).focus();
}
SkipLinks.activeElement = fragment;
return true;
} else {
jQuery('#skip_link_navigation li a')
.first()
.focus();
}
return false;
},
injectAriaRoles: function() {
jQuery('#main_content').attr({
role: 'main',
'aria-labelledby': 'main_content_landmark_label'
});
jQuery('#layout_content').attr({
role: 'main',
'aria-labelledby': 'layout_content_landmark_label'
});
jQuery('#layout_infobox').attr({
role: 'complementary',
'aria-labelledby': 'layout_infobox_landmark_label'
});
},
insertHeadLines: function() {
var target = null;
jQuery('#skip_link_navigation a').each(function() {
target = jQuery(this).attr('href');
if (jQuery(target).is('li,td')) {
jQuery(target).prepend(
'<h2 id="' +
jQuery(target).attr('id') +
'_landmark_label" class="skip_target">' +
jQuery(this).text() +
'</h2>'
);
} else {
jQuery(target).before(
'<h2 id="' +
jQuery(target).attr('id') +
'_landmark_label" class="skip_target">' +
jQuery(this).text() +
'</h2>'
);
}
jQuery(target).attr('aria-labelledby', jQuery(target).attr('id') + '_landmark_label');
});
},
initialize: function() {
SkipLinks.insertSkipLinks();
SkipLinks.injectAriaRoles();
SkipLinks.setActiveTarget();
}
};
......
resources/assets/stylesheets/less/skiplinks.less
+ 22
− 13
View file @ 74b9ff76
/* skiplink-area highlighting -------------------------------------------- */
#skip_link_navigation {
background-color: #fff;
border: 2px solid #f60;
left: -600px;
background-color: @white;
border: 2px solid @orange;
left: 50vw;
margin: 0;
padding: 10px;
position: fixed;
transform: translateX(-50%);
transition: opacity 0.5s linear;
top: 20px;
z-index: 3000;
&:not(:focus-within) {
opacity: 0;
pointer-events: none;
}
ul {
list-style-type: none;
margin: 0;
......@@ -16,21 +24,22 @@
}
}
.skip_target {
position: absolute;
.hide-text();
}
#skiplink_list {
display: none;
}
button.skiplink {
border: 0;
background-color: #fff;
background-color: @white;
color: @base-color;
cursor: pointer;
line-height: 1em;
margin-bottom: 0.1em;
&:hover,
&:active {
color: @active-color;
}
@media not prefers-reduced-motion {
transition: color 0.3s;
}
}
body.enable-skiplinks {
......
templates/skiplinks.php
+ 3
− 5
View file @ 74b9ff76
......@@ -8,11 +8,9 @@
<? if (mb_substr($url = $nav->getURL(), 0, 1) == '#') : ?>
<button class="skiplink" role="link" onclick="STUDIP.SkipLinks.setActiveTarget('<?= $url ?>');"><?= htmlReady($nav->getTitle()) ?></button>
<? else : ?>
<? if (is_internal_url($url)) : ?>
<a href="<?= URLHelper::getLink($url) ?>"><?= htmlReady($nav->getTitle()) ?></a>
<? else : ?>
<a href="<?= htmlReady($url) ?>"><?= htmlReady($nav->getTitle()) ?></a>
<? endif ?>
<a href="<?= URLHelper::getLink($url, [], !is_internal_url($url)) ?>" data-in-fullscreen="<?= $fullscreen[$index] ?>">
<?= htmlReady($nav->getTitle()) ?>
</a>
<? endif ?>
</li>
<? endforeach ?>
......
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