Bug 39890: Add search, menu and footer skip links to the OPAC.

Before starting the test plan, you have to enable the following system
preferences:
CurbsidePickup, useDischarge, OPACHoldsHistory,
ILLModule,EnhancedMessagingPreferencesOPAC, CookieConsent, OPACPrivacy,
opacreadinghistory, UseRecalls, OPACHoldRequests, RoutingSerials,
EnableOpacSearchHistory, virtualshelves,suggestion,
OPACViewOthersSuggestions, TagsEnabled, OpacTopissue,OPACVirtualCard.

Test plan:

A) Add skip link to menu

1. Apply the patch, you don't have to be logged in for this part.
2. Go to these different pages: search result page, record details page
   (try the different views), and Most popular page.
3. Try navigating with the keyboard, fix the focus at the top of the
   page
4. You should see a skip link in red, 'skip to menu' appear. After
   pressing enter, the focus should be on the menu.
5. Now go to these different pages: Purchase suggestions page, search
   history page, Lists page.
6. Repeat the third step and check if the skip link "Skip to menu" does
   not appear on these pages.
7. Now you have to log in to a patron account.
8. Go to your Summary page.
9. Repeat the third step with the different pages of the menu (Summary,
   Charges, Personal details, Consents, Tags, Change password, Search
   history, Checkout history, Privacy, Holds history, Recalls history,
   Purchase suggestions, Messaging, Lists, Ask for discharge,
   Interlibrary loan request, Curbside pickups, My virtual card).
10. You should see the "Skip to menu" link, after pressing enter, the
    focus should be on the menu.

B) Add a skip link to the search box

1. Try navigating with the keyboard, fix the focus on the top of the
   page.
2. Check if there is a skip link "Skip to the search" in red on each
   page of the OPAC, except on the advanced search page.

C) Add a skip link to the footer

1. Try navigating with the keyboard, fix the focus at the top of the
   OPAC  page.
2. Check if there is a skip link 'Skip to footer' after the skip link
   'Skip to main content' on each page of the OPAC.
3. Now, disable the system preferences (OPACReportProblem and
   KohaAdminEmailAddress, CookieConsent, OpacKohaUrl,
   OpacLangSelectorMode
   = 'both', or OpacLangSelectorMode = 'footer') to remove the OPAC
   footer.
4. Repeat step 2. Now, you should not have the skip link to the footer.

D)  If all the tests succeed, sign off !

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Pedro Amorim <pedro.amorim@openfifth.co.uk>
This commit is contained in:
nina martinez 2025-05-09 15:27:40 +02:00 committed by Pedro Amorim
parent c6bf858253
commit d1b39adfc5
No known key found for this signature in database
GPG Key ID: 06B75BA7F3894D55
33 changed files with 80 additions and 32 deletions

View File

@ -2843,7 +2843,7 @@ $star-selected: #EDB867;
/* end browse search */
/* Skip to content link. CSS adapted from https://webaim.org/ */
#scrolltocontent {
#scrolltocontent, #scrolltofooter, #scrolltomenu, #scrolltosearch {
background: #C60000;
border: 1px solid #FFF;
border-radius: 0 0 4px 0;

View File

@ -18,7 +18,16 @@
[% SET CookieConsentPopup = AdditionalContents.get( location => "CookieConsentPopup", lang => lang, library => branchcode || default_branch ) %]
[% SET AllPublicBranches = Branches.all( search_params => { public => 1 }, selected => opac_name, unfiltered => 1 ) %]
[% UNLESS ( advsearch ) %]
<button id="scrolltosearch">Skip to search</button>
[% END %]
[% IF ( ( IsPatronPage && loggedinusername ) || opacfacets || IsMenuPage ) %]
<button id="scrolltomenu">Skip to menu</button>
[% END %]
<button id="scrolltocontent">Skip to main content</button>
[% IF ( Koha.Preference('OPACReportProblem') && Koha.Preference('KohaAdminEmailAddress') ) || Koha.Preference( 'CookieConsent' ) || OpacKohaUrl || ( ( OpacLangSelectorMode == 'both' || OpacLangSelectorMode == 'footer') ) %]
<button id="scrolltofooter">Skip to footer</button>
[% END %]
<!-- prettier-ignore-start -->
<!-- closed in opac-bottom.inc -->
<div id="wrapper">

View File

@ -23,7 +23,7 @@
<!-- prettier-ignore-end -->
[% IF ( Koha.Preference('OPACReportProblem') && Koha.Preference('KohaAdminEmailAddress') ) || Koha.Preference( 'CookieConsent' ) || OpacKohaUrl || ( ( opaclanguagesdisplay ) && ( ! one_language_enabled ) && ( languages_loop ) && ( OpacLangSelectorMode == 'both' || OpacLangSelectorMode == 'footer') ) %]
<footer id="changelanguage" class="navbar navbar-expand navbar-light bg-light noprint">
<footer id="changelanguage" class="navbar navbar-expand navbar-light bg-light noprint footercontent">
<div class="container-fluid">
<div class="collapse navbar-collapse">
[%# Following on one line for translatability %]

View File

@ -2,7 +2,7 @@
[% USE Biblio %]
[% INCLUDE 'modals/catalog_cite.inc' %]
<ul id="action">
<ul class="menu" id="action">
[% IF Koha.Preference( 'opacuserlogin' ) == 1 %]
[% IF Koha.Preference( 'OPACHoldRequests' ) == 1 %]
[% IF ( ReservableItems ) %]

View File

@ -5,7 +5,7 @@
[% USE AdditionalContents %]
[% SET OPACResultsSidebar = AdditionalContents.get( location => "OPACResultsSidebar", lang => lang, library => logged_in_user.branchcode || default_branch ) %]
[% IF ( opacfacets && facets_loop && total ) %]
<div id="search-facets">
<div class="menu" id="search-facets">
<h2><a href="#" class="menu-collapse-toggle" aria-expanded="false">Refine your search</a></h2>
<ul class="menu-collapse">
[% IF Koha.Preference("SavedSearchFilters") && search_filters.size > 0 %]

View File

@ -3,7 +3,7 @@
[% PROCESS 'html_helpers.inc' %]
[% SET AllPublicBranches = Branches.all( search_params => { public => 1 }, selected => branch, unfiltered => 1 ) %]
<div id="search-facets">
<div class="menu" id="search-facets">
<form method="get" action="/cgi-bin/koha/opac-topissues.pl">
<h2><a href="#" class="menu-collapse-toggle" aria-expanded="false">Refine your search</a></h2>
<ul class="menu-collapse">

View File

@ -1,7 +1,7 @@
[% USE Koha %]
[% USE KohaPlugins %]
[% IF ( ( Koha.Preference( 'opacuserlogin' ) == 1 ) && loggedinusername ) %]
<div id="menu">
<div class="menu" id="menu">
<ul>
<li [% IF userview %]class="active"[% END %]> <a href="/cgi-bin/koha/opac-user.pl">Summary</a></li>

View File

@ -37,7 +37,7 @@
</div>
[% END %]
<div class="[% column_class | html %]">
<div class="[% column_class | html %] maincontent">
<div id="errormsg[% errno | html %]">
<h1>Sorry, the requested page is not available</h1>
<h2>Error [% errno | html %]</h2>

View File

@ -14,7 +14,7 @@
[% END %]
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-isbddetail' bodyclass='scrollto' %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsMenuPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]
[% WRAPPER breadcrumb_item bc_active= 1 %]

View File

@ -14,7 +14,7 @@
[% END %]
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-marcdetail' bodyclass='scrollto' %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsMenuPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]
[% WRAPPER breadcrumb_item bc_active= 1 %]

View File

@ -24,7 +24,7 @@
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-account' bodyclass='scrollto' %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]

View File

@ -95,7 +95,7 @@
[% END %]
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-curside-pickups' bodyclass='scrollto' %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]
[% WRAPPER breadcrumb_item %]

View File

@ -61,7 +61,7 @@
</head>
[% BLOCK cssinclude %][% END %]
[% INCLUDE 'bodytag.inc' bodyid='opac-detail' bodyclass='scrollto' %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsMenuPage=1 %]
[% SET hidden_columns_force = {} %]
<main class="main">
@ -1037,7 +1037,7 @@
<!-- /.col-lg-10 -->
<div class="col-lg-3">
<div id="ulactioncontainer">
<div class="menu" id="ulactioncontainer">
[% IF ( Koha.Preference('OpacBrowseResults') && busc ) %]
<div class="nav_results">
<div class="l_Results" style="display:none;">

View File

@ -18,7 +18,7 @@
[% END %]
</head>
<body id="opac-discharge" class="scrollto">
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]

View File

@ -47,7 +47,7 @@
[% END %]
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-holdshistory' %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]

View File

@ -28,7 +28,7 @@
<div class="alert alert-success" role="alert">Request placed</div>
[% END %]
[% END %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]
[% IF ( logged_in_user ) %]

View File

@ -54,7 +54,7 @@
[% ELSE %]
<body id="opac-patron-registration" class="opac">
[% END %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]

View File

@ -17,7 +17,7 @@
[% END %]
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-messaging' %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]

View File

@ -18,7 +18,7 @@
[% END %]
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-passwd' %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]

View File

@ -19,7 +19,7 @@
[% END %]
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-patron-consent' %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]

View File

@ -17,7 +17,7 @@
[% END %]
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-privacy' %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]

View File

@ -21,7 +21,7 @@
[% END %]
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-readingrecord' %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
[% IF Koha.Preference('AmazonAssocTag') %]
[% AmazonAssocTag = '?tag=' _ Koha.Preference('AmazonAssocTag') %]

View File

@ -19,7 +19,7 @@
[% END %]
</head>
<body id="opac-recall" class="scrollto">
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]

View File

@ -15,7 +15,7 @@
[% END %]
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-recalls' bodyclass='scrollto' %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]
[% WRAPPER breadcrumb_item %]

View File

@ -20,7 +20,7 @@
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-account' bodyclass='scrollto' %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]

View File

@ -20,7 +20,7 @@
[% END %]
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-search-history' bodyclass='scrollto' %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]

View File

@ -104,7 +104,7 @@
</li>
[% END %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]
[% IF ( loggedinusername ) %]

View File

@ -28,7 +28,7 @@
[% END %]
</head>
[% IF ( loggedinusername ) %][% INCLUDE 'bodytag.inc' bodyid='opac-usersuggestions' bodyclass='scrollto' %][% ELSE %][% INCLUDE 'bodytag.inc' bodyid='opac-suggestions' bodyclass='scrollto' %][% END %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]

View File

@ -63,7 +63,7 @@
[% END %]
</head>
[% IF ( loggedinusername ) %][% INCLUDE 'bodytag.inc' bodyid='opac-usertags' bodyclass='scrollto' %][% ELSE %][% INCLUDE 'bodytag.inc' bodyid='opac-tags' bodyclass='scrollto' %][% END %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]

View File

@ -46,7 +46,7 @@
[% END %]
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-topissues' bodyclass='scrollto' %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsMenuPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]

View File

@ -33,7 +33,7 @@
[% END %]
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-user' bodyclass='scrollto' %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
[% IF Koha.Preference('AmazonAssocTag') %]
[% AmazonAssocTag = '?tag=' _ Koha.Preference('AmazonAssocTag') %]

View File

@ -13,7 +13,7 @@
[% END %]
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-virtual-card' %]
[% INCLUDE 'masthead.inc' %]
[% INCLUDE 'masthead.inc' IsPatronPage=1 %]
<main class="main">
[% WRAPPER breadcrumbs %]

View File

@ -355,6 +355,45 @@ $(document).ready(function () {
}
});
$("#scrolltofooter").click(function () {
var content = $(".footercontent");
if (content.length > 0) {
$("html,body").animate(
{
scrollTop: content.first().offset().top,
},
"slow"
);
content.first().find(":focusable").eq(0).focus();
}
});
$("#scrolltomenu").click(function () {
var content = $(".menu");
if (content.length > 0) {
$("html,body").animate(
{
scrollTop: content.first().offset().top,
},
"slow"
);
content.first().find(":focusable").eq(0).focus();
}
});
$("#scrolltosearch").click(function () {
var content = $(".mastheadsearch");
if (content.length > 0) {
$("html,body").animate(
{
scrollTop: content.first().offset().top,
},
"slow"
);
content.first().find(":focusable").eq(0).focus();
}
});
if (typeof bootstrap == "object") {
$('[data-bs-toggle="tooltip"]').tooltip();
}