From fc5e0fa8b4cda93b7381ad107a7f63ecaf07e140 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Wed, 10 Jan 2024 13:22:28 +0000
Subject: [PATCH] Bug 35329: (follow-up) Label changes for improved
 accessibility

This patch alters the patron search form so that <label>s wrap the
<input> fields, allowing the label to be clickable without having to
associate it with a unique id. CSS has been modified to accommodate this
change.

The patch also adds missing Bootstrap classes to the "Clear" button, and
swaps out the "hint" class for the "note" class on the permissions
information ("Only staff with superlibrarian or acquisitions
permissions...").

After this patch, form field labels in the patron search modal should be
clickable to give focus to the field (except for Sort 1 and Sort 2 --
label don't work that way with Select2).

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
---
 .../prog/css/src/staff-global.scss            | 10 ++-
 .../prog/en/includes/patron-search.inc        | 88 +++++++++++--------
 2 files changed, 58 insertions(+), 40 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index ca9e31e956..bde5608918 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -239,7 +239,7 @@ aside {
             label {
                 color: #696969;
                 display: block;
-                margin: .5em 0 0 0;
+                margin: .5em 0;
             }
 
             li {
@@ -1028,7 +1028,6 @@ fieldset {
         span.label {
             display: block;
             font-weight: bold;
-            padding: .3em 0;
             text-align: left;
 
             &.inline {
@@ -1037,6 +1036,13 @@ fieldset {
                 margin-left: 1em;
                 width: auto;
             }
+
+            input,
+            select,
+            .select2-container {
+                display: block;
+                margin-top: .5em;
+            }
         }
 
         li {
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc
index 170e7e89ee..1c55c1c2a4 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc
@@ -34,44 +34,54 @@
             <h3>Search for patron</h3>
             <ol>
                 <li>
-                    <label for="search_patron_filter">Search:</label>
-                    <input type="text" class="search_patron_filter" value="[% search_filter | html %]" class="focus" />
+                    <label>
+                        Search:
+                        <input type="text" class="search_patron_filter" value="[% search_filter | html %]" class="focus" />
+                    </label>
                 </li>
 
                 [% FOR f IN filters %]
                     [% SWITCH f %]
                     [% CASE 'branch' %]
                         <li>
-                            <label for="branchcode_filter">Library:</label>
-                            <select class="branchcode_filter">
-                                [% SET libraries = Branches.all( only_from_group => 1 ) %]
-                                [% IF libraries.size != 1 %]
-                                    <option value="">Any</option>
-                                [% END %]
-                                [% FOREACH l IN libraries %]
-                                    <option value="[% l.branchcode | html %]">[% l.branchname | html %]</option>
-                                [% END %]
-                            </select>
+                            <label>
+                                Library:
+                                <select class="branchcode_filter">
+                                    [% SET libraries = Branches.all( only_from_group => 1 ) %]
+                                    [% IF libraries.size != 1 %]
+                                        <option value="">Any</option>
+                                    [% END %]
+                                    [% FOREACH l IN libraries %]
+                                        <option value="[% l.branchcode | html %]">[% l.branchname | html %]</option>
+                                    [% END %]
+                                </select>
+                            </label>
                         </li>
                     [% CASE 'category' %]
                         <li>
-                            <label for="categorycode_filter">Category:</label>
-                            <select class="categorycode_filter">
-                                <option value="">Any</option>
-                                [% FOREACH category IN Categories.limited.unblessed %]
-                                    <option value="[% category.categorycode | html %]">[% category.description | html %]</option>
-                                [% END %]
-                            </select>
+                            <label>
+                                Category:
+                                <select class="categorycode_filter">
+                                    <option value="">Any</option>
+                                    [% FOREACH category IN Categories.limited.unblessed %]
+                                        <option value="[% category.categorycode | html %]">[% category.description | html %]</option>
+                                    [% END %]
+                                </select>
+                            </label>
                         </li>
                     [% CASE 'sort1' %]
                         <li>
-                            <label for="sort1_filter">Sort 1:</label>
-                            [% PROCESS 'av-build-dropbox.inc' no_id => 1, name="sort1_filter", category="Bsort1", empty=1, size = 20 %]
+                            <label>
+                                Sort 1:
+                                [% PROCESS 'av-build-dropbox.inc' no_id => 1, name="sort1_filter", category="Bsort1", empty=1, size = 20 %]
+                            </label>
                         </li>
                     [% CASE 'sort2' %]
                         <li>
-                            <label for="sort2_filter">Sort 2:</label>
-                            [% PROCESS 'av-build-dropbox.inc' no_id => 1, name="sort2_filter", category="Bsort2", empty=1, size = 20 %]
+                            <label>
+                                Sort 2:
+                                [% PROCESS 'av-build-dropbox.inc' no_id => 1, name="sort2_filter", category="Bsort2", empty=1, size = 20 %]
+                            </label>
                         </li>
                     [% CASE 'search_field' %]
                         <li>
@@ -79,23 +89,25 @@
                         </li>
                     [% CASE 'search_type' %]
                         <li>
-                            <label for="searchtype_filter">Search type:</label>
-                            <select name="searchtype" class="searchtype_filter">
-                              [% IF searchtype == "starts_with" %]
-                                <option value='starts_with' selected="selected">Starts with</option>
-                                <option value="contains">Contains</option>
-                              [% ELSE %]
-                                <option value='starts_with'>Starts with</option>
-                                <option value="contains" selected="selected">Contains</option>
-                              [% END %]
-                            </select>
+                            <label>
+                                Search type:
+                                <select name="searchtype" class="searchtype_filter">
+                                    [% IF searchtype == "starts_with" %]
+                                        <option value='starts_with' selected="selected">Starts with</option>
+                                        <option value="contains">Contains</option>
+                                    [% ELSE %]
+                                        <option value='starts_with'>Starts with</option>
+                                        <option value="contains" selected="selected">Contains</option>
+                                    [% END %]
+                                </select>
+                            </label>
                         </li>
                     [% END %]
                 [% END %]
             </ol>
             <fieldset class="action">
                 <input type="submit" class="btn btn-primary" value="Search" />
-                <input type="button" value="Clear" class="clear_search" />
+                <input type="button" value="Clear" class="btn btn-default clear_search" />
             </fieldset>
         </fieldset>
     </form>
@@ -117,13 +129,13 @@
     [% END %]
 
     [% IF filter == 'suggestions_managers' %]
-        <div class="hint">Only staff with superlibrarian or suggestions_manage permissions are returned in the search results</div>
+        <div class="note">Only staff with superlibrarian or suggestions_manage permissions are returned in the search results</div>
     [% ELSIF filter == 'orders_managers' OR filter == 'baskets_managers' %]
-        <div class="hint">Only staff with superlibrarian or acquisitions permissions (or order_manage permission if granular permissions are enabled) are returned in the search results</div>
+        <div class="note">Only staff with superlibrarian or acquisitions permissions (or order_manage permission if granular permissions are enabled) are returned in the search results</div>
     [% ELSIF filter == 'funds_owners' OR filter == 'funds_users' %]
-        <div class="hint">Only staff with superlibrarian or acquisitions permissions (or budget_modify permission if granular permissions are enabled) are returned in the search results</div>
+        <div class="note">Only staff with superlibrarian or acquisitions permissions (or budget_modify permission if granular permissions are enabled) are returned in the search results</div>
     [% ELSIF filter == 'erm_users' %]
-        <div class="hint">Only staff with superlibrarian or ERM permissions are returned in the search results</div>
+        <div class="note">Only staff with superlibrarian or ERM permissions are returned in the search results</div>
     [% END %]
 
     <div class="browse">
-- 
2.20.1