mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-10 13:23:40 -05:00
c11c054323
Keyboard users select a time slot by moving to the radio for that slot, using the arrow keys, and selecting it by pressing 'space' or 'enter', like a `<select>`. We allow this by listening for 'keydown' events from the 'enter' or 'space' keys on time slot radios that are checked. Browsers fire 'click' events alongside the 'keydown' event meaning it's possible for the code that makes the selection to be run twice. We currently guard against this by checking for the `pageX` property of the event object, reasoning that a click event fired by a key press won't have a cursor position. Most browsers we support set it to `0` but it isn't always the case: https://dom-event-test.glitch.me/results.html For those browsers, the `!event.pageX` condition resolves correctly so this works. Safari and versions of Internet Explorer before 11 however, set it to a positive number. In those browsers, moving the selection between radios using the arrow keys fired a 'click' event which, in Safari and IE<11, was treated as a mouse/touch event and so confirmed the selection. This made it impossible to select a later time. These changes replace the 'click' event on time slots with an artifical one that tracks mouse/trackpad clicks by listening for a 'mousedown' followed by a 'mouseup' on a time slot. This doesn't fire on key presses so avoids the problem.