Merge pull request #310 from alphagov/fix-anchor-buttons

Fix link buttons
alphagov · Aug 19, 2016 · 21d19d7 · 21d19d7
2 parents 54eb219 + 19430c3
commit 21d19d7
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 12 deletions.
diff --git 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 class="button" role="button">A button</a>
+```
+
+```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 → ...ipts/govuk/shim-links-with-button-role.js b/javascripts/govuk/anchor-buttons.js → ...ipts/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
@@ -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
@@ -3,16 +3,16 @@
 <head>
   <title>Jasmine Test Runner</title>
 
-  <link rel="stylesheet" type="text/css" href="../../node_modules/grunt-contrib-jasmine/vendor/jasmine-2.0.1/jasmine.css">
+  <link rel="stylesheet" type="text/css" href="../../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
   <style>
     #wrapper { display: none; }
   </style>
 
   <!-- JASMINE FILES -->
-  <script type="text/javascript" src="../../node_modules/grunt-contrib-jasmine/vendor/jasmine-2.0.1/jasmine.js"></script>
-  <script type="text/javascript" src="../../node_modules/grunt-contrib-jasmine/vendor/jasmine-2.0.1/jasmine-html.js"></script>
+  <script type="text/javascript" src="../../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
+  <script type="text/javascript" src="../../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
 
-  <script type="text/javascript" src="../../node_modules/grunt-contrib-jasmine/vendor/jasmine-2.0.1/boot.js"></script>
+  <script type="text/javascript" src="../../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
   <script type="text/javascript" src="./load.js"></script>
 </head>
 <body>

diff --git a/spec/unit/shim-links-with-button-role.spec.js 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 = $('<a role="button">Button</a>');
+    $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);
+  });
+
+});