Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stop links styled as button from being dragged #1020

Merged
merged 1 commit into from Oct 9, 2018

Conversation

@quis
Copy link
Member

commented Oct 3, 2018

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.

d01


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).

d02


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

d03


  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
Copy link
Contributor

left a comment

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 quis force-pushed the quis:draggable-false branch 2 times, most recently from 283b766 to 10d3c40 Oct 3, 2018

@quis

This comment has been minimized.

Copy link
Member Author

commented Oct 3, 2018

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

@36degrees
Copy link
Contributor

left a comment

LGTM, thanks @quis!

@nickcolley
Copy link
Contributor

left a comment

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 :)

Stop links styled as button from being dragged
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.

---

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

It would be possible to develop this further with Javascript so a
`click` event could be triggered 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.

@quis quis force-pushed the quis:draggable-false branch from 10d3c40 to 4247e6c Oct 9, 2018

@nickcolley nickcolley merged commit c56e822 into alphagov:master Oct 9, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@kr8n3r kr8n3r added this to the [NEXT] milestone Oct 9, 2018

@kr8n3r kr8n3r referenced this pull request Oct 11, 2018

@quis quis deleted the quis:draggable-false branch Feb 22, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.