{"action":"created","issue":{"url":"https://api.github.com/repos/alphagov/govuk-frontend/issues/1020","repository_url":"https://api.github.com/repos/alphagov/govuk-frontend","labels_url":"https://api.github.com/repos/alphagov/govuk-frontend/issues/1020/labels{/name}","comments_url":"https://api.github.com/repos/alphagov/govuk-frontend/issues/1020/comments","events_url":"https://api.github.com/repos/alphagov/govuk-frontend/issues/1020/events","html_url":"https://github.com/alphagov/govuk-frontend/pull/1020","id":366263896,"node_id":"MDExOlB1bGxSZXF1ZXN0MjE5OTgxMjM4","number":1020,"title":"Stop links styled as button from being dragged","user":{"login":"quis","id":355079,"node_id":"MDQ6VXNlcjM1NTA3OQ==","avatar_url":"https://avatars2.githubusercontent.com/u/355079?v=4","gravatar_id":"","url":"https://api.github.com/users/quis","html_url":"https://github.com/quis","followers_url":"https://api.github.com/users/quis/followers","following_url":"https://api.github.com/users/quis/following{/other_user}","gists_url":"https://api.github.com/users/quis/gists{/gist_id}","starred_url":"https://api.github.com/users/quis/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/quis/subscriptions","organizations_url":"https://api.github.com/users/quis/orgs","repos_url":"https://api.github.com/users/quis/repos","events_url":"https://api.github.com/users/quis/events{/privacy}","received_events_url":"https://api.github.com/users/quis/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-10-03T10:08:24Z","updated_at":"2018-10-03T11:15:12Z","closed_at":null,"author_association":"MEMBER","pull_request":{"url":"https://api.github.com/repos/alphagov/govuk-frontend/pulls/1020","html_url":"https://github.com/alphagov/govuk-frontend/pull/1020","diff_url":"https://github.com/alphagov/govuk-frontend/pull/1020.diff","patch_url":"https://github.com/alphagov/govuk-frontend/pull/1020.patch"},"body":"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.\r\n\r\n![d01](https://user-images.githubusercontent.com/355079/46403930-b6c11c00-c6fb-11e8-8f61-cf6c71820f56.gif)\r\n\r\n***\r\n\r\nOne 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:\r\n- having impaired motor skills\r\n- being more familiar with a trackpad and touch screen\r\n\r\nThis 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).\r\n\r\n![d02](https://user-images.githubusercontent.com/355079/46403982-dfe1ac80-c6fb-11e8-840b-2f5ab3c22a98.gif)\r\n\r\n***\r\n\r\nSetting the `draggable` attribute<sup>1</sup> to `false` prevents the drag behaviour from being triggered. This makes links styled as buttons behave in the same way as buttons<sup>2</sup>.\r\n\r\n![d03](https://user-images.githubusercontent.com/355079/46404071-17e8ef80-c6fc-11e8-993a-aa210c04079d.gif)\r\n\r\n***\r\n\r\n1. `draggable` is supported in all current browsers: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable#Browser_compatibility\r\n\r\n2. 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."},"comment":{"url":"https://api.github.com/repos/alphagov/govuk-frontend/issues/comments/426599135","html_url":"https://github.com/alphagov/govuk-frontend/pull/1020#issuecomment-426599135","issue_url":"https://api.github.com/repos/alphagov/govuk-frontend/issues/1020","id":426599135,"node_id":"MDEyOklzc3VlQ29tbWVudDQyNjU5OTEzNQ==","user":{"login":"quis","id":355079,"node_id":"MDQ6VXNlcjM1NTA3OQ==","avatar_url":"https://avatars2.githubusercontent.com/u/355079?v=4","gravatar_id":"","url":"https://api.github.com/users/quis","html_url":"https://github.com/quis","followers_url":"https://api.github.com/users/quis/followers","following_url":"https://api.github.com/users/quis/following{/other_user}","gists_url":"https://api.github.com/users/quis/gists{/gist_id}","starred_url":"https://api.github.com/users/quis/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/quis/subscriptions","organizations_url":"https://api.github.com/users/quis/orgs","repos_url":"https://api.github.com/users/quis/repos","events_url":"https://api.github.com/users/quis/events{/privacy}","received_events_url":"https://api.github.com/users/quis/received_events","type":"User","site_admin":false},"created_at":"2018-10-03T11:15:12Z","updated_at":"2018-10-03T11:15:12Z","author_association":"MEMBER","body":"@nickcolley I’ve done the `CHANGELOG.md` and `README.md`"}}
{"actor":{"display_login":"quis"}}