Bug 26039: Focus and Scroll to ShelfBrowser on load

When the shelf browser link is clicked we perform a full page reload
which results in a reset in the context. We should immediately focus the
shelf browser and scroll to that region to highlight the change of
content.

Test plan
1/ Enable shelf browser
2/ Search for an item in the open and navigate to the detail page
3/ Click the 'Browse shelf' link
4/ Note that upon page reload the screen scrolls to the 'Browsing...'
location of the screen.
5/ Note that the 'Browsing...' title is  'focused'
6/ Signoff.

Signed-off-by: Stina Hallin <stina.hallin@ub.lu.se>

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

JD amended patch: correctly align JS code

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc
index f7e35ad..253fe20 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc
@@ -1,13 +1,13 @@
 [% BLOCK shelfbrowser %]
     [% IF OpenOPACShelfBrowser %]
         <div id="shelfbrowser">
-            <h5 style="text-align: center;">
+            <h5 style="text-align: center;" tabindex="-1">
                 [%- IF ( starting_homebranch ) %]Browsing [% starting_homebranch | html %] shelves[% END -%]
                 [%- IF ( starting_homebranch && starting_location ) %], [% END %]
                 [%- IF ( starting_location ) %]Shelving location: [%- starting_location | html -%][% END -%]
                 [%- IF ( starting_homebranch && starting_ccode ) %], [% END %]
                 [%- IF ( starting_ccode ) %]Collection: [%- starting_ccode | html -%][% END -%]
-                <a style="font-size: 75%;" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber | html %]" class="close_shelf" >Close shelf browser</a>
+                <a style="font-size: 75%;" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber | html %]" class="close_shelf" >Close shelf browser<span class="hidden"> (Hides shelfbrowers)</span></a>
             </h5>
 
             <table class="table">

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
index 6d9bc45..f8dce1e 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
@@ -1249,9 +1249,9 @@
                             [% ITEM_RESULT.itemcallnumber | html %]
                             [% IF ( OPACShelfBrowser ) %]
                                 [% IF ( ITEM_RESULT.itemnumber == starting_itemnumber ) %]
-                                    (<a class="close_shelf" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% ITEM_RESULT.biblionumber | html %]&amp;shelfbrowse_itemnumber=[% ITEM_RESULT.itemnumber | html %]#[% tab | html %]">Browse shelf</a>)
+                                    (<a class="close_shelf" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% ITEM_RESULT.biblionumber | html %]&amp;shelfbrowse_itemnumber=[% ITEM_RESULT.itemnumber | html %]#[% tab | html %]">Browse shelf<span class="hidden"> (Opens below)</span></a>)
                                 [% ELSE %]
-                                    (<a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% ITEM_RESULT.biblionumber | uri %]&amp;shelfbrowse_itemnumber=[% ITEM_RESULT.itemnumber | uri %]#[% tab | uri %]">Browse shelf</a>)
+                                    (<a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% ITEM_RESULT.biblionumber | uri %]&amp;shelfbrowse_itemnumber=[% ITEM_RESULT.itemnumber | uri %]#[% tab | uri %]">Browse shelf<span class="hidden"> (Opens below)</span></a>)
                                 [% END %]
                             [% END %]
                         [% END %]
@@ -1578,6 +1578,15 @@
     [% END %]
 
 [% IF ( OPACShelfBrowser ) %]
+    // Focus on shelf browser if present
+    var shelfbrowser = $("#shelfbrowser");
+    if (shelfbrowser.length > 0) {
+        $('html,body').animate({
+            scrollTop: shelfbrowser.first().offset().top
+        },
+        'slow');
+        shelfbrowser.first().find(':focusable').eq(0).focus();
+    }
 
     (function prepareShelfBrowser(){