Koha/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt
Owen Leonard 6d6b2078c0 Bug 14193 - Accessibility: Searching patrons using the alphabetic index doesn't work
Using a mouse to click on the alphabetic index letters works even though
the anchor markup doesn't contain an href attribute. However you
can't tab to them using the keyboard, and I assume the issue with
screen readers is related.

This patch adds a dummy href attribute and a class-based click handler
so that we can get rid of the "onclick" attribute in the markup.

To test, apply the patch and visit the "Patrons" section.

1. Use the tab key to move the focus to one of the alphabet links.
2. Hit "Enter" and confirm that the search is performed correctly.
3. Click any of the alphabet links and confirm that clicking works as
   well.
4. View the details of any patron and click the "Add child" button.
5. In the "Guarantor information" section click the "Change" button.
6. In the search popup, use the tab key to move the focus to one of the
   alphabet links.
2. Hit "Enter" and confirm that the search is performed correctly.
3. Click any of the alphabet links and confirm that clicking works as
   well.

Signed-off-by: Briana <brianagreally@gmail.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Brendan Gallagher brendan@bywatersolutions.com
2016-01-23 18:50:47 +00:00

522 lines
20 KiB
Text

[% USE Koha %]
[% USE ColumnsSettings %]
[% USE Branches %]
[% USE Categories %]
[% INCLUDE 'doc-head-open.inc' %]
<title>Koha &rsaquo; Patrons [% IF ( searching ) %]&rsaquo; Search results[% END %]</title>
[% INCLUDE 'doc-head-close.inc' %]
<link rel="stylesheet" type="text/css" href="[% themelang %]/css/datatables.css" />
[% INCLUDE 'datatables.inc' %]
[% INCLUDE 'columns_settings.inc' %]
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$('#add_to_patron_list_submit').attr('disabled', 'disabled');
$('#new_patron_list').hide();
$('#add_to_patron_list').change(function() {
var value = $('#add_to_patron_list').val();
if ( value == 'new' ) {
$('#new_patron_list').val('')
$('#new_patron_list').show();
$('#new_patron_list').focus();
} else if ( value ) {
$('#new_patron_list').hide();
$('#add_to_patron_list_submit').removeAttr('disabled');
} else {
$('#new_patron_list').hide();
$('#add_to_patron_list_submit').attr('disabled', 'disabled');
}
});
$('#new_patron_list').on('input', function() {
if ( $('#new_patron_list').val() ) {
$('#add_to_patron_list_submit').removeAttr('disabled');
} else {
$('#add_to_patron_list_submit').attr('disabled', 'disabled');
}
});
$("#patron_list_dialog").hide();
$("#add_to_patron_list_submit").on('click', function(e){
if ( $('#add_to_patron_list').val() == 'new' ) {
if ( $('#new_patron_list').val() ) {
$("#add_to_patron_list option").each(function() {
if ( $(this).text() == $('#new_patron_list').val() ) {
alert( _("You already have a list with that name!") );
return false;
}
});
} else {
alert( _("You must give your new patron list a name!") );
return false;
}
}
if ( $("#memberresultst input:checkbox:checked").length == 0 ) {
alert( _("You have not selected any patrons to add to a list!") );
return false;
}
var borrowernumbers = [];
$("#memberresultst").find("input:checkbox:checked").each(function(){
borrowernumbers.push($(this).val());
});
var data = {
add_to_patron_list: $("#add_to_patron_list").val(),
new_patron_list: $("#new_patron_list").val(),
borrowernumbers: borrowernumbers
};
$.ajax({
data: data,
type: 'POST',
url: '/cgi-bin/koha/svc/members/add_to_list',
success: function(data) {
$("#patron_list_dialog").show();
$("#patron_list_dialog > span.patrons-length").html(data.patrons_added_to_list);
$("#patron_list_dialog > a").attr("href", "/cgi-bin/koha/patron_lists/list.pl?patron_list_id=" + data.patron_list.patron_list_id);
$("#patron_list_dialog > a").html(data.patron_list.name);
if ( $('#add_to_patron_list').val() == 'new' ) {
var new_patron_list_added = $("<option>", {
value: data.patron_list.patron_list_id,
text: data.patron_list.name
});
$("#add_to_patron_list optgroup").append(new_patron_list_added);
$("#add_to_patron_list").val(data.patron_list.patron_list_id);
$("#new_patron_list").val('');
$('#add_to_patron_list').change();
}
},
error: function() {
alert("an error occurred");
}
});
return true;
});
$(".filterByLetter").on("click",function(e){
e.preventDefault();
filterByFirstLetterSurname($(this).text());
});
});
var dtMemberResults;
var search = 1;
$(document).ready(function() {
[% IF searchmember %]
$("#searchmember_filter").val("[% searchmember %]");
[% END %]
[% IF searchfieldstype %]
$("searchfieldstype_filter").val("[% searchfieldstype %]");
[% END %]
[% IF searchtype %]
$("#searchtype_filter").val("[% searchtype %]");
[% END %]
[% IF categorycode %]
$("#categorycode_filter").val("[% categorycode_filter %]");
[% END %]
[% IF branchcode %]
$("#branchcode_filter").val("[% branchcode_filter %]");
[% END %]
[% IF view != "show_results" %]
$("#searchresults").hide();
search = 0;
[% END %]
// Build the aLengthMenu
var aLengthMenu = [
[%PatronsPerPage %], 10, 20, 50, 100, -1
];
jQuery.unique(aLengthMenu);
aLengthMenu.sort(function( a, b ){
// Put "All" at the end
if ( a == -1 ) {
return 1;
} else if ( b == -1 ) {
return -1;
}
return parseInt(a) < parseInt(b) ? -1 : 1;}
);
var aLengthMenuLabel = [];
$(aLengthMenu).each(function(){
if ( this == -1 ) {
// Label for -1 is "All"
aLengthMenuLabel.push("All");
} else {
aLengthMenuLabel.push(this);
}
});
// Apply DataTables on the results table
var columns_settings = [% ColumnsSettings.GetColumns( 'members', 'member', 'memberresultst', 'json' ) %];
dtMemberResults = KohaTable("#memberresultst", {
'bServerSide': true,
'sAjaxSource': "/cgi-bin/koha/svc/members/search",
'fnServerData': function(sSource, aoData, fnCallback) {
if ( ! search ) {
return;
}
aoData.push({
'name': 'searchmember',
'value': $("#searchmember_filter").val()
},{
'name': 'firstletter',
'value': $("#firstletter_filter").val()
},{
'name': 'searchfieldstype',
'value': $("#searchfieldstype_filter").val()
},{
'name': 'searchtype',
'value': $("#searchtype_filter").val()
},{
'name': 'categorycode',
'value': $("#categorycode_filter").val()
},{
'name': 'branchcode',
'value': $("#branchcode_filter").val()
},{
'name': 'name_sorton',
'value': 'borrowers.surname borrowers.firstname'
},{
'name': 'dateofbirth',
'value': 'borrowers.dateofbirth',
},{
'name': 'category_sorton',
'value': 'categories.description',
},{
'name': 'branch_sorton',
'value': 'branches.branchname'
},{
'name': 'template_path',
'value': 'members/tables/members_results.tt',
});
$.ajax({
'dataType': 'json',
'type': 'POST',
'url': sSource,
'data': aoData,
'success': function(json){
// redirect if there is only 1 result.
if ( json.aaData.length == 1 ) {
var borrowernumber = json.aaData[0].borrowernumber;
document.location.href="/cgi-bin/koha/members/moremember.pl?borrowernumber="+borrowernumber;
return false;
}
fnCallback(json);
}
});
},
'aoColumns':[
[% IF CAN_user_tools_manage_patron_lists %]
{ 'mDataProp': 'dt_borrowernumber', 'bSortable': false },
[% END %]
{ 'mDataProp': 'dt_cardnumber' },
{ 'mDataProp': 'dt_name' },
{ 'mDataProp': 'dt_dateofbirth' },
{ 'mDataProp': 'dt_category' },
{ 'mDataProp': 'dt_branch' },
{ 'mDataProp': 'dt_dateexpiry' },
{ 'mDataProp': 'dt_od_checkouts', 'bSortable': false },
{ 'mDataProp': 'dt_fines', 'bSortable': false },
{ 'mDataProp': 'dt_borrowernotes' },
{ 'mDataProp': 'dt_action', 'bSortable': false }
],
'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
/* Center text for 6th column */
$("td:eq(5)", nRow).css("text-align", "center");
return nRow;
},
'bFilter': false,
'bAutoWidth': false,
[% IF CAN_user_tools_manage_patron_lists %]
'aaSorting': [[2, 'asc']],
[% ELSE %]
'aaSorting': [[1, 'asc']],
[% END %]
"aLengthMenu": [aLengthMenu, aLengthMenuLabel],
'sPaginationType': 'full_numbers',
"iDisplayLength": [% PatronsPerPage %],
"bProcessing": true,
}, columns_settings);
update_searched();
});
// Update the string "Results found ..."
function update_searched(){
var searched = $("#searchfieldstype_filter").find("option:selected").text();
if ( $("#searchmember_filter").val() ) {
if ( $("#searchtype_filter").val() == 'start_with' ) {
searched += _(" starting with ");
} else {
searched += _(" containing ");
}
searched += "'" + $("#searchmember_filter").val() + "'";
}
if ( $("#firstletter_filter").val() ) {
searched += _(" begins with ") + "'" + $("#firstletter_filter").val() +"'";
}
if ( $("#categorycode_filter").val() ) {
searched += _(" with category ") + "'" + $("#categorycode_filter").find("option:selected").text() + "'";
}
if ( $("#branchcode_filter").val() ) {
searched += _(" in library ") + $("#branchcode_filter").find("option:selected").text();
}
$("#searchpattern").text(searched);
}
// Redraw the table
function filter() {
$("#firstletter_filter").val('');
update_searched();
search = 1;
$("#searchresults").show();
dtMemberResults.fnDraw();
return false;
}
// User has clicked on the Clear button
function clearFilters(redraw) {
$("#searchform select").val('');
$("#firstletter_filter").val('');
$("#searchmember_filter").val('');
if(redraw) {
search = 1;
$("#searchresults").show();
dtMemberResults.fnDraw();
}
}
// User has clicked on a letter
function filterByFirstLetterSurname(letter) {
clearFilters(false);
$("#firstletter_filter").val(letter);
update_searched();
search = 1;
$("#searchresults").show();
dtMemberResults.fnDraw();
}
//]]>
</script>
</head>
<body id="pat_member" class="pat">
[% INCLUDE 'header.inc' %]
[% INCLUDE 'patron-search.inc' %]
<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; [% IF ( searching ) %]<a href="/cgi-bin/koha/members/members-home.pl">Patrons</a> &rsaquo; Search results[% ELSE %]Patrons[% END %]</div>
<div id="doc3" class="yui-t2">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-g">
[% IF CAN_user_tools_manage_patron_lists %]
<div id="patron_list_dialog" class="dialog alert">
Added <span class="patrons-length"></span> patrons to <a></a>.
</div>
[% END %]
[% IF Koha.Preference( 'NorwegianPatronDBEnable' ) == 1 %]
[% SET nl_search_form_title='Search the Norwegian national patron database' %]
[% INCLUDE 'nl-search-form.tt' %]
[% END %]
[% INCLUDE 'patron-toolbar.inc' %]
[% IF ( no_add ) %]
<div class="dialog alert">
<h3>Cannot add patron</h3>
[% IF ( no_branches ) %]
<p>There are <strong>no libraries defined</strong>. [% IF ( CAN_user_parameters ) %]Please <a href="/cgi-bin/koha/admin/branches.pl">add a library</a>.[% ELSE %]An administrator must define at least one library.[% END %]</p>
[% END %]
[% IF ( no_categories ) %]
<p>There are <strong>no patron categories defined</strong>. [% IF ( CAN_user_parameters ) %]Please <a href="/cgi-bin/koha/admin/categories.pl">add a patron category</a>.[% ELSE %]An administrator must define at least one patron category.[% END %]</p>
[% END %]
</div>
[% END %]
<div class="browse">
Browse by last name:
[% FOREACH letter IN alphabet.split(' ') %]
<a href="#" class="filterByLetter">[% letter %]</a>
[% END %]
</div>
[% IF ( CAN_user_borrowers && pending_borrower_modifications ) %]
<div class="pending-info" id="patron_updates_pending">
<a href="/cgi-bin/koha/members/members-update.pl">Patrons requesting modifications</a>:
<span class="holdcount"><a href="/cgi-bin/koha/members/members-update.pl">[% pending_borrower_modifications %]</a></span>
</div>
[% END %]
<div id="searchresults">
<div id="searchheader">
<h3>Patrons found for: <span id="searchpattern">[% IF searchmember %] for '[% searchmember %]'[% END %]</span></h3>
</div>
[% IF CAN_user_tools_manage_patron_lists %]
<div id="searchheader">
<div>
<a href="javascript:void(0)" onclick="$('.selection').prop('checked', true)">Select all</a>
|
<a href="javascript:void(0)" onclick="$('.selection').prop('checked', false)">Clear all</a>
|
<span>
<label for="add_to_patron_list">Add selected patrons to:</label>
<select id="add_to_patron_list" name="add_to_patron_list">
<option value=""></option>
[% IF patron_lists %]
<optgroup label="Patron lists:">
[% FOREACH pl IN patron_lists %]
<option value="[% pl.patron_list_id %]">[% pl.name %]</option>
[% END %]
</optgroup>
[% END %]
<option value="new">[ New list ]</option>
</select>
<input type="text" id="new_patron_list" name="new_patron_list" id="new_patron_list" />
<input id="add_to_patron_list_submit" type="submit" class="submit" value="Save">
</span>
</div>
</div>
[% END %]
<table id="memberresultst">
<thead>
<tr>
[% IF CAN_user_tools_manage_patron_lists %]
<th>&nbsp;</th>
[% END %]
<th>Card</th>
<th>Name</th>
<th>Date of birth</>
<th>Category</th>
<th>Library</th>
<th>Expires on</th>
<th>OD/Checkouts</th>
<th>Fines</th>
<th>Circ note</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="yui-b">
<form onsubmit="return filter();" id="searchform">
<input type="hidden" id="firstletter_filter" value="" />
<fieldset class="brief">
<h3>Filters</h3>
<ol>
<li>
<label for="searchmember_filter">Search:</label>
<input type="text" id="searchmember_filter" value="[% searchmember %]"/>
</li>
<li>
<label for="searchfieldstype_filter">Search fields:</label>
<select name="searchfieldstype" id="searchfieldstype_filter">
[% IF searchfieldstype == "standard" %]
<option selected="selected" value='standard'>Standard</option>
[% ELSE %]
<option value='standard'>Standard</option>
[% END %]
[% IF searchfieldstype == "email" %]
<option selected="selected" value='email'>Email</option>
[% ELSE %]
<option value='email'>Email</option>
[% END %]
[% IF searchfieldstype == "borrowernumber" %]
<option selected="selected" value='borrowernumber'>Borrower number</option>
[% ELSE %]
<option value='borrowernumber'>Borrower number</option>
[% END %]
[% IF searchfieldstype == "userid" %]
<option selected="selected" value='userid'>Username</option>
[% ELSE %]
<option value='userid'>Username</option>
[% END %]
[% IF searchfieldstype == "phone" %]
<option selected="selected" value='phone'>Phone number</option>
[% ELSE %]
<option value='phone'>Phone number</option>
[% END %]
[% IF searchfieldstype == "address" %]
<option selected="selected" value='address'>Street address</option>
[% ELSE %]
<option value='address'>Street address</option>
[% END %]
[% IF searchfieldstype == "dateofbirth" %]
<option selected="selected" value='dateofbirth'>Date of birth</option>
[% ELSE %]
<option value='dateofbirth'>Date of birth</option>
[% END %]
[% IF searchfieldstype == "sort1" %]
<option selected="selected" value='sort1'>Sort field 1</option>
[% ELSE %]
<option value='sort1'>Sort field 1</option>
[% END %]
[% IF searchfieldstype == "sort2" %]
<option selected="selected" value='sort2'>Sort field 2</option>
[% ELSE %]
<option value='sort2'>Sort field 2</option>
[% END %]
</select>
</li>
<li>
<label for="searchtype_filter">Search type:</label>
<select name="searchtype" id="searchtype_filter">
<option value='start_with'>Starts with</option>
[% IF searchtype == "contain" %]
<option value="contain" selected="selected">Contains</option>
[% ELSE %]
<option value="contain" selected="selected">Contains</option>
[% END %]
</select>
</li>
<li>
<label for="categorycode_filter">Category:</label>
[% SET categories = Categories.all( selected => categorycode_filter ) %]
<select id="categorycode_filter">
<option value="">Any</option>
[% FOREACH cat IN categories %]
[% IF cat.selected %]
<option selected="selected" value="[% cat.categorycode %]">[% cat.description %]</option>
[% ELSE %]
<option value="[% cat.categorycode %]">[% cat.description %]</option>
[% END %]
[% END %]
</select>
</li>
<li>
<label for="branchcode_filter">Library:</label>
[% SET branches = Branches.all( selected => branchcode_filter ) %]
<select id="branchcode_filter">
[% IF branches.size != 1 %]
<option value="">Any</option>
[% END %]
[% FOREACH b IN branches %]
[% IF b.selected %]
<option selected="selected" value="[% b.branchcode %]">[% b.branchname %]</option>
[% ELSE %]
<option value="[% b.branchcode %]">[% b.branchname %]</option>
[% END %]
[% END %]
</select>
</li>
</ol>
<fieldset class="action">
<input type="submit" value="Search" />
<input type="button" value="Clear" onclick="clearFilters(true);" />
</fieldset>
</fieldset>
</form>
</div>
</div>
<div class="yui-g">
[% INCLUDE 'members-menu.inc' %]
</div>
</div>
[% INCLUDE 'intranet-bottom.inc' %]