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
(cherry picked from commit 6d6b2078c0)
Signed-off-by: Julian Maurice <julian.maurice@biblibre.com>
This commit is contained in:
Owen Leonard 2016-01-19 11:36:44 -05:00 committed by Julian Maurice
parent 90a5c66909
commit 6a2e6abb27
2 changed files with 10 additions and 2 deletions

View File

@ -96,6 +96,10 @@ $(document).ready(function(){
}));
$("#searchform").on('submit', filter);
$(".filterByLetter").on("click",function(e){
e.preventDefault();
filterByFirstLetterSurname($(this).text());
});
});
function filter() {
@ -197,7 +201,7 @@ function filterByFirstLetterSurname(letter) {
<div class="browse">
Browse by last name:
[% FOREACH letter IN alphabet.split(' ') %]
<a style="cursor:pointer" onclick="filterByFirstLetterSurname('[% letter %]');">[% letter %]</a>
<a href="#" class="filterByLetter">[% letter %]</a>
[% END %]
</div>

View File

@ -93,6 +93,10 @@ $(document).ready(function() {
});
return true;
});
$(".filterByLetter").on("click",function(e){
e.preventDefault();
filterByFirstLetterSurname($(this).text());
});
});
var dtMemberResults;
@ -328,7 +332,7 @@ function filterByFirstLetterSurname(letter) {
<div class="browse">
Browse by last name:
[% FOREACH letter IN alphabet.split(' ') %]
<a style="cursor:pointer" onclick="filterByFirstLetterSurname('[% letter %]');">[% letter %]</a>
<a href="#" class="filterByLetter">[% letter %]</a>
[% END %]
</div>