LP#1301599 TPAC advanced search from labels

Instead of using titles / aria-labels directly on advanced search
selectors, provide selector IDs so the existing text labels can be
turned into <labels> and linked (by id) to their form control.

This means we only need one label per form control, which improves
usability from an accessibility perspective.

Signed-off-by: Ben Shum <bshum@biblio.org>

diff --git a/Open-ILS/src/templates/opac/parts/advanced/search.tt2 b/Open-ILS/src/templates/opac/parts/advanced/search.tt2
index b6e5e3d..f60d499 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/advanced/search.tt2
+++ b/Open-ILS/src/templates/opac/parts/advanced/search.tt2
@@ -7,7 +7,7 @@
     <div id='adv_search_rows'>
         <!-- Contains the user-addable(?) rows to define search class, containment and text -->
         <div valign='top' class='adv_global_input_container'>
-            <table id='adv_global_input_table'>
+            <table id='adv_global_input_table' role="presentation">
                 <thead>
                     <tr>
                         <td>
@@ -33,7 +33,7 @@
     <div id='adv_search_submit'>
         <input type="hidden" name="_adv" value="1" />
         <span>
-            <input id='search-submit-go' type="submit" value="[% l('Search') %]" alt="[% l('Search') %]" class="opac-button"
+            <input id='search-submit-go' type="submit" value="[% l('Search') %]" title="[% l('Search') %]" class="opac-button"
                 onclick='setTimeout(function(){$("search-submit-spinner").className=""; $("search-submit-go").className="hidden"}, 2000)'/>
             <img id='search-submit-spinner' src='/opac/images/progressbar_green.gif' 
                 class='hidden' alt="[% l('Search in progress icon') %]"/>
@@ -59,13 +59,14 @@
             <div valign='top'[% IF adv_chunk.js_only %]
                 id='adv_chunk_[% adv_chunk.adv_special %]'
                 class='hidden'[% END %]>
-                <strong>[% adv_chunk.adv_label %]</strong><br />
+                <strong><label for="[% adv_chunk.id %]">
+                  [% adv_chunk.adv_label %] </label></strong><br />
 [%
         IF adv_chunk.adv_special;
             SWITCH adv_chunk.adv_special;
                 CASE "lib_selector";
                     PROCESS "opac/parts/org_selector.tt2";
-                        INCLUDE build_org_selector show_loc_groups=1 id="adv_org_selector" %]
+                        INCLUDE build_org_selector show_loc_groups=1 id=adv_chunk.id %]
                             <div class="adv_search_available">
                                 <input type='checkbox' name="modifier"
                                     value="available"[% CGI.param('modifier').grep('available').size ? ' checked="checked"' : '' %]
@@ -76,7 +77,7 @@
 [%
                 CASE "pub_year"; %]
                             <select name='pubdate' 
-                                title="[% l('Publicatiion date search modifier') %]"
+                                id="[% adv_chunk.id %]"
                                 onchange='if(this.selectedIndex == 3)
                                     unHideMe($("adv_global_pub_date_2_span"));
                                 else
@@ -91,16 +92,17 @@
                             </select>    
                             <br/>
                             <div id='adv_special_block'>
-                                <input title="[% l('First date') %]" 
+                                <input title="[% l('Search date') %]" 
                                   name='date1' type='text' size='4' maxlength='4' value="[% CGI.param('date1') | html %]" />
                                 <span id='adv_global_pub_date_2_span' class='[% CGI.param("pubdate") == "between" ? "" : "hide_me" %]'>
                                    [% l("and") %] <input name='date2' 
-                                    title="[% l('Second date') %]" type='text' size='4' maxlength='4' value="[% CGI.param('date2') | html %]" />
+                                    title="[% l('Secondary search date') %]" type='text' size='4' maxlength='4' value="[% CGI.param('date2') | html %]" />
                                 </span>
                             </div>
 [%
                 CASE "sort_selector";
                     INCLUDE "opac/parts/filtersort.tt2"
+                        id=adv_chunk.id
                         value=CGI.param('sort') class='results_header_sel';
                     %]
 
@@ -126,13 +128,13 @@
             END;
         ELSIF adv_chunk.adv_attr;
             INCLUDE "opac/parts/coded_value_selector.tt2"
+                id=adv_chunk.id
                 attr=adv_chunk.adv_attr multiple="multiple" 
-                filter_label=l('Select [_1]', adv_chunk.adv_label)
                 size=adv_chunk.adv_size || search.default_adv_select_height || "4";
         ELSIF adv_chunk.adv_filter;
             INCLUDE "opac/parts/filter_group_selector.tt2"
+                id=adv_chunk.id
                 filter_group=adv_chunk.adv_filter multiple="multiple" 
-                filter_label=l('Select [_1]', adv_chunk.adv_label)
                 size=adv_chunk.adv_size || search.default_adv_select_height || "4";
         END; %]
             </div>

diff --git a/Open-ILS/src/templates/opac/parts/config.tt2 b/Open-ILS/src/templates/opac/parts/config.tt2
index 618d63a..96f8ce5 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/config.tt2
+++ b/Open-ILS/src/templates/opac/parts/config.tt2
@@ -110,19 +110,22 @@ facet.default_display_count = 5;
 #   lib_selector will put the search library box (with limit to available)
 #   pub_year will put the publication year box
 #   sort_selector will put the sort results selector
+# id DOM id used for linking labels to form controls.  They are pinned 
+#   here instead of auto-generated (from the attr type, for example) 
+#   for consistency.
 
 search.adv_config = [
-    {adv_label => l("Item Type"), adv_attr => ["mattype", "item_type"]},
-    {adv_label => l("Item Form"), adv_attr => "item_form"},
-    {adv_label => l("Language"),  adv_attr => "item_lang"},
-    {adv_label => l("Audience"),  adv_attr => ["audience_group", "audience"], adv_break => 1},
-    {adv_label => l("Video Format"), adv_attr => "vr_format"},
-    {adv_label => l("Bib Level"), adv_attr => "bib_level"},
-    {adv_label => l("Literary Form"), adv_attr => "lit_form"},
-    {adv_label => l("Shelving Location"), adv_special => "copy_location", js_only => 1, adv_break => 1},
-    {adv_label => l("Search Library"), adv_special => "lib_selector"},
-    {adv_label => l("Publication Year"), adv_special => "pub_year"},
-    {adv_label => l("Sort Results"), adv_special => "sort_selector"},
+    {adv_label => l("Item Type"), adv_attr => ["mattype", "item_type"], id => 'adv_selector_item_type'},
+    {adv_label => l("Item Form"), adv_attr => "item_form", id => 'adv_selector_item_form'},
+    {adv_label => l("Language"),  adv_attr => "item_lang", id => 'adv_selector_item_lang'},
+    {adv_label => l("Audience"),  adv_attr => ["audience_group", "audience"], id => 'adv_selector_audience', adv_break => 1},
+    {adv_label => l("Video Format"), adv_attr => "vr_format", id => 'adv_selector_video_format'},
+    {adv_label => l("Bib Level"), adv_attr => "bib_level", id => 'adv_selector_bib_level'},
+    {adv_label => l("Literary Form"), adv_attr => "lit_form", id => 'adv_selector_lit_form'},
+    {adv_label => l("Shelving Location"), adv_special => "copy_location", id => 'adv_copy_location_selector', js_only => 1, adv_break => 1},
+    {adv_label => l("Search Library"), adv_special => "lib_selector", id => 'adv_org_selector'},
+    {adv_label => l("Publication Year"), adv_special => "pub_year", id => 'adv_selector_pub_year'},
+    {adv_label => l("Sort Results"), adv_special => "sort_selector", id => 'adv_selector_sort_results'},
 ];
 
 # Set the default height of the select boxes. Defaults to 4.

diff --git a/Open-ILS/src/templates/opac/parts/org_selector.tt2 b/Open-ILS/src/templates/opac/parts/org_selector.tt2
index 0246628..1b60855 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/org_selector.tt2
+++ b/Open-ILS/src/templates/opac/parts/org_selector.tt2
@@ -28,7 +28,8 @@ BLOCK build_org_selector;
     -%]
 
     <select [% IF id %] id='[% id %]' [% END -%]
-            [% IF arialabel %] aria-label='[% arialabel %]' [% END -%]
+            [% IF arialabel %] aria-label='[% arialabel %]' 
+            [% ELSE %] title='[% l("Select Library") %]' [% END -%]
             name='[% name %]'>
     [%- 
         WHILE node_stack.size > 0;