[Bug 26041] New: Accessibility: The date picker calendar is not keyboard accessible for "Reservation not needed after:" input
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Bug ID: 26041 Summary: Accessibility: The date picker calendar is not keyboard accessible for "Reservation not needed after:" input Change sponsored?: --- Product: Koha Version: master Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: OPAC Assignee: oleonard@myacpl.org Reporter: martin.renvoize@ptfs-europe.com QA Contact: testopia@bugs.koha-community.org CC: oleonard@myacpl.org, testopia@bugs.koha-community.org Blocks: 26040 The ‘Reservation not needed after:’ edit field and accompanying date picker can only be navigated using the ‘Ctrl’ and arrow keys. This means that some keyboard only users may not be able to populate the edit field independently. To replicate: 1/ Search for an item using quick search and reserve it from the results page. 2/ Confirm the reservation 3/ Attempt to navigate the datepicker via the keyboard without holding the ctrl key Solution: Ensure all interactive page elements are operable via standard keyboard commands. Also, consider implementing an accessible date picker. For example: https://dequeuniversity.com/library/aria/date-pickers/sf-date-picker Alternatively, allow users to enter a date into the form field by removing the ‘read-only’ attribute. Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26040 [Bug 26040] Accessibility: 2.1.1 Keyboard Access -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 --- Comment #1 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- OK.. So having played with the example highlighted above, I'm not happy that it is a viable alternative.. I managed to completely crash the browser on a few occasions trying to use it. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 --- Comment #2 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Created attachment 107176 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=107176&action=edit Bug 26041: Enable keyboard navigation without 'ctrl' This patch enables keyboard navigation using the arrow keys without the need to hold the control key for the jQuery UI datepicker. Test plan 1/ Navigate to an item in the opac and attempt to place a hold 2/ On the resultant screen, use keyboard navigation to trigger the 'Show more options' dropdown. 3/ Focus on one of the date inputs using keyboard navigation. 4/ Use 'ctrl + arrow' keys to navigate the datepicker. 5/ Note that prior to the patch using 'bare' arrow keys does not trigger anything 6/ Apply the patch and confirm that the datepicker can now be naviated using the arrow keys without holding the ctrl key. 7/ Confirm that using the ctrl key combinations continue to work as expected too. 8/ Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 --- Comment #3 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- I believe this is an elegant solution to the problem highlighted in the accessibility report. jQuery UI's datepicker is a popular component in wide use around the internet and is actually well regarded for it's accessibility options. In this patch, I have chosen not to replace the standard datepicker, but rather supplement it's existing functionality by hijacking arrow key inputs when the datepicker is in focus and mapping them to a ctrl + arrow combination before forwarding them to the datepicker and as such enable no ctrl navigation of the datepicker. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |bolshawh@parliament.uk -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |hayleymapley@catalyst.net.n | |z, katrin.fischer@bsz-bw.de -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|oleonard@myacpl.org |martin.renvoize@ptfs-europe | |.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 --- Comment #4 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- We have removed the readonly in the past on feedback of a blind staff user we had for a while. Maybe we could do both? I know she had preferred being able to enter the date directly as it was much quicker and didn't require getting the calendar read out. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 --- Comment #5 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- (In reply to Katrin Fischer from comment #4)
We have removed the readonly in the past on feedback of a blind staff user we had for a while. Maybe we could do both? I know she had preferred being able to enter the date directly as it was much quicker and didn't require getting the calendar read out.
I did wonder about that myself.. my only fear there is that we get the date entered correctly.. we would need to take locale into account I believe and perhaps use an input mask to validate it? -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 --- Comment #6 from Owen Leonard <oleonard@myacpl.org> --- I think this new code should be in calendar.inc instead of a separate file. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #107176|0 |1 is obsolete| | --- Comment #7 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Created attachment 107274 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=107274&action=edit Bug 26041: Enable keyboard navigation without 'ctrl' This patch enables keyboard navigation using the arrow keys without the need to hold the control key for the jQuery UI datepicker. Test plan 1/ Navigate to an item in the opac and attempt to place a hold 2/ On the resultant screen, use keyboard navigation to trigger the 'Show more options' dropdown. 3/ Focus on one of the date inputs using keyboard navigation. 4/ Use 'ctrl + arrow' keys to navigate the datepicker. 5/ Note that prior to the patch using 'bare' arrow keys does not trigger anything 6/ Apply the patch and confirm that the datepicker can now be naviated using the arrow keys without holding the ctrl key. 7/ Confirm that using the ctrl key combinations continue to work as expected too. 8/ Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 --- Comment #8 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- (In reply to Owen Leonard from comment #6)
I think this new code should be in calendar.inc instead of a separate file.
Done -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 --- Comment #9 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Erm.. where is the readonly actually set.. I can't seem to find it in our code? -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 --- Comment #10 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Created attachment 107276 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=107276&action=edit Bug 26041: Remove readonly flag This patch removes the readonly attribute from the date fields for 'reserve suspension' on the holds table and in opac-user. Note: I could not find where the readonly attribute is added to the date fields used when places a reserver. Note: I'm not sure about this followup.. if you enter a date in the wrong format (American vs British for example) you might end up with a bad date being submitted which could either result in a nasty server error or the wrong date being used. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Summary|Accessibility: The date |Accessibility: The date |picker calendar is not |picker calendar is not |keyboard accessible for |keyboard accessible |"Reservation not needed | |after:" input | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 --- Comment #11 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Need help/input on the readonly aspect of this.. I still can't find where the readonly attribute is added to the fields for the page originally mentioned in this bug report but I have removed it for some other datepicker cases. I'm not happy with the solution as it stands, however, as it enables the user to submit incorrect data which could result in either a server error in the best case or bad data in the worst. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Brandon J <brandon.jimenez@inlibro.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Brandon J <brandon.jimenez@inlibro.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #107276|0 |1 is obsolete| | --- Comment #12 from Brandon J <brandon.jimenez@inlibro.com> --- Created attachment 108664 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=108664&action=edit Bug 26041: Remove readonly flag This patch removes the readonly attribute from the date fields for 'reserve suspension' on the holds table and in opac-user. Note: I could not find where the readonly attribute is added to the date fields used when places a reserver. Note: I'm not sure about this followup.. if you enter a date in the wrong format (American vs British for example) you might end up with a bad date being submitted which could either result in a nasty server error or the wrong date being used. Signed-off-by: Brandon J <brandon.jimenez@inLibro.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Failed QA --- Comment #13 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Hi, it looks like the readonly is set in the JavaScript: $(".toggle-hold-options").show(); $(".hold-options").hide(); $(".holddatefrom,.holddateto").prop("readOnly", true); .holddateto is the one for "Hold not needed after:". Owen, could you maybe help out here? I am not sure why this was added and if we have means to validate the field input. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #108664|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #107274|0 |1 is obsolete| | --- Comment #14 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Created attachment 109470 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=109470&action=edit Bug 26041: Enable keyboard navigation without 'ctrl' This patch enables keyboard navigation using the arrow keys without the need to hold the control key for the jQuery UI datepicker. Test plan 1/ Navigate to an item in the opac and attempt to place a hold 2/ On the resultant screen, use keyboard navigation to trigger the 'Show more options' dropdown. 3/ Focus on one of the date inputs using keyboard navigation. 4/ Use 'ctrl + arrow' keys to navigate the datepicker. 5/ Note that prior to the patch using 'bare' arrow keys does not trigger anything 6/ Apply the patch and confirm that the datepicker can now be naviated using the arrow keys without holding the ctrl key. 7/ Confirm that using the ctrl key combinations continue to work as expected too. 8/ Signoff Signed-off-by: Brandon J <brandon.jimenez@inLibro.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Failed QA |Signed Off --- Comment #15 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- I have obsoleted the final patch with agreement from the sponsor. Removing the readonly attribute had the side effect of also interrupting the flow for keybarod navigation as the same field would be editable twice in sequence (once via text entry and a second time via the datepicker widget). -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Patch complexity|--- |Small patch -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #109470|0 |1 is obsolete| | --- Comment #16 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 109544 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=109544&action=edit Bug 26041: Enable keyboard navigation without 'ctrl' This patch enables keyboard navigation using the arrow keys without the need to hold the control key for the jQuery UI datepicker. Test plan 1/ Navigate to an item in the opac and attempt to place a hold 2/ On the resultant screen, use keyboard navigation to trigger the 'Show more options' dropdown. 3/ Focus on one of the date inputs using keyboard navigation. 4/ Use 'ctrl + arrow' keys to navigate the datepicker. 5/ Note that prior to the patch using 'bare' arrow keys does not trigger anything 6/ Apply the patch and confirm that the datepicker can now be naviated using the arrow keys without holding the ctrl key. 7/ Confirm that using the ctrl key combinations continue to work as expected too. 8/ Signoff Signed-off-by: Brandon J <brandon.jimenez@inLibro.com> Signed-off-by: Owen Leonard <oleonard@myacpl.org> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Nick Clemens <nick@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Passed QA -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Nick Clemens <nick@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #109544|0 |1 is obsolete| | --- Comment #17 from Nick Clemens <nick@bywatersolutions.com> --- Created attachment 109558 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=109558&action=edit Bug 26041: Enable keyboard navigation without 'ctrl' This patch enables keyboard navigation using the arrow keys without the need to hold the control key for the jQuery UI datepicker. Test plan 1/ Navigate to an item in the opac and attempt to place a hold 2/ On the resultant screen, use keyboard navigation to trigger the 'Show more options' dropdown. 3/ Focus on one of the date inputs using keyboard navigation. 4/ Use 'ctrl + arrow' keys to navigate the datepicker. 5/ Note that prior to the patch using 'bare' arrow keys does not trigger anything 6/ Apply the patch and confirm that the datepicker can now be naviated using the arrow keys without holding the ctrl key. 7/ Confirm that using the ctrl key combinations continue to work as expected too. 8/ Signoff Signed-off-by: Brandon J <brandon.jimenez@inLibro.com> Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Nick Clemens <nick@bywatersolutions.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Jonathan Druart <jonathan.druart@bugs.koha-community.org> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |jonathan.druart@bugs.koha-c | |ommunity.org --- Comment #18 from Jonathan Druart <jonathan.druart@bugs.koha-community.org> --- 2 Questions: 1. Why is this change only affecting the OPAC? 2. To me it's still not really "accessible", if you create a new account the current date is selected. How do you pick a date from, say, year 1980? Select year dropdown list still cannot be selected. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Jonathan Druart <jonathan.druart@bugs.koha-community.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Version(s)| |20.11.00 released in| | Status|Passed QA |Pushed to master -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 --- Comment #19 from Jonathan Druart <jonathan.druart@bugs.koha-community.org> --- Pushed to master for 20.11, thanks to everybody involved! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 --- Comment #20 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- (In reply to Jonathan Druart from comment #18)
2 Questions: 1. Why is this change only affecting the OPAC?
Currently, I'm only working through accessibility issues raised in a report which was carried out against the OPAC. There is also a report being written currently for the staff client I believe at which time hopefully I can work through issue there as their own piece of work.
2. To me it's still not really "accessible", if you create a new account the current date is selected. How do you pick a date from, say, year 1980? Select year dropdown list still cannot be selected.
Fair point, though the 'up' and 'down' arrows can be used to quickly scroll between months, it's still not ideal. I'll work on some additional improvements. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 --- Comment #21 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Actually.. those cases are already covered by default keybindings for the jQuery UI datepicker.. PAGE UP: Move to the previous month. PAGE DOWN: Move to the next month. CTRL + PAGE UP: Move to the previous year. CTRL + PAGE DOWN: Move to the next year. CTRL + HOME: Open the datepicker if closed. CTRL/COMMAND + HOME: Move to the current month. CTRL/COMMAND + LEFT: Move to the previous day. CTRL/COMMAND + RIGHT: Move to the next day. CTRL/COMMAND + UP: Move to the previous week. CTRL/COMMAND + DOWN: Move the next week. ENTER: Select the focused date. CTRL/COMMAND + END: Close the datepicker and erase the date. ESCAPE: Close the datepicker without selection. What my patch does is allow the existing SHIFT + ARROW to continue working whilst also mapping it to allow for just ARROW for more natural navigation.. The real issue here, is that there's not a universally agreed upon standard set of keyboard navigation keys for accessible calendar widgets so we're just trying to support a sensible variety. It may well be worth documenting these keyboard shortcuts somewhere though.. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Lucas Gass <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Pushed to master |Pushed to stable Version(s)|20.11.00 |20.11.00, 20.05.04 released in| | CC| |lucas@bywatersolutions.com --- Comment #22 from Lucas Gass <lucas@bywatersolutions.com> --- accessibility enhancement, choosing to backport: backported to 20.05.x for 20.05.04 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Aleisha Amohia <aleisha@catalyst.net.nz> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |aleisha@catalyst.net.nz Status|Pushed to stable |Pushed to oldstable Version(s)|20.11.00, 20.05.04 |20.11.00, 20.05.04, released in| |19.11.10 --- Comment #23 from Aleisha Amohia <aleisha@catalyst.net.nz> --- backported to 19.11.x for 19.11.10 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26041 Victor Grousset/tuxayo <victor@tuxayo.net> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |victor@tuxayo.net Version(s)|20.11.00, 20.05.04, |20.11.00, 20.05.04, released in|19.11.10 |19.11.10, 19.05.15 Status|Pushed to oldstable |Pushed to oldoldstable --- Comment #24 from Victor Grousset/tuxayo <victor@tuxayo.net> --- Backported to 19.05.x branch for 19.05.15 -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org