From 73a541e19c535cc6629e9b6dbac7598f8d434db1 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Mon, 11 Oct 2021 18:09:27 +0000
Subject: [PATCH] Bug 28079: Set focus to search box field when adding an order
 to basket

This patch modifies the "Add to basket" modal in acquisitions so that
focus is automatically moved to the first form field when the modal
appears.

The patch also corrects the modal markup so that it's more consistent
with default Bootstrap markup.

To test, apply the patch and go to Acquisitions.

- Search for a vendor and, if necessary, create a basket.
- Click the "Add to basket" button. The modal which appears should
  have a header reading "Add order to basket <basketname>"
- The form field should have cursor focus.
- View the basket and click the "Add to basket" button in the toolbar.
- The modal shown should also be correct.

Signed-off-by: David Nind <david@davidnind.com>

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

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
---
 .../includes/acquisitions-add-to-basket.inc   |  2 +-
 .../prog/en/modules/acqui/basket.tt           | 44 ++++++++++++-------
 .../prog/en/modules/acqui/booksellers.tt      | 16 ++++---
 3 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-add-to-basket.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-add-to-basket.inc
index b4f37edb19..f330237f37 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-add-to-basket.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-add-to-basket.inc
@@ -1,5 +1,5 @@
 <fieldset class="acqui_basket_add">
-    <legend>Add order to basket</legend>
+    <legend class="sr-only">Add order to basket</legend>
     [% IF has_budgets %]
       <ul>
         <li>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/basket.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/basket.tt
index a63dd515e3..1914c5545b 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/basket.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/basket.tt
@@ -713,24 +713,27 @@
           </div> <!-- /#cancelledorders -->
         [% END %]
         <br />
-        [% UNLESS ( closedate ) %]
-
-    <!-- Modal -->
-    <div id="addtoBasket" class="modal" tabindex="-1" role="dialog" aria-labelledby="addtoBasketLabel" aria-hidden="true">
-        <div class="modal-dialog">
-        <div class="modal-content">
-        <div class="modal-body">
-        [% IF active %]
-            [% INCLUDE 'acquisitions-add-to-basket.inc' %]
-        [% END %]
-        </div>
-        <div class="modal-footer">
-            <a href="#" class="cancel" data-dismiss="modal" aria-hidden="true">Cancel</a>
-        </div>
-        </div>
-        </div>
-    </div>
 
+        [% UNLESS ( closedate ) %]
+            <!-- Modal -->
+            <div id="addtoBasket" class="modal" tabindex="-1" role="dialog" aria-labelledby="addtoBasketLabel" aria-hidden="true" data-basketno="[% basket.basketname | html %]">
+                <div class="modal-dialog" role="document">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                            <h4 class="modal-title" id="addtoBasketLabel">Add order to basket</h4>
+                        </div>
+                        <div class="modal-body">
+                            [% IF active %]
+                                [% INCLUDE 'acquisitions-add-to-basket.inc' %]
+                            [% END %]
+                        </div>
+                        <div class="modal-footer">
+                            <a href="#" class="cancel" data-dismiss="modal" aria-hidden="true">Cancel</a>
+                        </div>
+                    </div><!-- /.modal-content -->
+                </div><!-- /.modal-dialog -->
+            </div><!-- /.modal -->
         [% END %]
 
 [% END %]
@@ -920,6 +923,13 @@
                 $("#set_basket_group").show();
             });
 
+            $(".modal").on("shown.bs.modal", function(){
+                var basket = $(this).data("basketno");
+                var legend = _("Add order to basket %s").format(basket);
+                $(this).find("h4").text( legend );
+                $(this).find("legend").html(legend);
+                $(this).find("input:text").focus();
+            });
         });
     </script>
 
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/booksellers.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/booksellers.tt
index 0fb92fe568..7a35a24842 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/booksellers.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/booksellers.tt
@@ -172,17 +172,21 @@
                                             [% END %]
                                             <!-- Modal -->
                                             <div id="addtoBasket[% basket.basketno | html %]" class="modal" tabindex="-1" role="dialog" aria-labelledby="addtoBasketLabel[% basket.basketno | html %]" aria-hidden="true" data-basketno="[% basket.basketname | html %]">
-                                                <div class="modal-dialog">
+                                                <div class="modal-dialog" role="document">
                                                     <div class="modal-content">
+                                                        <div class="modal-header">
+                                                            <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                                                            <h4 class="modal-title" id="addtoBasketLabel[% basket.basketno | html %]">Add order to basket</h4>
+                                                        </div>
                                                         <div class="modal-body">
                                                             [% INCLUDE 'acquisitions-add-to-basket.inc' booksellerid=supplier.booksellerid basketno=basket.basketno %]
                                                         </div>
                                                         <div class="modal-footer">
                                                             <a href="#" class="cancel" data-dismiss="modal" aria-hidden="true">Cancel</a>
                                                         </div>
-                                                    </div>
-                                                </div>
-                                            </div>
+                                                    </div><!-- /.modal-content -->
+                                                </div><!-- /.modal-dialog -->
+                                            </div><!-- /.modal -->
                                         [% END %]
                                         </td>
                                     </tr>
@@ -230,10 +234,12 @@
                 var id = $(this).find("option:selected").val();
                 window.location.href = "#" + id;
             });
-            $(".modal").on("show", function(){
+            $(".modal").on("shown.bs.modal", function(){
                 var basket = $(this).data("basketno");
                 var legend = _("Add order to basket %s").format(basket);
+                $(this).find("h4").text( legend );
                 $(this).find("legend").html(legend);
+                $(this).find("input:text").focus();
             });
             $("#show_all_vendors").hide();
             $("#show_active_vendors").on('click', function(e){
-- 
2.39.5