Bug 26808 - Improve tab key access to circulation confirmation dialog
Summary: Improve tab key access to circulation confirmation dialog
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: master
Hardware: All All
: P3 normal (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2020-10-23 22:36 UTC by Kathryn Tyree
Modified: 2021-06-14 21:33 UTC (History)
3 users (show)

See Also:
Change sponsored?: Seeking developer
Patch complexity: Trivial patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
20.11.00


Attachments
Bug 26808: Improve tab key access to circulation confirmation dialog (2.63 KB, patch)
2020-10-27 15:32 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 26808: Improve tab key access to circulation confirmation dialog (2.68 KB, patch)
2020-10-31 19:25 UTC, David Nind
Details | Diff | Splinter Review
Bug 26808: Improve tab key access to circulation confirmation dialog (2.74 KB, patch)
2020-10-31 23:17 UTC, Katrin Fischer
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Kathryn Tyree 2020-10-23 22:36:48 UTC
Reduce number of times a user has to press tab to confirm a check out when there is a condition that the user may want to over-ride, and is circulating without a  mouse (Accessibility issue)

Test using the keyboard only.

Steps to reproduce:

* Set up a condition that you may want to over-ride at the point of check out, e.g. check the item out to another library member
* Type a borrower name
* Press enter
* Type a barcode number
* Press enter
* Tab 13 times (if no circ rules set), 15 times if the item is checked out to another member)
* Press enter.

It would be much better if after typing the barcode number the next three tabs are the buttons in the yellow box.
1 tab for yes
2 tabs for no
3 tabs for cancel (if relevant).
Comment 1 Owen Leonard 2020-10-27 15:32:46 UTC
Created attachment 112581 [details] [review]
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.
Comment 2 David Nind 2020-10-31 19:25:46 UTC
Created attachment 112765 [details] [review]
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>
Comment 3 Katrin Fischer 2020-10-31 23:17:58 UTC
Created attachment 112772 [details] [review]
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>
Comment 4 Jonathan Druart 2020-11-02 10:05:58 UTC
Pushed to master for 20.11, thanks to everybody involved!
Comment 5 Lucas Gass 2020-11-16 18:13:06 UTC
does not apply clean to 20.05.x, no backport