Stop links styled as button from being dragged

[quis]

In user research we have seen users’ attempts at clicking links styled as buttons not registered because they moved the mouse as they were clicking. This instead triggers the browsers drag behaviour.

---

One user we were observing yesterday repeatedly encountered this problem and it took several attempts before they got to the next page. I reckon this is a combination of:

• having impaired motor skills
• being more familiar with a trackpad and touch screen

This only happens with links. With <button> elements you can move the mouse between depressing and releasing the button and a click event is still registered (as long as the cursor remains inside the button).

---

Setting the draggable attribute¹ to false prevents the drag behaviour from being triggered. This makes links styled as buttons behave in the same way as buttons².

---

1. draggable is supported in all current browsers: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable#Browser_compatibility

2. Buttons still have the problem of not registering a click if you drag outside the button’s area before releasing the mouse. It would be possible to use Javascript to trigger a click event even if the mouse left the region of the link or button before being released. This would be a more comprehensive fix, but would also involve significantly more engineering effort and potential side effects.

[NickColley]

Thank you for taking the time to write this up!

I think this makes a lot of sense, there's some stuff that needs to be done before this can be merged:

1. Generate the updated READMEs (run npm start, and you should see updated README files)
2. Add a CHANGELOG entry

Since these are chore tasks we're happy to do this for you, please let us know.

Edit: I think I'm going to do some cross browser testing of this for you too, just to double check this doesnt do something odd we didn't expect.

https://jsbin.com/bumulatozu/1/edit?html,css,output

• IE8: No change
• IE9: No change
• IE10: As expected
• IE11: As expected
• Edge: As expected
• Firefox: No change (but seems to work when you prevent 'ondragstart' event https://stackoverflow.com/a/30612766)
• Safari: As expected
• iOS Safari: As expected
• Chrome for Android: No change (but consistent with buttons)

[quis]

@NickColley I’ve done the CHANGELOG.md and README.md

[36degrees]

LGTM, thanks @quis!

[NickColley]

I wonder if we'll find even more that we need to do to make links behave like buttons, thanks for getting us closer @quis :)