From 837bd21171d19869e8c048f2024ada9f8db77222 Mon Sep 17 00:00:00 2001 From: Robin Whittleton Date: Thu, 18 Aug 2016 13:17:57 +0100 Subject: [PATCH 1/6] Trigger anchor buttons with a standard click MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The previous jQuery click trigger doesn’t make links load their referenced pages. Swapping out for a default DOM click fixes this and still triggers bound events. Tested in latest Chrome / Firefox / Edge, and IE8-11. Voiceover triggers properly with a control+option+space. --- javascripts/govuk/anchor-buttons.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/javascripts/govuk/anchor-buttons.js b/javascripts/govuk/anchor-buttons.js index d654decd..e1a25cfa 100644 --- a/javascripts/govuk/anchor-buttons.js +++ b/javascripts/govuk/anchor-buttons.js @@ -33,7 +33,7 @@ if ($.inArray(code, this.config.keycodes) !== -1) { event.preventDefault(); // trigger the target's click event - $(event.target).trigger("click"); + event.target.click(); } }, From 24e16390353887345a3995c987ada8dc73ee0bf8 Mon Sep 17 00:00:00 2001 From: Robin Whittleton Date: Thu, 18 Aug 2016 17:48:15 +0100 Subject: [PATCH 2/6] =?UTF-8?q?Use=20jQuery=E2=80=99s=20normalised=20code?= =?UTF-8?q?=20data?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit event.which normalises keyCode and charCode already: http://api.jquery.com/event.which/ --- javascripts/govuk/anchor-buttons.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/javascripts/govuk/anchor-buttons.js b/javascripts/govuk/anchor-buttons.js index e1a25cfa..50298fa9 100644 --- a/javascripts/govuk/anchor-buttons.js +++ b/javascripts/govuk/anchor-buttons.js @@ -28,9 +28,8 @@ // 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.click(); From 205b522eda65e0bc2a4ca39be3f73cc022da5165 Mon Sep 17 00:00:00 2001 From: Robin Whittleton Date: Fri, 19 Aug 2016 09:25:30 +0100 Subject: [PATCH 3/6] Fix running the tests locally Jasmine changed location, breaking the local test runner. --- spec/support/LocalTestRunner.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 - + - - + + - + From 45f90af76b1d6141e644c1c75691c3a01e7e2b92 Mon Sep 17 00:00:00 2001 From: Robin Whittleton Date: Fri, 19 Aug 2016 09:40:02 +0100 Subject: [PATCH 4/6] Add a couple of tests for anchor buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. It should trigger with a space key 2. It shouldn’t trigger with a tab key --- spec/manifest.js | 2 ++ spec/unit/anchor-button.spec.js | 36 +++++++++++++++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 spec/unit/anchor-button.spec.js diff --git a/spec/manifest.js b/spec/manifest.js index 0b7e7822..6521202d 100644 --- a/spec/manifest.js +++ b/spec/manifest.js @@ -4,6 +4,7 @@ var manifest = { '../../node_modules/jquery/dist/jquery.js', '../../javascripts/govuk/modules.js', '../../javascripts/govuk/modules/auto-track-event.js', + '../../javascripts/govuk/anchor-buttons.js', '../../javascripts/govuk/multivariate-test.js', '../../javascripts/govuk/primary-links.js', '../../javascripts/govuk/stick-at-top-when-scrolling.js', @@ -19,6 +20,7 @@ var manifest = { test : [ '../unit/modules.spec.js', '../unit/Modules/auto-track-event.spec.js', + '../unit/anchor-button.spec.js', '../unit/multivariate-test.spec.js', '../unit/primary-links.spec.js', '../unit/stick-at-top-when-scrolling.spec.js', diff --git a/spec/unit/anchor-button.spec.js b/spec/unit/anchor-button.spec.js new file mode 100644 index 00000000..e8a6f079 --- /dev/null +++ b/spec/unit/anchor-button.spec.js @@ -0,0 +1,36 @@ +describe("anchor-buttons", function () { + var $body; + var $anchorButton; + var keyupEvent; + + beforeEach(function () { + $anchorButton = $('Button'); + $anchorButton.on('click',function(){ + $anchorButton.addClass('clicked'); + }); + $(document.body).append($anchorButton); + keyupEvent = $.Event('keyup'); + keyupEvent.target = $anchorButton.get(0); + GOVUK.anchorButtons.init(); + }); + + afterEach(function () { + $anchorButton.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($anchorButton.hasClass('clicked')).toBe(true); + }); + + it('should not trigger event on tab', function(){ + keyupEvent.which = 9; // Tab character + $(document).trigger(keyupEvent); + expect($anchorButton.hasClass('clicked')).toBe(false); + }); + +}); From 9232c88d0228239b6f5b87019451752112c667bc Mon Sep 17 00:00:00 2001 From: Robin Whittleton Date: Fri, 19 Aug 2016 10:27:35 +0100 Subject: [PATCH 5/6] Document the anchor button code Add some standard documentation describing how to initialise the code and what options are present. --- docs/javascript.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/docs/javascript.md b/docs/javascript.md index e651c399..1926ad7a 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. + +## Anchor buttons + +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.anchorButtons.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.anchorButtons.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.anchorButtons.init({ + keycodes: [32, 114] +}); +``` From 19430c358f5deb46dab3e4cd532adf7404ca214a Mon Sep 17 00:00:00 2001 From: Robin Whittleton Date: Fri, 19 Aug 2016 11:09:50 +0100 Subject: [PATCH 6/6] Rename anchor-buttons to shim-links-with-button-role MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When people think of anchors they think of in-page links, regardless of how much the HTML5 spec talks about ‘hypertext anchors’. Theoretically this change should mean a major version bump for the next release, but as the existing code didn’t actually work I think we can get away with a point release. --- docs/javascript.md | 8 +++---- ...tons.js => shim-links-with-button-role.js} | 8 +++---- spec/manifest.js | 4 ++-- ...js => shim-links-with-button-role.spec.js} | 22 +++++++++---------- 4 files changed, 21 insertions(+), 21 deletions(-) rename javascripts/govuk/{anchor-buttons.js => shim-links-with-button-role.js} (90%) rename spec/unit/{anchor-button.spec.js => shim-links-with-button-role.spec.js} (56%) diff --git a/docs/javascript.md b/docs/javascript.md index 1926ad7a..23181762 100644 --- a/docs/javascript.md +++ b/docs/javascript.md @@ -399,7 +399,7 @@ GOVUK.selectionButtons = function (elms, opts) { This method will mean the `destroy` method is not available to call. -## Anchor buttons +## 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. @@ -412,13 +412,13 @@ By default, this behaviour will only be applied to links with a role of button. ``` ```javascript -GOVUK.anchorButtons.init(); +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.anchorButtons.init({ +GOVUK.shimLinksWithButtonRole.init({ selector: '.my-class' }); ``` @@ -427,7 +427,7 @@ It’s also possible to define more or different keycodes to activate against: ```javascript // activate when the user presses space or ‘r’ -GOVUK.anchorButtons.init({ +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 90% rename from javascripts/govuk/anchor-buttons.js rename to javascripts/govuk/shim-links-with-button-role.js index 50298fa9..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: { @@ -36,7 +36,7 @@ } }, - // 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 6521202d..e8349ebe 100644 --- a/spec/manifest.js +++ b/spec/manifest.js @@ -4,9 +4,9 @@ var manifest = { '../../node_modules/jquery/dist/jquery.js', '../../javascripts/govuk/modules.js', '../../javascripts/govuk/modules/auto-track-event.js', - '../../javascripts/govuk/anchor-buttons.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', @@ -20,9 +20,9 @@ var manifest = { test : [ '../unit/modules.spec.js', '../unit/Modules/auto-track-event.spec.js', - '../unit/anchor-button.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/unit/anchor-button.spec.js b/spec/unit/shim-links-with-button-role.spec.js similarity index 56% rename from spec/unit/anchor-button.spec.js rename to spec/unit/shim-links-with-button-role.spec.js index e8a6f079..0916352c 100644 --- a/spec/unit/anchor-button.spec.js +++ b/spec/unit/shim-links-with-button-role.spec.js @@ -1,21 +1,21 @@ -describe("anchor-buttons", function () { +describe("shim-links-with-button-role", function () { var $body; - var $anchorButton; + var $buttonLink; var keyupEvent; beforeEach(function () { - $anchorButton = $('Button'); - $anchorButton.on('click',function(){ - $anchorButton.addClass('clicked'); + $buttonLink = $('Button'); + $buttonLink.on('click',function(){ + $buttonLink.addClass('clicked'); }); - $(document.body).append($anchorButton); + $(document.body).append($buttonLink); keyupEvent = $.Event('keyup'); - keyupEvent.target = $anchorButton.get(0); - GOVUK.anchorButtons.init(); + keyupEvent.target = $buttonLink.get(0); + GOVUK.shimLinksWithButtonRole.init(); }); afterEach(function () { - $anchorButton.remove(); + $buttonLink.remove(); $(document).off('keyup'); }); @@ -24,13 +24,13 @@ describe("anchor-buttons", function () { // do within a Jasmine context. Settle for checking a bound event trigger. keyupEvent.which = 32; // Space character $(document).trigger(keyupEvent); - expect($anchorButton.hasClass('clicked')).toBe(true); + expect($buttonLink.hasClass('clicked')).toBe(true); }); it('should not trigger event on tab', function(){ keyupEvent.which = 9; // Tab character $(document).trigger(keyupEvent); - expect($anchorButton.hasClass('clicked')).toBe(false); + expect($buttonLink.hasClass('clicked')).toBe(false); }); });