Add the keyboard shim for link buttons

[jon-kirwan]

What

Add the keyboard shim for link buttons

Why

As links styled as buttons have the button role, some assistive technology announces 'To activate press space bar'. Links cannot usually be triggered with the space bar, and so we have to shim this behaviour – see alphagov/govuk_elements#272 for more context.

Examples

Button

https://components-gem-pr-3027.herokuapp.com/component-guide/button/default/preview

<button class="gem-c-button govuk-button" type="submit">Submit</button>

Link button

https://components-gem-pr-3027.herokuapp.com/component-guide/button#link_button

<a class="gem-c-button govuk-button" role="button" data-module="govuk-button" draggable="false" href="#" data-govuk-button-module-started="true">I'm really a link sssh</a>

Button (with data attributes)

https://components-gem-pr-3027.herokuapp.com/component-guide/button/with_data_attributes/preview

<button class="gem-c-button govuk-button gem-c-button--bottom-margin" type="submit" data-module="cross-domain-tracking" data-tracking-code="GA-123ABC" data-tracking-name="transactionTracker">Track this!</button>

Link button (with data attributes)

<a class="gem-c-button govuk-button gem-c-button--bottom-margin" role="button" data-module="govuk-button cross-domain-tracking" data-tracking-code="GA-123ABC" data-tracking-name="transactionTracker" draggable="false" href="#" data-govuk-button-module-started="true">Track this!</a>

Link button in application (with data attributes)

https://www.integration.publishing.service.gov.uk/overseas-passports (integration) or http://127.0.0.1:3005/overseas-passports (development)

<a class="gem-c-button govuk-button govuk-button--start gem-c-button--bottom-margin" role="button" rel="external" data-module="govuk-button cross-domain-tracking" data-tracking-code="UA-50679428-3" data-tracking-name="transactionTracker" draggable="false" href="https://www.passport.service.gov.uk/filter" data-govuk-button-module-started="true" data-cross-domain-tracking-module-started="true">  Start now
  <svg class="govuk-button__start-icon govuk-!-display-none-print" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" focusable="false" aria-hidden="true">
    <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
  </svg>
</a>

[MartinJJones]

Changes look good to me 👍

Only small nitpick would be to remove the extra line in the change log - https://github.com/alphagov/govuk_publishing_components/pull/3027/files#diff-06572a96a58dc510037d5efa622f9bec8519bc1beab13c9f251e97e657a9d4edR13

[jon-kirwan]

Changes look good to me 👍

Only small nitpick would be to remove the extra line in the change log - https://github.com/alphagov/govuk_publishing_components/pull/3027/files#diff-06572a96a58dc510037d5efa622f9bec8519bc1beab13c9f251e97e657a9d4edR13

Good spot and removed ✔️