From ddc3459ba5e72f0619a42dacd0f027998f6d3f81 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Sat, 24 Oct 2020 01:39:56 +0000
Subject: [PATCH] Bug 26808: Improve tab key access to circulation confirmation
 dialog

This patch modifies the checkout template so that the checkout
confirmation message can receive focus, improving tab access to the form
buttons in the dialog.

A "-1" value "tabindex" attribute makes the dialog focusable, and a
"focus" class automatically triggers focus. The focus and tabindex are
only set when the template logic says that the alert will require
confirmation.

To test, apply the patch and open a patron's account for checkout.

- Submit a barcode for checkout which will trigger a confirmation
  dialog. For instance:
  - A barcode they already have checked out
  - A barcode which is checked out to another patron
- When the page reloads you should see an alert-style dialog, "Please
  confirm checkout." The browser should show a focus outline around the
  dialog.
- Hitting the tab key should move the focus to the first focusable
  element inside the dialog. If there is a link in the text, this may be
  the first element. If not the confirmation button should be the next
  tabbable element.

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>
---
 koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt
index 056d40519d..78d47c28b4 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt
@@ -80,7 +80,7 @@
                     [% END %]
 
                     [% IF ( NEEDSCONFIRMATION ) %]
-                        <div id="circ_needsconfirmation" class="dialog alert audio-alert-action">
+                        <div id="circ_needsconfirmation" class="dialog alert audio-alert-action focus" tabindex="-1">
                             [% IF CAN_user_circulate_force_checkout or ADDITIONAL_MATERIALS %]
                                 <h3>Please confirm checkout</h3>
                             [% ELSE %]
@@ -313,7 +313,7 @@
                     [% END # /NEEDSCONFIRMATION %]
 
                     [% IF ( IMPOSSIBLE ) %]
-                        <div id="circ_impossible" class="dialog alert audio-alert-warning">
+                        <div id="circ_impossible" class="dialog alert audio-alert-warning focus" tabindex="-1">
                             [% IF ( UNKNOWN_BARCODE ) %]
                                 <h3>Barcode not found</h3>
                             [% END %]
-- 
2.39.5