Self Check (web based) - Keep focus on scan input box in checkout screen
Affects | Status | Importance | Assigned to | Milestone | |
---|---|---|---|---|---|
Evergreen |
Confirmed
|
Wishlist
|
Unassigned |
Bug Description
EG 2.8.4
The issue we are seeing is that if a customer presses the tab key the cursor focus will move on to the next element. This causes the next scan to have no effect, if the focus is on the print list button, a receipt gets printed in response to the newline after the scan. Once the print list button is removed, then a tab takes the focus to the home button, so a scan would reload the checkout screen, but would loose the barcode just scanned.
So we have customers that either hit the tab key or via the touch screen change the focus, then scan all their items without looking at the screen, and don't notice that they haven't checked out more than the first one or two items.
It would be nice if there is nothing that the user can accidentally do on the checkout screen that would cause their next scan to fail.
A possible solution would be to tightly control the focus of the scan box on the checkout screen, and disable the scan box for the other screens where other input may be wanted/needed.
Some googling brought me to this example that disables the tab index, and moves the focus back to the text box onblur. I don't know if this is the correct way to handle it, but it might be a start.
http://
Thanks
Josh
description: | updated |
tags: | added: ux |
Changed in evergreen: | |
importance: | Undecided → Medium |
assignee: | nobody → Galen Charlton (gmc) |
Changed in evergreen: | |
importance: | Medium → Low |
importance: | Low → Wishlist |
status: | New → Confirmed |
tags: |
added: needswork removed: needsrepatch ux |
I'm been looking into this more, and have something that seems to work. We keep getting reports of people that think they have checked everything out, but have not. We have a problem with people never looking at the screen and thinking that the barcode scanner beep means that the checkout was successful. For some reason some scans are not registering with the self check, I'm assuming some of them are because the focus isn't in the scanbox, so I'm trying to get rid of at least that issue if possible.
The first fix is to register a onclick handler for the HTML element that returns focus to the scanbox any time anything is clicked. This keeps a random click/touch of the touch screen from sabotaging the next users first scan.
The next fix is to add an onkeyup handler that looks for a tab keypress, and returns the focus to the scanbox. This requires that there always be an extra element in the tabindex for the focus to move to first. If no other elements are available, the browser (firefox/openkiosk) will take the focus to the browser UI, which isn't possible to handle. So I added a <a>.</a> element hidden in the borders, So the scanbox will always have something to tab to.
I disable the tab hijacking for the payments page, so users can tab through the form there. I still need to work on re-enabling the tab hijack when you leave the payment page.
I added a bit that makes sure that the first field in the payments tab gets focus, so users can just start typing.
I don't have a branch ready to share yet, I want to do some more testing and try it out in production.
Josh