diff --git a/javascripts/govuk/shim-links-with-button-role.js b/javascripts/govuk/shim-links-with-button-role.js index c6ced397..e9f1dc7a 100644 --- a/javascripts/govuk/shim-links-with-button-role.js +++ b/javascripts/govuk/shim-links-with-button-role.js @@ -1,13 +1,12 @@ // javascript 'shim' to trigger the click event of element(s) // when the space key is pressed. // -// usage instructions: -// GOVUK.shimLinksWithButtonRole.init(); +// Created since some Assistive Technologies (for example some Screenreaders) +// Will tell a user to press space on a 'button', so this functionality needs to be shimmed +// See https://github.com/alphagov/govuk_elements/pull/272#issuecomment-233028270 // -// 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.shimLinksWithButtonRole.init({ selector: '[role="button"]' }); +// Usage instructions: +// GOVUK.shimLinksWithButtonRole.init(); ;(function (global) { 'use strict' @@ -16,40 +15,16 @@ GOVUK.shimLinksWithButtonRole = { - // default configuration that can be overridden by passing object as second parameter to module - config: { - // the target element(s) to attach the shim event to - selector: 'a[role="button"]', - // array of keys to match against upon the keyup event - keycodes: [ - 32 // spacekey - ] - }, - - // event behaviour (not a typical anonymous function for resuse if needed) - triggerClickOnTarget: function triggerClickOnTarget (event) { - // 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() - } - }, - - // 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 - // {String} customConfig.selector a selector for the elements to be 'clicked' - // {Array} customConfig.keycodes an array of javascript keycode values to match against that when pressed will trigger the click - init: function init (customConfig) { - // extend the default config with any custom attributes passed in - this.config = $.extend(this.config, customConfig) - // if we have found elements then: - if ($(this.config.selector).length > 0) { - // listen to 'document' for keyup event on the elements and fire the triggerClickOnTarget - $(document).on('keyup', this.config.selector, this.triggerClickOnTarget.bind(this)) - } + init: function init () { + // listen to 'document' for keydown event on the any elements that should be buttons. + $(document).on('keydown', '[role="button"]', function (event) { + // if the keyCode (which) is 32 it's a space, let's simulate a click. + if (event.which === 32) { + event.preventDefault() + // trigger the target's click event + event.target.click() + } + }) } } diff --git a/spec/unit/shim-links-with-button-role.spec.js b/spec/unit/shim-links-with-button-role.spec.js index 1e3d27eb..055f005d 100644 --- a/spec/unit/shim-links-with-button-role.spec.js +++ b/spec/unit/shim-links-with-button-role.spec.js @@ -7,7 +7,7 @@ describe('shim-links-with-button-role', function () { var GOVUK = window.GOVUK var $buttonLink - var keyupEvent + var keyDownEvent beforeEach(function () { $buttonLink = $('Button') @@ -15,8 +15,8 @@ describe('shim-links-with-button-role', function () { $buttonLink.addClass('clicked') }) $(document.body).append($buttonLink) - keyupEvent = $.Event('keyup') - keyupEvent.target = $buttonLink.get(0) + keyDownEvent = $.Event('keydown') + keyDownEvent.target = $buttonLink.get(0) GOVUK.shimLinksWithButtonRole.init() }) @@ -28,14 +28,14 @@ describe('shim-links-with-button-role', function () { 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) + keyDownEvent.which = 32 // Space character + $(document).trigger(keyDownEvent) expect($buttonLink.hasClass('clicked')).toBe(true) }) it('should not trigger event on tab', function () { - keyupEvent.which = 9 // Tab character - $(document).trigger(keyupEvent) + keyDownEvent.which = 9 // Tab character + $(document).trigger(keyDownEvent) expect($buttonLink.hasClass('clicked')).toBe(false) }) })