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.

CHANGELOG.md

@@ -38,6 +38,16 @@
 
   ([PR #1007](https://github.com/alphagov/govuk-frontend/pull/1007))
 
+- Stop links styled as button from being dragged
+
+  Moving the mouse over a link while its button is depressed causes the
+  browser’s dragging behaviour to trigger (and prevents the `click`
+  event from firing). This is contrary to how actual `<button>` elements
+  work. This pull request makes the behaviour of links styled as buttons
+  consistent with that of buttons.
+
+  ([PR #1020](https://github.com/alphagov/govuk-frontend/pull/1020))
+
 - Pull Request Title goes here
 
   Description goes here (optional)

src/components/button/README.md

@@ -55,7 +55,7 @@ Buttons are configured to perform an action and they can have a different look.
 
 #### Markup
 
-    <a href="/" role="button" class="govuk-button">
+    <a href="/" role="button" draggable="false" class="govuk-button">
       Link button
     </a>
 
@@ -74,7 +74,7 @@ Buttons are configured to perform an action and they can have a different look.
 
 #### Markup
 
-    <a href="/" role="button" class="govuk-button govuk-button--disabled">
+    <a href="/" role="button" draggable="false" class="govuk-button govuk-button--disabled">
       Disabled link button
     </a>
 
@@ -94,7 +94,7 @@ Buttons are configured to perform an action and they can have a different look.
 
 #### Markup
 
-    <a href="/" role="button" class="govuk-button govuk-button--start">
+    <a href="/" role="button" draggable="false" class="govuk-button govuk-button--start">
       Start now link button
     </a>
 

src/components/button/template.njk

@@ -21,7 +21,7 @@
 {#- Actually create a button... or a link! #}
 
 {%- if element == 'a' %}
-<a href="{{ params.href if params.href else '#' }}" role="button" {{- commonAttributes | safe }}>
+<a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }}>
   {{ params.html | safe if params.html else params.text }}
 </a>