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>
This commit is contained in:
Wainui Witika-Park 2021-03-09 02:03:34 +00:00 committed by Jonathan Druart
parent 1ae1e6dfe3
commit 9e16fe97a2
8 changed files with 196 additions and 52 deletions

View file

@ -10,19 +10,45 @@
<body id="labels_label-edit-batch" class="tools labels" onload="dofocus();">
[% 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/labels/label-home.pl">Label creator</a> &rsaquo;
<a href="/cgi-bin/koha/labels/label-manage.pl?label_element=batch">Batches</a> &rsaquo;
[% IF description %]
Edit <a href="/cgi-bin/koha/labels/label-edit-batch.pl?op=edit&element_id=[% batch_id | uri %]">[% description | html %]</a>
[% ELSIF batch_id %]
Edit <a href="/cgi-bin/koha/labels/label-edit-batch.pl?op=edit&element_id=[% batch_id | uri %]">([% batch_id | html %])</a>
[% ELSE %]
New
[% 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/labels/label-home.pl">Label creator</a>
</li>
<li>
<a href="/cgi-bin/koha/labels/label-manage.pl?label_element=batch">Batches</a>
</li>
[% IF description %]
<li>
<a href="#" aria-current="page">
Edit [% description | html %]
</a>
</li>
[% ELSIF batch_id %]
<li>
<a href="#" aria-current="page">
Edit ([% batch_id | html %])
</a>
</li>
[% ELSE %]
<li>
<a href="#" aria-current="page">
New
</a>
</li>
[% END %]
</ol>
</nav>
<div class="main container-fluid">
<div class="row">

View file

@ -24,13 +24,37 @@
<body id="labels_label-edit-layout" class="tools labels">
[% 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/labels/label-home.pl">Label creator</a> &rsaquo;
<a href="/cgi-bin/koha/labels/label-manage.pl?label_element=layout">Layouts</a> &rsaquo;
[% IF ( layout_id ) %]Edit ([% layout_id | html %])[% ELSE %]New[% 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/labels/label-home.pl">Label creator</a>
</li>
<li>
<a href="/cgi-bin/koha/labels/label-manage.pl?label_element=layout">Layouts</a>
</li>
[% IF ( layout_id ) %]
<li>
<a href="#" aria-current="page">
Edit ([% layout_id | html %])
</a>
</li>
[% ELSE %]
<li>
<a href="#" aria-current="page">
New
</a>
</li>
[% END %]
</ol>
</nav>
<div class="main container-fluid">
<div class="row">

View file

@ -8,13 +8,37 @@
<body id="labels_label-edit-profile" class="tools labels">
[% 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/labels/label-home.pl">Label creator</a> &rsaquo;
<a href="/cgi-bin/koha/labels/label-manage.pl?label_element=profile">Profiles</a> &rsaquo;
[% IF ( profile_id ) %]Edit ([% profile_id | html %])[% ELSE %]New[% 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/labels/label-home.pl">Label creator</a>
</li>
<li>
<a href="/cgi-bin/koha/labels/label-manage.pl?label_element=profile">Profiles</a>
</li>
[% IF ( profile_id ) %]
<li>
<a href="#" aria-current="page">
Edit ([% profile_id | html %])
</a>
</li>
[% ELSE %]
<li>
<a href="#" aria-current="page">
New
</a>
</li>
[% END%]
</ol>
</nav>
<div class="main container-fluid">
<div class="row">

View file

@ -7,12 +7,25 @@
<body id="labels_label-home" class="tools labels">
[% 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/labels/label-home.pl">Label creator</a> &rsaquo;
Barcode range
</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/labels/label-home.pl">Label creator</a>
</li>
<li>
<a href="#" aria-current="page">
Barcode range
</a>
</li>
</ol>
</nav>
<div class="main container-fluid">
<div class="row">

View file

@ -8,13 +8,32 @@
<body id="labels_label-edit-template" class="tools labels">
[% 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/labels/label-home.pl">Label creator</a> &rsaquo;
<a href="/cgi-bin/koha/labels/label-manage.pl?label_element=template">Templates</a> &rsaquo;
[% IF ( template_id ) %]Edit ([% template_id | html %])[% ELSE %]New[% 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/labels/label-home.pl">Label creator</a>
</li>
<li>
<a href="/cgi-bin/koha/labels/label-manage.pl?label_element=template">Templates</a>
</li>
<li>
<a href="#" aria-current="page">
[% IF ( template_id ) %]
Edit ([% template_id | html %])
[% ELSE %]
New
[% END %]
</a>
</li>
</ol>
</nav>
<div class="main container-fluid">
<div class="row">

View file

@ -8,11 +8,22 @@
<body id="labels_label-home" class="tools labels">
[% 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;
Label creator
</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="#" aria-current="page">
Label creator
</a>
</li>
</ol>
</nav>
<div class="main container-fluid">
<div class="row">

View file

@ -21,12 +21,25 @@
<body id="labels_label-manage" class="tools labels">
[% 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/labels/label-home.pl">Label creator</a> &rsaquo;
[% PROCESS translate_label_element element=label_element_title %]
</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/labels/label-home.pl">Label creator</a>
</li>
<li>
<a href="#" aria-current="page">
[% PROCESS translate_label_element element=label_element_title %]
</a>
</li>
</ol>
</nav>
<div class="main container-fluid">
<div class="row">

View file

@ -9,7 +9,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/tools/tools-home.pl">Tools</a> &rsaquo; Quick spine label creator</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="#" aria-current="page">
Quick spine label creator
</a>
</li>
</ol>
</nav>
<div class="main container-fluid">
<div class="row">