Koha/koha-tmpl/intranet-tmpl/prog/en/modules/labels/spinelabel-home.tt
Wainui Witika-Park 9e16fe97a2 Bug 27846: labels folder
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 labels folder 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>
2021-04-01 18:51:37 +02:00

69 lines
2.1 KiB
Text

[% USE raw %]
[% USE Asset %]
[% SET footerjs = 1 %]
[% INCLUDE 'doc-head-open.inc' %]<title>Koha &rsaquo; Tools &rsaquo; Quick spine label creator</title>
[% INCLUDE 'doc-head-close.inc' %]
</head>
<body id="labels_spinelabel-home" class="tools labels">
[% INCLUDE 'header.inc' %]
[% INCLUDE 'cat-search.inc' %]
<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="#" aria-current="page">
Quick spine label creator
</a>
</li>
</ol>
</nav>
<div class="main container-fluid">
<div class="row">
<div class="col-sm-10 col-sm-push-2">
<main>
<h2>Quick spine label creator</h2>
<form action="/cgi-bin/koha/labels/spinelabel-print.pl" method="post" id="spinelabelprint">
<fieldset class="brief">
<ol>
<li><label for="barcode">Barcode: </label>
<input type="text" name="barcode" id="barcode" class="focus" required="required" />
</li>
</ol>
<fieldset class="action"><input type="submit" value="View spine label" /></fieldset>
</fieldset>
</form>
</main>
</div> <!-- /.col-sm-10.col-sm-push-2 -->
<div class="col-sm-2 col-sm-pull-10">
<aside>
[% INCLUDE 'tools-menu.inc' %]
</aside>
</div> <!-- /.col-sm-2.col-sm-pull-10 -->
</div> <!-- /.row -->
[% MACRO jsinclude BLOCK %]
[% Asset.js("js/tools-menu.js") | $raw %]
<script>
$(document).ready(function(){
$("#spinelabelprint").on("submit", function(e){
e.preventDefault();
var params = $(this).serialize();
openWindow("/cgi-bin/koha/labels/spinelabel-print.pl?" + params,"Print spine label",400,400);
$("#barcode").val("").focus();
});
});
</script>
[% END %]
[% INCLUDE 'intranet-bottom.inc' %]