Koha/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-browse.tt
Wainui Witika-Park d3ab8dbeec Bug 28242: added captions to tables and legends to forms
Ensured that in the OPAC, all tables have relevant captions and all forms have relevant legends.

Many of these have class="sr-only" so they are not visible but will be
available for people who use screen-readers.

To test:
1) Go to OPAC
2) Apply patch and dependencies
3) Check that on all pages, any tables have a caption (many of them will
    not be visible, but will be in the markup code)
4) Check that on all pages, any forms have a legend (many of them will
    not be visible, but will be in the markup code)
5) Check that the captions are appropriate and relevant
6) Check that the legends are appropriate and relevant

Sponsored-by: Catalyst IT

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
2021-06-21 14:05:30 +02:00

126 lines
6.5 KiB
Text

[% USE Koha %]
[% USE Asset %]
[% USE raw %]
[% INCLUDE 'doc-head-open.inc' %]
<title>Browse our catalog &rsaquo; [% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog</title>
[% INCLUDE 'doc-head-close.inc' %]
[% BLOCK cssinclude %][% END %]
[% INCLUDE 'bodytag.inc' bodyid='opac-browser' %]
[% INCLUDE 'masthead.inc' %]
<div class="main">
<nav aria-label="breadcrumb">
<ul class="breadcrumb">
<li class="breadcrumb-item">
<a href="/cgi-bin/koha/opac-main.pl">Home</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
<a href="#">Browse search</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
[% IF ( OpacNav || OpacNavBottom ) %]
<div class="col-lg-2">
<div id="navigation">
[% INCLUDE 'navigation.inc' %]
</div>
</div>
[% END %]
[% IF ( OpacNav ) %]
<div class="col-10 order-first order-md-first order-lg-2">
[% ELSE %]
<div class="col order-first order-md-first order-lg-2">
[% END %]
[% IF Koha.Preference('SearchEngine') == 'Elasticsearch' && Koha.Preference('OpacBrowseSearch') %]
<div id="browse-search" class="maincontent">
<h1>Browse search</h1>
<form>
<legend class="sr-only">Browse search</legend>
<div class="form-row">
<div class="col">
<label for="browse-searchterm">Search for:</label>
<input type="search" id="browse-searchterm" class="form-control" name="searchterm" value="" />
</div> <!-- /.col-12.col-sm-9 -->
<div class="col-auto">
<label for="browse-searchfield">Search type:</label>
<select id="browse-searchfield" name="searchfield" class="form-control">
<option value="author">Author</option>
<option value="subject">Subject</option>
<option value="title">Title</option>
</select>
</div> <!-- /.col-auto -->
</div> <!-- /.form-row -->
<div class="form-row">
<div class="col">
<div id="browse-searchfuzziness">
<div class="form-check form-check-inline">
<label for="exact" class="form-check-label">
<input class="form-check-input" type="radio" name="browse-searchfuzziness" id="exact" value="0" />Exact
</label>
</div> <!-- /.form-check.form-check-inline -->
<div class="form-check form-check-inline">
<label for="fuzzy" class="form-check-label">
<input class="form-check-input" type="radio" name="browse-searchfuzziness" id="fuzzy" value="1" checked="checked" /> Fuzzy
</label>
</div> <!-- /.form-check.form-check-inline -->
<div class="form-check form-check-inline">
<label for="reallyfuzzy" class="form-check-label">
<input class="form-check-input" type="radio" name="browse-searchfuzziness" id="reallyfuzzy" value="2" /> Really fuzzy
</label>
</div> <!-- /.form-check.form-check-inline -->
</div> <!-- /#browse-searchfuzziness -->
</div> <!-- /.col -->
</div> <!-- /.form-row -->
<div class="form-row">
<div class="col">
<button class="btn btn-primary" type="submit" accesskey="s">Search</button>
</div>
</div>
</form>
<div id="browse-suggestionserror" class="alert alert-warning d-none" role="alert">
An error occurred, please try again.
</div>
<div id="browse-resultswrapper" class="d-none">
<h2>Results</h2>
<div class="loading d-none"><img src="[% interface | html %]/[% theme |html %]/images/loading.gif" alt=""> Loading</div>
<div class="alert alert-warning no-results d-none" role="alert">Sorry, there are no results. Try a different search term.</div>
<div class="accordion" id="browse-searchresults">
<div id="card_template" class="card">
<div class="card-header" id="heading">
<a class="expand-result" href="#" data-toggle="collapse" aria-expanded="false" aria-controls="collapse">
</a>
</div> <!-- /#heading.card-header -->
<div id="collapse" class="collapse" aria-labelledby="heading" data-parent="#browse-searchresults">
<div class="card-body">
</div>
</div> <!-- /#collapse.collapse -->
</div> <!-- /#card_template.card -->
</div> <!-- /#browse-searchresults.accordion -->
</div><!-- / #browse-resultswrapper -->
</div><!-- /#browse-search -->
[% ELSE %]
<h1>Browse search</h1>
<div class="alert alert-info">
This feature is not enabled
</div>
[% END %]
</div><!-- / .col/col-10 -->
</div><!-- / .row -->
</div><!-- / .container-fluid -->
</div><!-- / .main -->
[% INCLUDE 'opac-bottom.inc' %]
[% BLOCK jsinclude %]
[% Asset.js("/js/browse.js") | $raw %]
[% END %]