Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 22807: (follow-up) Update style of skip button

Browse source 
This patch updates the markup and style of the skip button, adapting
(i.e. stealing) the style of the skip link at https://webaim.org.

To test, apply the patch and rebuild the OPAC CSS:
https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client

Go to any page in the OPAC and hit the tab key. The "Skip to main
content" link should appear. Tabbing away from it should cause the link
to hide. Hitting the ENTER key when the link is highlighted should cause
the page to scroll to the main content.

Signed-off-by: Hayley Mapley <hayleymapley@catalyst.net.nz>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This commit is contained in:
Owen Leonard 2020-06-10 18:30:50 +00:00 committed by Jonathan Druart
parent 78cfac8dd5
commit 2e94cb26a8
2 changed files with 26 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
View file

@ -3236,4 +3236,29 @@ $star-selected: #EDB867;
}
/*end browse search*/
/* Skip to content link. CSS adapted from https://webaim.org/ */
#scrolltocontent {
background: #c60000;
border: 1px solid white;
border-radius: 0 0 4px 0;
border-width: 0 1px 1px 0;
color: white;
left: 0px;
padding: 6px 12px;
position: absolute;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(58, 0, 0, 0.75);
top: -40px;
transition: top .5s ease-out;
z-index: 100;
&:focus {
left: 0px;
outline-color: transparent;
position: absolute;
top: 0px;
transition: top .1s ease-in;
}
}
@import "responsive";

2
koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
View file

@ -12,7 +12,7 @@
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<div class="container-fluid">
<button id="scrolltocontent" class="sr-only sr-only-focusable pull-left nav btn btn-danger" type="button">Skip to main content</button>
<button id="scrolltocontent">Skip to main content</button>
<h1 id="logo">
<a class="brand" href="/cgi-bin/koha/opac-main.pl">
[% IF ( LibraryNameTitle ) %]