govuk_frontend_toolkit 4.16.0 → 4.16.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b8d78b034387f7e07ff6601b7423888d4f01139b
-  data.tar.gz: 54e289f1be8fed978d64397235c06ce621d08c2b
+  metadata.gz: 2f4ddc81957a656a0c17f892dfd132fc43ab5340
+  data.tar.gz: 3cea126b4db1d8bbf4738b4c0761a1caad2993d0
 SHA512:
-  metadata.gz: 92669e848e59e466579feba8c5dce2c1dd2bd2bdfd6783e12031d6932726dcd4ab750aacc752ddb589025ab646992c6b0c1d45f5696d31cb448cb03f934ebd25
-  data.tar.gz: 6f01eac90b691452454e72f62bfcb157e3df5260991471f2f79ce2350f571b720c8b868b2ca006f26ba58d8fec30902e25f1188e3d240516e331cad753bae182
+  metadata.gz: 1faf61dffef40648e7ff3950fc82c72cfc90809ae94cc21171620a42b628c0bb9f5f67580cd21e48c11e3d2927bb3da612921dbc67033f11ad47c71c895089c5
+  data.tar.gz: 130f686cd01660d1935c9356cba616803c6adba0011bb85c1a0fc2744de4671493ec7f27c2f7f57c618b0b2babb9eb08f532a3f10744073e76862e2ec515c7c7

data/app/assets/CHANGELOG.md

@@ -1,3 +1,8 @@
+# 4.16.1
+
+- Fix anchor-buttons.js to trigger a native click event, also rename to shimLinksWithButtonRole.js to explain what it does
+- Add tests for shimLinksWithButtonRole ([PR #310](https://github.com/alphagov/govuk_frontend_toolkit/pull/310))
+
 # 4.16.0
 
 - Add Department for International Trade organisation ([PR #308](https://github.com/alphagov/govuk_frontend_toolkit/pull/308))

data/app/assets/VERSION.txt

@@ -1 +1 @@
-4.16.0
+4.16.1

data/app/assets/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]
+});
+```

data/app/assets/javascripts/govuk/{anchor-buttons.js → 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

data/app/assets/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',

data/app/assets/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>

data/app/assets/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);
+  });
+
+});

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_frontend_toolkit
 version: !ruby/object:Gem::Version
-  version: 4.16.0
+  version: 4.16.1
 platform: ruby
 authors:
 - Government Digital Service
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-08-15 00:00:00.000000000 Z
+date: 2016-08-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -235,12 +235,12 @@ files:
 - app/assets/javascripts/govuk/analytics/google-analytics-universal-tracker.js
 - app/assets/javascripts/govuk/analytics/mailto-link-tracker.js
 - app/assets/javascripts/govuk/analytics/print-intent.js
-- app/assets/javascripts/govuk/anchor-buttons.js
 - app/assets/javascripts/govuk/modules.js
 - app/assets/javascripts/govuk/modules/auto-track-event.js
 - app/assets/javascripts/govuk/multivariate-test.js
 - app/assets/javascripts/govuk/primary-links.js
 - app/assets/javascripts/govuk/selection-buttons.js
+- app/assets/javascripts/govuk/shim-links-with-button-role.js
 - app/assets/javascripts/govuk/stick-at-top-when-scrolling.js
 - app/assets/javascripts/govuk/stop-scrolling-at-footer.js
 - app/assets/javascripts/govuk_toolkit.js
@@ -265,6 +265,7 @@ files:
 - app/assets/spec/unit/multivariate-test.spec.js
 - app/assets/spec/unit/primary-links.spec.js
 - app/assets/spec/unit/selection-button.spec.js
+- app/assets/spec/unit/shim-links-with-button-role.spec.js
 - app/assets/spec/unit/stick-at-top-when-scrolling.spec.js
 - app/assets/stylesheets/.gitkeep
 - app/assets/stylesheets/_colours.scss