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>
[% 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 %]
[% 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 %]