diff options
| -rw-r--r-- | resources/assets/javascripts/bootstrap/skip_links.js | 7 | ||||
| -rw-r--r-- | resources/assets/javascripts/lib/skip_links.js | 80 | ||||
| -rw-r--r-- | resources/assets/stylesheets/scss/skiplinks.scss | 29 | ||||
| -rw-r--r-- | templates/skiplinks.php | 12 |
4 files changed, 24 insertions, 104 deletions
diff --git a/resources/assets/javascripts/bootstrap/skip_links.js b/resources/assets/javascripts/bootstrap/skip_links.js index cdd178f..097e2d0 100644 --- a/resources/assets/javascripts/bootstrap/skip_links.js +++ b/resources/assets/javascripts/bootstrap/skip_links.js @@ -1,8 +1 @@ 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(); - } -}); diff --git a/resources/assets/javascripts/lib/skip_links.js b/resources/assets/javascripts/lib/skip_links.js index 4f5bd88..75dc8bb 100644 --- a/resources/assets/javascripts/lib/skip_links.js +++ b/resources/assets/javascripts/lib/skip_links.js @@ -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,44 +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; }, - insertHeadLines: function() { - var target = null; - jQuery('#skip_link_navigation a').each(function() { - target = jQuery(this); - 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.setActiveTarget(); } }; diff --git a/resources/assets/stylesheets/scss/skiplinks.scss b/resources/assets/stylesheets/scss/skiplinks.scss index b30a43d..da8cc52 100644 --- a/resources/assets/stylesheets/scss/skiplinks.scss +++ b/resources/assets/stylesheets/scss/skiplinks.scss @@ -2,13 +2,21 @@ #skip_link_navigation { background-color: $white; border: 2px solid $orange; - left: -600px; + 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; - @include hide-text(); -} - -#skiplink_list { - display: none; -} - button.skiplink { border: 0; 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 { diff --git a/templates/skiplinks.php b/templates/skiplinks.php index da22210..dcea66b 100644 --- a/templates/skiplinks.php +++ b/templates/skiplinks.php @@ -11,15 +11,9 @@ <?= htmlReady($nav->getTitle()) ?> </button> <? else : ?> - <? if (is_internal_url($url)) : ?> - <a href="<?= URLHelper::getLink($url) ?>" data-in-fullscreen="<?= $fullscreen[$index] ?>"> - <?= htmlReady($nav->getTitle()) ?> - </a> - <? else : ?> - <a href="<?= htmlReady($url) ?>" data-in-fullscreen="<?= $fullscreen[$index] ?>"> - <?= 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 ?> |