From 7a19854d9318a6385bf0c4fa07fd767e77331a00 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>