From dca6221a1276d95f78f3b6f3d2abbaba5921d62d Mon Sep 17 00:00:00 2001
From: Paul Craig <paul_craig_16@hotmail.com>
Date: Wed, 15 Feb 2017 00:12:34 +0000
Subject: [PATCH] Add 'button' role to link button template

Another of the changes pulled in in the latest
template is that links with a role="button" can be targeted
by a script that will treat them the same as buttons.
This means you can press the space bar when they're focused
and it should register a click.

Frontend apps will have to set up their javascript independently,
but the button role will be in the markup from now on.

Source: https://github.com/alphagov/govuk_frontend_toolkit/pull/297
---
 pages_builder/assets/javascripts/onready.js | 10 ++++++++--
 pages_builder/pages/link-button.yml         |  2 ++
 toolkit/templates/link-button.html          |  2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/pages_builder/assets/javascripts/onready.js b/pages_builder/assets/javascripts/onready.js
index 7a1fa552..dfea348a 100644
--- a/pages_builder/assets/javascripts/onready.js
+++ b/pages_builder/assets/javascripts/onready.js
@@ -32,9 +32,15 @@
     GOVUK.GDM.validation();
   }
 
+  if (GOVUK.shimLinksWithButtonRole) {
+    GOVUK.shimLinksWithButtonRole.init({
+      selector: '[class^=link-button]'
+    });
+  }
+
   if (GOVUK.ShowHideContent) {
-    var showHideContent = new GOVUK.ShowHideContent()
-    showHideContent.init()
+    var showHideContent = new GOVUK.ShowHideContent();
+    showHideContent.init();
   }
 
 })(window);
diff --git a/pages_builder/pages/link-button.yml b/pages_builder/pages/link-button.yml
index 1410265e..e540b048 100644
--- a/pages_builder/pages/link-button.yml
+++ b/pages_builder/pages/link-button.yml
@@ -2,6 +2,8 @@ pageTitle: Link buttons
 assetPath: ../govuk_template/assets/
 head: >
   <link rel="stylesheet" media="all" type="text/css" href="../public/stylesheets/index.css" />
+bodyEnd: >
+  <script type="text/javascript" src="../public/javascripts/govuk_frontend_toolkit/govuk/shim-links-with-button-role.js"></script>
 examples:
   -
     label: View service
diff --git a/toolkit/templates/link-button.html b/toolkit/templates/link-button.html
index af732ade..f8637a61 100644
--- a/toolkit/templates/link-button.html
+++ b/toolkit/templates/link-button.html
@@ -1 +1 @@
-<a class='link-button{% if advice %}-with-advice{% endif %}' href='{{ url }}'>{{ label }}</a>
+<a class='link-button{% if advice %}-with-advice{% endif %}' href='{{ url }}' role='button'>{{ label }}</a>