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

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/common/patron_search.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/common/patron_search.tt
index 0a50e83..20af6d0 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/common/patron_search.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/common/patron_search.tt
@@ -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>
 

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt
index 074555b..ad360ec 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt
@@ -93,6 +93,10 @@ $(document).ready(function() {
         });
         return true;
     });
+    $(".filterByLetter").on("click",function(e){
+        e.preventDefault();
+        filterByFirstLetterSurname($(this).text());
+    });
 });
 
 var dtMemberResults;
@@ -332,7 +336,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>