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.
Extends triggerEvent, allowing the creation of
different types of event, and to change the data
on its object. Also fakes the positional data
browsers add to the event object.
Also adds helpers for simulating:
- all the events for a mouse click
- the events invovled in moving the selection in a radio group
Live regions need to be in the original HTML of
the page to work. We were generating the summary
in JS.
This changes the JS to only generate the contents
of the summary so changes to its contents are
announces by the existing live-region.
One of the simplest of our JavaScript files to
test how difficult this is.
Answer is not too bad and includes the file
needing a DOM to operate on and jQuery in the
global scope.
