Attachment 103609 Details for Bug 25234 – Bug 25234: Update OPAC search results pagination with aria labels

[patch] Bug 25234: Update OPAC search results pagination with aria labels

Bug-25234-Update-OPAC-search-results-pagination-wi.patch (text/plain), 6.42 KB, created by Lucas Gass (lukeg) on 2020-04-23 22:02:09 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Lucas Gass (lukeg)

Created: 2020-04-23 22:02:09 UTC

Size: 6.42 KB

patch

obsolete

>From 8eca847c95e21ba67396373e40e6460083f7e7b8 Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Tue, 21 Apr 2020 21:19:49 +0000
>Subject: [PATCH] Bug 25234: Update OPAC search results pagination with aria
> labels
>
>This patch updates the include file which generates OPAC search results
>pagination so that it has better semantic markup and correct aria
>labels.
>
>To test, apply the patch and do a search in the OPAC which will return
>multiple pages of search results.
>
>View the source to confirm the markup changes:
>
> - <nav> instead of <div> surrounding the list of links, with a
>   corresponding aria label
> - Navigation links should have labels indicating which page in the
>   results they point to.
> - The current link should have "aria-disabled," and "aria-current" set.
> - Numbered links should have aria labels that indicate their number.
>
>Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
>---
> .../bootstrap/en/includes/page-numbers.inc         | 32 ++++++++++++++++------
> 1 file changed, 23 insertions(+), 9 deletions(-)
>
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/page-numbers.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/page-numbers.inc
>index b54a8caf40..d4326492b1 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/page-numbers.inc
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/page-numbers.inc
>@@ -1,23 +1,37 @@
> [% USE raw %]
> [% IF ( PAGE_NUMBERS ) %]
>-    <div class="pagination pagination-small noprint">
>-     [% IF hits_to_paginate < total %]<h6>[% hits_to_paginate | html %] of [% total | html %] results loaded, refine your search to view other records</h6>[% END %]
>+    <nav class="pagination pagination-small noprint" aria-label="Search results pagination">
>+        [% IF hits_to_paginate < total %]
>+            <h6>[% hits_to_paginate | html %] of [% total | html %] results loaded, refine your search to view other records</h6>
>+        [% END %]
>         <ul>
>             [% IF ( previous_page_offset.defined ) %]
>-                <li class="page-first"><a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %][% IF ( sort_by ) %]&amp;sort_by=[% sort_by | uri %][% END %][% IF results_per_page %]&amp;count=[% results_per_page | uri %][% END %]"><i class="fa fa-fw fa-angle-double-left"></i>  First</a></li>
>-                <li class="page-prev"><a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %]&amp;offset=[% previous_page_offset | uri %][% IF ( sort_by ) %]&amp;sort_by=[% sort_by | uri %][% END %][% IF results_per_page %]&amp;count=[% results_per_page | uri %][% END %]"> <i class="fa fa-fw fa-angle-left"></i>  Previous</a></li>
>+                <li class="page-first">
>+                    <a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %][% IF ( sort_by ) %]&amp;sort_by=[% sort_by | uri %][% END %][% IF results_per_page %]&amp;count=[% results_per_page | uri %][% END %]" aria-label="Go to the first page"><i class="fa fa-fw fa-angle-double-left"></i>  First</a>
>+                </li>
>+                <li class="page-prev">
>+                    <a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %]&amp;offset=[% previous_page_offset | uri %][% IF ( sort_by ) %]&amp;sort_by=[% sort_by | uri %][% END %][% IF results_per_page %]&amp;count=[% results_per_page | uri %][% END %]" aria-label="Go to the previous page"> <i class="fa fa-fw fa-angle-left"></i>  Previous</a>
>+                </li>
>             [% END %]
>             [% FOREACH PAGE_NUMBER IN PAGE_NUMBERS %]
>                 [% IF ( PAGE_NUMBER.highlight ) %]
>-                    <li class="active"><a clas="page-num current" href="#">[% PAGE_NUMBER.pg | html %]</a></li>
>+                    <li class="active">
>+                        <a class="page-num current" href="#" aria-disabled="true" aria-label="Current page: Page [% PAGE_NUMBER.pg | html %]" aria-current="true">[% PAGE_NUMBER.pg | html %]</a>
>+                    </li>
>                 [% ELSE %]
>-                    <li class="page-num"><a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %]&amp;offset=[% PAGE_NUMBER.offset | uri %][% IF ( sort_by ) %]&amp;sort_by=[% sort_by | uri %][% END %][% IF results_per_page %]&amp;count=[% results_per_page | uri %][% END %]">[% PAGE_NUMBER.pg | html %]</a></li>
>+                    <li class="page-num">
>+                        <a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %]&amp;offset=[% PAGE_NUMBER.offset | uri %][% IF ( sort_by ) %]&amp;sort_by=[% sort_by | uri %][% END %][% IF results_per_page %]&amp;count=[% results_per_page | uri %][% END %]" aria-label="Go to page [% PAGE_NUMBER.pg | html %]">[% PAGE_NUMBER.pg | html %]</a>
>+                    </li>
>                 [% END %]
>             [% END %]
>             [% IF ( next_page_offset ) %]
>-                <li class="page-next"><a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %]&amp;offset=[% next_page_offset | uri %][% IF ( sort_by ) %]&amp;sort_by=[% sort_by | uri %][% END %][% IF results_per_page %]&amp;count=[% results_per_page | uri %][% END %]">Next <i class="fa fa-fw fa-angle-double-right"></i></a></li>
>-                <li class="page-last"><a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %]&amp;offset=[% last_page_offset | uri %][% IF ( sort_by ) %]&amp;sort_by=[% sort_by | uri %][% END %][% IF results_per_page %]&amp;count=[% results_per_page | uri %][% END %]">Last <i class="fa fa-fw fa-angle-double-right"></i></a></li>
>+                <li class="page-next">
>+                    <a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %]&amp;offset=[% next_page_offset | uri %][% IF ( sort_by ) %]&amp;sort_by=[% sort_by | uri %][% END %][% IF results_per_page %]&amp;count=[% results_per_page | uri %][% END %]" aria-label="Go to the next page">Next <i class="fa fa-fw fa-angle-double-right"></i></a>
>+                </li>
>+                <li class="page-last">
>+                    <a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %]&amp;offset=[% last_page_offset | uri %][% IF ( sort_by ) %]&amp;sort_by=[% sort_by | uri %][% END %][% IF results_per_page %]&amp;count=[% results_per_page | uri %][% END %]" aria-label="Go to the last page">Last <i class="fa fa-fw fa-angle-double-right"></i></a>
>+                </li>
>             [% END %]
>         </ul>
>-    </div>
>+    </nav>
> [% END %]
>-- 
>2.11.0

Actions: View | Diff | Splinter Review

Attachments on bug 25234: 103423 | 103436 | 103609 | 103639