diff --git a/docs/javascript.md b/docs/javascript.md
index e651c399..23181762 100644
--- a/docs/javascript.md
+++ b/docs/javascript.md
@@ -398,3 +398,36 @@ GOVUK.selectionButtons = function (elms, opts) {
```
This method will mean the `destroy` method is not available to call.
+
+## Shim links with button role
+
+Links styled to look like buttons lack button behaviour. This script will allow them to be triggered with a space key after they’ve been focused, to match standard buttons.
+
+### Usage
+
+By default, this behaviour will only be applied to links with a role of button.
+
+```html
+A button
+```
+
+```javascript
+GOVUK.shimLinksWithButtonRole.init();
+```
+
+If you need to override the elements this is applied to then you can do that by passing in a custom selector to the initialiser:
+
+```javascript
+GOVUK.shimLinksWithButtonRole.init({
+ selector: '.my-class'
+});
+```
+
+It’s also possible to define more or different keycodes to activate against:
+
+```javascript
+// activate when the user presses space or ‘r’
+GOVUK.shimLinksWithButtonRole.init({
+ keycodes: [32, 114]
+});
+```
diff --git a/javascripts/govuk/anchor-buttons.js b/javascripts/govuk/shim-links-with-button-role.js
similarity index 82%
rename from javascripts/govuk/anchor-buttons.js
rename to javascripts/govuk/shim-links-with-button-role.js
index d654decd..3abaa2ca 100644
--- a/javascripts/govuk/anchor-buttons.js
+++ b/javascripts/govuk/shim-links-with-button-role.js
@@ -2,19 +2,19 @@
// when the space key is pressed.
//
// usage instructions:
-// GOVUK.anchorButtons.init();
+// GOVUK.shimLinksWithButtonRole.init();
//
// If you want to customise the shim you can pass in a custom configuration
// object with your own selector for the target elements and addional keyup
// codes if there becomes a need to do so. For example:
-// GOVUK.anchorButtons.init({ selector: '[role="button"]' });
+// GOVUK.shimLinksWithButtonRole.init({ selector: '[role="button"]' });
(function(global) {
"use strict";
var $ = global.jQuery;
var GOVUK = global.GOVUK || {};
- GOVUK.anchorButtons = {
+ GOVUK.shimLinksWithButtonRole = {
// default configuration that can be overridden by passing object as second parameter to module
config: {
@@ -28,16 +28,15 @@
// event behaviour (not a typical anonymous function for resuse if needed)
triggerClickOnTarget: function triggerClickOnTarget(event) {
- var code = event.charCode || event.keyCode;
- // if the keyCode/charCode from this event is in the keycodes array then
- if ($.inArray(code, this.config.keycodes) !== -1) {
+ // if the code from this event is in the keycodes array then
+ if ($.inArray(event.which, this.config.keycodes) !== -1) {
event.preventDefault();
// trigger the target's click event
- $(event.target).trigger("click");
+ event.target.click();
}
},
- // By default this will find all anchors with role attribute set to
+ // By default this will find all links with role attribute set to
// 'button' and will trigger their click event when the space key (32) is pressed.
// @method init
// @param {Object} customConfig object to override default configuration
diff --git a/spec/manifest.js b/spec/manifest.js
index 0b7e7822..e8349ebe 100644
--- a/spec/manifest.js
+++ b/spec/manifest.js
@@ -6,6 +6,7 @@ var manifest = {
'../../javascripts/govuk/modules/auto-track-event.js',
'../../javascripts/govuk/multivariate-test.js',
'../../javascripts/govuk/primary-links.js',
+ '../../javascripts/govuk/shim-links-with-button-role.js',
'../../javascripts/govuk/stick-at-top-when-scrolling.js',
'../../javascripts/govuk/stop-scrolling-at-footer.js',
'../../javascripts/govuk/selection-buttons.js',
@@ -21,6 +22,7 @@ var manifest = {
'../unit/Modules/auto-track-event.spec.js',
'../unit/multivariate-test.spec.js',
'../unit/primary-links.spec.js',
+ '../unit/shim-links-with-button-role.spec.js',
'../unit/stick-at-top-when-scrolling.spec.js',
'../unit/selection-button.spec.js',
'../unit/analytics/google-analytics-universal-tracker.spec.js',
diff --git a/spec/support/LocalTestRunner.html b/spec/support/LocalTestRunner.html
index 2ffbd99d..ed594bed 100644
--- a/spec/support/LocalTestRunner.html
+++ b/spec/support/LocalTestRunner.html
@@ -3,16 +3,16 @@
Jasmine Test Runner
-
+
-
-
+
+
-
+
diff --git a/spec/unit/shim-links-with-button-role.spec.js b/spec/unit/shim-links-with-button-role.spec.js
new file mode 100644
index 00000000..0916352c
--- /dev/null
+++ b/spec/unit/shim-links-with-button-role.spec.js
@@ -0,0 +1,36 @@
+describe("shim-links-with-button-role", function () {
+ var $body;
+ var $buttonLink;
+ var keyupEvent;
+
+ beforeEach(function () {
+ $buttonLink = $('Button');
+ $buttonLink.on('click',function(){
+ $buttonLink.addClass('clicked');
+ });
+ $(document.body).append($buttonLink);
+ keyupEvent = $.Event('keyup');
+ keyupEvent.target = $buttonLink.get(0);
+ GOVUK.shimLinksWithButtonRole.init();
+ });
+
+ afterEach(function () {
+ $buttonLink.remove();
+ $(document).off('keyup');
+ });
+
+ it('should trigger event on space', function(){
+ // Ideally we’d test the page loading functionality but that seems hard to
+ // do within a Jasmine context. Settle for checking a bound event trigger.
+ keyupEvent.which = 32; // Space character
+ $(document).trigger(keyupEvent);
+ expect($buttonLink.hasClass('clicked')).toBe(true);
+ });
+
+ it('should not trigger event on tab', function(){
+ keyupEvent.which = 9; // Tab character
+ $(document).trigger(keyupEvent);
+ expect($buttonLink.hasClass('clicked')).toBe(false);
+ });
+
+});