Commit Graph

5 Commits

Author SHA1 Message Date
Katie Smith
e53a97423b Update radio-select to use govuk-frontend buttons 2020-02-17 08:05:05 +00:00
Tom Byers
551f7b91f4 Test and then fix focus when module state changes
Includes tests for this.
2019-08-07 10:23:09 +01:00
Tom Byers
c11c054323 Fix option selection for keyboard users
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.
2019-08-07 10:23:09 +01:00
Tom Byers
5186402958 Add tests for different selection methods
Adds tests for selection by keyboard, involving
making a selection with the arrow keys and
confirming it with the space or enter keys.
2019-08-07 10:23:09 +01:00
Tom Byers
25b2414cec Add tests for radioSelect module 2019-08-07 10:23:09 +01:00