Bug 27846: reports, reserve and reviews folders

Modified breadcrumbs to be accessible, in particular for a
screen-reader.

Made the block of breadcrumbs be a <nav aria label="Breadcrumb"
class="breadcrumb"> with an ordered list inside. The last breadcrumbs
also has aria-current="page" to specify that it is the current page.

To test:
1) Apply patch
2) Build scss file
3) Ensure each of the files in the reports, reserve and reviews folders
   have breadcrumbs that are in a <nav aria label="Breadcrumb"
   class="breadcrumb"> block
4) Ensure that there is an ordered list in the block of breadcrumbs
5) Ensure that the last breadcrumb has aria-current="page"
6) Ensure that the breadcrumbs on each page of the staff client
   belonging to these files look the same as before, but the '>' symbol
   is replaced with '/' and the last breadcrumb has bold text
7) Ensure that when the last breadcrumb is clicked it takes you to the
   page you are currently on

Sponsored-by: Catalyst IT
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

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

koha-tmpl/intranet-tmpl/prog/en/modules/reports/acquisitions_stats.tt

@@ -8,7 +8,32 @@
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a> [% IF ( do_it ) %]&rsaquo; <a href="/cgi-bin/koha/reports/acquisitions_stats.pl">Acquisitions statistics</a> &rsaquo; Results[% ELSE %] &rsaquo; Acquisitions statistics [% END %]</div>
+<nav aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
+        </li>
+        [% IF ( do_it ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/acquisitions_stats.pl">Acquisitions statistics</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Results
+                </a>
+            </li>
+        [% ELSE %]
+            <li>
+                <a href="#" aria-current="page">
+                    Acquisitions statistics
+                </a>
+            </li>
+        [% END %]
+    </ol>
+</nav>
 
 <div class="main container-fluid">
     <div class="row">

koha-tmpl/intranet-tmpl/prog/en/modules/reports/bor_issues_top.tt

@@ -11,7 +11,32 @@
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a> [% IF ( do_it ) %]&rsaquo; <a href="/cgi-bin/koha/reports/bor_issues_top.pl">Patrons with the most checkouts</a> &rsaquo; Results[% ELSE %]&rsaquo; Patrons with the most checkouts[% END %]</div>
+<nav aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
+        </li>
+        [% IF ( do_it ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/bor_issues_top.pl">Patrons with the most checkouts</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Results
+                </a>
+            </li>
+        [% ELSE %]
+            <li>
+                <a href="#" aria-current="page">
+                    Patrons with the most checkouts
+                </a>
+            </li>
+        [% END %]
+    </ol>
+</nav>
 
 <div class="main container-fluid">
     <div class="row">

koha-tmpl/intranet-tmpl/prog/en/modules/reports/borrowers_out.tt

@@ -8,7 +8,21 @@
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a> &rsaquo; Patrons with no checkouts</div>
+<nav aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
+        </li>
+        <li>
+            <a href="#" aria-current="page">
+                Patrons with no checkouts
+            </a>
+        </li>
+    </ol>
+</nav>
 
 <div class="main container-fluid">
     <div class="row">

koha-tmpl/intranet-tmpl/prog/en/modules/reports/borrowers_stats.tt

@@ -14,7 +14,32 @@
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a> &rsaquo; <a href="/cgi-bin/koha/reports/borrowers_stats.pl">Patrons statistics</a>[% IF ( do_it ) %] &rsaquo; Results[% END %]</div>
+<nav aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
+        </li>
+        [% IF ( do_it ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/borrowers_stats.pl">Patrons statistics</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Results
+                </a>
+            </li>
+        [% ELSE %]
+            <li>
+                <a href="#" aria-current="page">
+                    Patrons statistics
+                </a>
+            </li>
+        [% END %]
+    </ol>
+</nav>
 
 <div class="main container-fluid">
     <div class="row">

koha-tmpl/intranet-tmpl/prog/en/modules/reports/cash_register_stats.tt

@@ -17,15 +17,33 @@
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
-<div id="breadcrumbs">
-    <a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
-    &rsaquo;
-    [% IF ( do_it ) %]
-        <a href="/cgi-bin/koha/reports/cash_register_stats.pl">Cash register statistics</a> &rsaquo; Results
-    [% ELSE %]
-        Cash register statistics
-    [% END %]
-</div>
+<nav aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
+        </li>
+
+        [% IF ( do_it ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/cash_register_stats.pl">Cash register statistics</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Results
+                </a>
+            </li>
+        [% ELSE %]
+            <li>
+                <a href="#" aria-current="page">
+                    Cash register statistics
+                </a>
+            </li>
+        [% END %]
+    </ol>
+</nav>
 
 <div class="main container-fluid">
     <div class="row">

koha-tmpl/intranet-tmpl/prog/en/modules/reports/cat_issues_top.tt

@@ -9,7 +9,32 @@
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a> &rsaquo; [% IF ( do_it ) %]<a href="/cgi-bin/koha/reports/cat_issues_top.pl">Most-circulated items</a> &rsaquo; Results[% ELSE %]Most-Circulated Items[% END %]</div>
+<nav aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
+        </li>
+        [% IF ( do_it ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/cat_issues_top.pl">Most-circulated items</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Results
+                </a>
+            </li>
+        [% ELSE %]
+            <li>
+                <a href="#" aria-current="page">
+                    Most-Circulated Items
+                </a>
+            </li>
+        [% END %]
+    </ol>
+</nav>
 
 <div class="main container-fluid">
     <div class="row">

koha-tmpl/intranet-tmpl/prog/en/modules/reports/catalogue_out.tt

@@ -10,7 +10,21 @@
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a> &rsaquo; Items with no checkouts</div>
+<nav aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
+        </li>
+        <li>
+            <a href="#" aria-current="page">
+                Items with no checkouts
+            </a>
+        </li>
+    </ol>
+</nav>
 
 <div class="main container-fluid">
     <div class="row">

koha-tmpl/intranet-tmpl/prog/en/modules/reports/catalogue_stats.tt

@@ -9,7 +9,32 @@
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a> [% IF ( do_it ) %]&rsaquo; <a href="/cgi-bin/koha/reports/catalogue_stats.pl">Catalog statistics</a> &rsaquo; Results[% ELSE %]&rsaquo; Catalog statistics[% END %]</div>
+<nav aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
+        </li>
+        [% IF ( do_it ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/catalogue_stats.pl">Catalog statistics</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Results
+                </a>
+            </li>
+        [% ELSE %]
+            <li>
+                <a href="#" aria-current="page">
+                    Catalog statistics
+                </a>
+            </li>
+        [% END %]
+    </ol>
+</nav>
 
 <div class="main container-fluid">
     <div class="row">

koha-tmpl/intranet-tmpl/prog/en/modules/reports/dictionary.tt

@@ -20,13 +20,77 @@
     [%- END -%]
 [%- END -%]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a> &rsaquo; <a href="/cgi-bin/koha/reports/guided_reports.pl">Guided reports wizard</a>
-[% IF ( new_dictionary ) %] &rsaquo; <a href="/cgi-bin/koha/reports/dictionary.pl">Dictionary</a> &rsaquo; <strong>Name the new definition</strong>
-[% ELSIF ( step_2 ) %] &rsaquo; <a href="/cgi-bin/koha/reports/dictionary.pl">Dictionary</a> &rsaquo; <strong>Step 2: Choose the area </strong> 
-[% ELSIF ( step_3 ) %] &rsaquo; <a href="/cgi-bin/koha/reports/dictionary.pl">Dictionary</a> &rsaquo; <strong>Step 3: Choose a column </strong>
-[% ELSIF ( step_4 ) %] &rsaquo; <a href="/cgi-bin/koha/reports/dictionary.pl">Dictionary</a> &rsaquo; <strong>Step 4: Specify a value </strong> 
-[% ELSIF ( step_5 ) %] &rsaquo; <a href="/cgi-bin/koha/reports/dictionary.pl">Dictionary</a> &rsaquo; <strong>Step 5: Confirm definition</strong> 
-[% ELSE %] &rsaquo; <strong> Dictionary </strong>[% END %]</div>
+<nav aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reports/guided_reports.pl">Guided reports wizard</a>
+        </li>
+
+        [% IF ( new_dictionary ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/dictionary.pl">Dictionary</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Name the new definition
+                </a>
+            </li>
+
+        [% ELSIF ( step_2 ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/dictionary.pl">Dictionary</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Step 2: Choose the area
+                </a>
+            </li>
+
+        [% ELSIF ( step_3 ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/dictionary.pl">Dictionary</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Step 3: Choose a column
+                </a>
+            </li>
+
+        [% ELSIF ( step_4 ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/dictionary.pl">Dictionary</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Step 4: Specify a value
+                </a>
+            </li>
+
+        [% ELSIF ( step_5 ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/dictionary.pl">Dictionary</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Step 5: Confirm definition
+                </a>
+            </li>
+
+        [% ELSE %]
+            <li>
+                <a href="#" aria-current="page">
+                    Dictionary
+                </a>
+            </li>
+        [% END %]
+    </ol>
+</nav>
 
 <div class="main container-fluid">
     <div class="row">

koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt

@@ -66,38 +66,86 @@
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'circ-search.inc' %]
 
-<div id="breadcrumbs">
-    <a href="/cgi-bin/koha/mainpage.pl">Home</a>
-    &rsaquo; <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
-    &rsaquo; <a href="/cgi-bin/koha/reports/guided_reports.pl">Guided reports wizard</a>
-
-    [% IF ( saved1 ) %]
-        &rsaquo; Saved reports
-    [% ELSIF ( create ) %]
-        &rsaquo; Create from SQL
-    [% ELSIF ( showsql ) %]
-        &rsaquo; <a href="/cgi-bin/koha/reports/guided_reports.pl?phase=Use%20saved">Saved reports</a> &rsaquo; [% reportname | html %] ([% id | html %])
-    [% ELSIF ( editsql ) %]
-        &rsaquo; <a href="/cgi-bin/koha/reports/guided_reports.pl?phase=Use%20saved">Saved reports</a> &rsaquo; <a href="/cgi-bin/koha/reports/guided_reports.pl?reports=[% id | uri %]&amp;phase=Show%20SQL">[% reportname | html %] ([% id | html %])</a> &rsaquo; Edit
-    [% ELSIF ( execute ) %]
-        &rsaquo; <a href="/cgi-bin/koha/reports/guided_reports.pl?phase=Use%20saved">Saved reports</a> &rsaquo; <a href="/cgi-bin/koha/reports/guided_reports.pl?reports=[% id | uri %]&amp;phase=Show%20SQL">[% name | html %] ([% id | html %])</a> &rsaquo; Run
-    [% ELSIF ( build1 || build2 || build3 || build4 || build5 || build6 ) %]
-        &rsaquo; <a href="/cgi-bin/koha/reports/guided_reports.pl?phase=Build%20new">Build a report</a>
-        [% IF ( build1 ) %]
-            &rsaquo; Step 1 of 6: Choose a module
-        [% ELSIF ( build2 ) %]
-            &rsaquo; Step 2 of 6: Pick a report type
-        [% ELSIF ( build3 ) %]
-            &rsaquo; Step 3 of 6: Select columns for display
-        [% ELSIF ( build4 ) %]
-            &rsaquo; Step 4 of 6: Select criteria to limit on
-        [% ELSIF ( build5 ) %]
-            &rsaquo; Step 5 of 6: Pick which columns to total
-        [% ELSIF ( build6 ) %]
-            &rsaquo; Step 6 of 6: Select how you want the report ordered
+<nav aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reports/guided_reports.pl">Guided reports wizard</a>
+        </li>
+
+        [% IF ( saved1 ) %]
+            <li>
+                <a href="#" aria-current="page">
+                    Saved reports
+                </a>
+            </li>
+        [% ELSIF ( create ) %]
+            <li>
+                <a href="#" aria-current="page">
+                    Create from SQL
+                </a>
+            </li>
+        [% ELSIF ( showsql ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/guided_reports.pl?phase=Use%20saved">Saved reports</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    [% reportname | html %] ([% id | html %])
+                </a>
+            </li>
+        [% ELSIF ( editsql ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/guided_reports.pl?phase=Use%20saved">Saved reports</a>
+            </li>
+            <li>
+                <a href="/cgi-bin/koha/reports/guided_reports.pl?reports=[% id | uri %]&amp;phase=Show%20SQL">[% reportname | html %] ([% id | html %])</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Edit
+                </a>
+            </li>
+        [% ELSIF ( execute ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/guided_reports.pl?phase=Use%20saved">Saved reports</a>
+            </li>
+            <li>
+                <a href="/cgi-bin/koha/reports/guided_reports.pl?reports=[% id | uri %]&amp;phase=Show%20SQL">[% name | html %] ([% id | html %])</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Run
+                </a>
+            </li>
+        [% ELSIF ( build1 || build2 || build3 || build4 || build5 || build6 ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/guided_reports.pl?phase=Build%20new">Build a report</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    [% IF ( build1 ) %]
+                        Step 1 of 6: Choose a module
+                    [% ELSIF ( build2 ) %]
+                        Step 2 of 6: Pick a report type
+                    [% ELSIF ( build3 ) %]
+                        Step 3 of 6: Select columns for display
+                    [% ELSIF ( build4 ) %]
+                        Step 4 of 6: Select criteria to limit on
+                    [% ELSIF ( build5 ) %]
+                        Step 5 of 6: Pick which columns to total
+                    [% ELSIF ( build6 ) %]
+                        Step 6 of 6: Select how you want the report ordered
+                    [% END %]
+                </a>
         [% END %]
-    [% END %]
-</div> <!-- /#breadcrumbs -->
+    </ol>
+</nav> <!-- /#breadcrumbs -->
 
 <div id="update_sql" class="modal" tabindex="-1" role="dialog" aria-labelledby="update_sql_label" aria-hidden="true">
     <div class="modal-dialog">

koha-tmpl/intranet-tmpl/prog/en/modules/reports/issues_avg_stats.tt

@@ -9,7 +9,32 @@
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a> [% IF ( do_it ) %]&rsaquo; <a href="/cgi-bin/koha/reports/issues_avg_stats.pl">Average loan time</a> &rsaquo; Results [% ELSE %]&rsaquo; Average loan time[% END %]</div>
+<nav aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
+        </li>
+        [% IF ( do_it ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/issues_avg_stats.pl">Average loan time</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Results
+                </a>
+            </li>
+        [% ELSE %]
+            <li>
+                <a href="#" aria-current="page">
+                    Average loan time
+                </a>
+            </li>
+        [% END %]
+    </ol>
+</nav>
 
 <div class="main container-fluid">
     <div class="row">

koha-tmpl/intranet-tmpl/prog/en/modules/reports/issues_stats.tt

@@ -12,7 +12,32 @@
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a> [% IF ( do_it ) %]&rsaquo; <a href="/cgi-bin/koha/reports/issues_stats.pl">Circulation statistics</a> &rsaquo; Results [% ELSE %]&rsaquo; Circulation statistics[% END %]</div>
+<nav aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
+        </li>
+        [% IF ( do_it ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/issues_stats.pl">Circulation statistics</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Results
+                </a>
+            </li>
+        [% ELSE %]
+            <li>
+                <a href="#" aria-current="page">
+                    Circulation statistics
+                </a>
+            </li>
+        [% END %]
+    </ol>
+</nav>
 
 <div class="main container-fluid">
     <div class="row">

koha-tmpl/intranet-tmpl/prog/en/modules/reports/itemslost.tt

@@ -16,7 +16,33 @@
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>[% IF ( get_items ) %] &rsaquo; <a href="/cgi-bin/koha/reports/itemslost.pl">Lost items</a> &rsaquo; Results[% ELSE %] &rsaquo; Lost items[% END %]</div>
+<nav aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
+        </li>
+
+        [% IF ( get_items ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/itemslost.pl">Lost items</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Results
+                </a>
+            </li>
+        [% ELSE %]
+            <li>
+                <a href="#" aria-current="page">
+                    Lost items
+                </a>
+            </li>
+        [% END %]
+    </ol>
+</nav>
 
 <div class="main container-fluid">
     <div class="row">

koha-tmpl/intranet-tmpl/prog/en/modules/reports/itemtypes.tt

@@ -14,7 +14,32 @@
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>[% IF ( do_it ) %] &rsaquo; <a href="/cgi-bin/koha/reports/manager.pl?report_name=itemtypes">Catalog by item type</a> &rsaquo; Results[% ELSE %] &rsaquo; Catalog by item type[% END %]</div>
+<nav aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
+        </li>
+        [% IF ( do_it ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/manager.pl?report_name=itemtypes">Catalog by item type</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Results
+                </a>
+            </li>
+        [% ELSE %]
+            <li>
+                <a href="#" aria-current="page">
+                    Catalog by item type
+                </a>
+            </li>
+        [% END %]
+    </ol>
+</nav>
 
 <div class="main container-fluid">
     <div class="row">

koha-tmpl/intranet-tmpl/prog/en/modules/reports/orders_by_budget.tt

@@ -11,7 +11,32 @@
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>[% IF ( get_orders ) %] &rsaquo; <a href="/cgi-bin/koha/reports/orders_by_fund.pl">Orders by fund</a> &rsaquo; Results[% ELSE %] &rsaquo; Orders by fund[% END %]</div>
+<nav aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
+        </li>
+        [% IF ( get_orders ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/orders_by_fund.pl">Orders by fund</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Results
+                </a>
+            </li>
+        [% ELSE %]
+            <li>
+                <a href="#" aria-current="page">
+                    Orders by fund
+                </a>
+            </li>
+        [% END %]
+    </ol>
+</nav>
 
 <div class="main container-fluid">
     <div class="row">

koha-tmpl/intranet-tmpl/prog/en/modules/reports/reports-home.tt

@@ -8,7 +8,18 @@
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'circ-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; Reports</div>
+<nav aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="#" aria-current="page">
+                Reports
+            </a>
+        </li>
+    </ol>
+</nav>
 
 <div class="main container-fluid">
     <div class="row">

koha-tmpl/intranet-tmpl/prog/en/modules/reports/reserves_stats.tt

@@ -12,7 +12,32 @@
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a> [% IF ( do_it ) %]&rsaquo; <a href="/cgi-bin/koha/reports/reserves_stats.pl">Holds statistics</a> &rsaquo; Results [% ELSE %]&rsaquo; Holds statistics[% END %]</div>
+<nav aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
+        </li>
+        [% IF ( do_it ) %]
+            <li>
+                <a href="/cgi-bin/koha/reports/reserves_stats.pl">Holds statistics</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Results
+                </a>
+            </li>
+        [% ELSE %]
+            <li>
+                <a href="#" aria-current="page">
+                    Holds statistics
+                </a>
+            </li>
+        [% END %]
+    </ol>
+</nav>
 
 <div class="main container-fluid">
     <div class="row">

koha-tmpl/intranet-tmpl/prog/en/modules/reports/serials_stats.tt

@@ -15,7 +15,21 @@
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a> &rsaquo; Serials subscriptions stats</div>
+<nav aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
+        </li>
+        <li>
+            <a href="#" aria-current="page">
+                Serials subscriptions stats
+            </a>
+        </li>
+    </ol>
+</nav>
 
 <div class="main container-fluid">
     <div class="row">

koha-tmpl/intranet-tmpl/prog/en/modules/reserve/request.tt

@@ -25,18 +25,38 @@
 [% INCLUDE 'circ-search.inc' %]
 
 [% UNLESS ( multi_hold ) %]
-    <div id="breadcrumbs">
-        <a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo;
-        <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a> &rsaquo;
-        [% INCLUDE 'biblio-title.inc' link =1 %] &rsaquo;
-        Place a hold
-    </div>
+    <nav aria-label="Breadcrumb" class="breadcrumb">
+        <ol>
+            <li>
+                <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+            </li>
+            <li>
+                <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a>
+            </li>
+            [% INCLUDE 'biblio-title.inc' link =1 %]
+            <li>
+                <a href="#" aria-current="page">
+                    Place a hold
+                </a>
+            </li>
+        </ol>
+    </nav>
 [% ELSE %]
-    <div id="breadcrumbs">
-        <a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo;
-        <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a> &rsaquo;
-        Confirm holds
-    </div>
+    <nav aria-label="Breadcrumb" class="breadcrumb">
+        <ol>
+            <li>
+                <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+            </li>
+            <li>
+                <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a>
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Confirm holds
+                </a>
+            </li>
+        </ol>
+    </nav>
 [% END # UNLESS multi_hold %]
 
 <div class="main container-fluid">

koha-tmpl/intranet-tmpl/prog/en/modules/reviews/reviewswaiting.tt

@@ -9,8 +9,28 @@
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a>
-&rsaquo; <a href="/cgi-bin/koha/reviews/reviewswaiting.pl">Comments</a> &rsaquo;[% IF ( status ) %] Approved comments[% ELSE %] Comments awaiting moderation[% END %]</div>
+<nav aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/reviews/reviewswaiting.pl">Comments</a>
+        </li>
+        <li>
+            <a href="#" aria-current="page">
+                [% IF ( status ) %]
+                    Approved comments
+                [% ELSE %]
+                    Comments awaiting moderation
+                [% END %]
+            </a>
+        </li>
+    </ol>
+</nav>
 
 <div class="main container-fluid">
     <div class="row">