Skip to content

Commit

Permalink
Rename anchor-buttons to link-buttons
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
Robin Whittleton committed Aug 19, 2016
1 parent 9232c88 commit dcb4292
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 21 deletions.
8 changes: 4 additions & 4 deletions docs/javascript.md
Original file line number Diff line number Diff line change
Expand Up @@ -399,7 +399,7 @@ GOVUK.selectionButtons = function (elms, opts) {

This method will mean the `destroy` method is not available to call.

## Anchor buttons
## Link 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.

Expand All @@ -412,13 +412,13 @@ By default, this behaviour will only be applied to links with a role of button.
```

```javascript
GOVUK.anchorButtons.init();
GOVUK.linkButtons.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.linkButtons.init({
selector: '.my-class'
});
```
Expand All @@ -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.linkButtons.init({
keycodes: [32, 114]
});
```
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
// when the space key is pressed.
//
// usage instructions:
// GOVUK.anchorButtons.init();
// GOVUK.linkButtons.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.linkButtons.init({ selector: '[role="button"]' });
(function(global) {
"use strict";

var $ = global.jQuery;
var GOVUK = global.GOVUK || {};

GOVUK.anchorButtons = {
GOVUK.linkButtons = {

// default configuration that can be overridden by passing object as second parameter to module
config: {
Expand All @@ -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
Expand Down
4 changes: 2 additions & 2 deletions spec/manifest.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +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/link-buttons.js',
'../../javascripts/govuk/multivariate-test.js',
'../../javascripts/govuk/primary-links.js',
'../../javascripts/govuk/stick-at-top-when-scrolling.js',
Expand All @@ -20,7 +20,7 @@ var manifest = {
test : [
'../unit/modules.spec.js',
'../unit/Modules/auto-track-event.spec.js',
'../unit/anchor-button.spec.js',
'../unit/link-button.spec.js',
'../unit/multivariate-test.spec.js',
'../unit/primary-links.spec.js',
'../unit/stick-at-top-when-scrolling.spec.js',
Expand Down
22 changes: 11 additions & 11 deletions spec/unit/anchor-button.spec.js → spec/unit/link-button.spec.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
describe("anchor-buttons", function () {
describe("link-buttons", function () {
var $body;
var $anchorButton;
var $linkButton;
var keyupEvent;

beforeEach(function () {
$anchorButton = $('<a role="button">Button</a>');
$anchorButton.on('click',function(){
$anchorButton.addClass('clicked');
$linkButton = $('<a role="button">Button</a>');
$linkButton.on('click',function(){
$linkButton.addClass('clicked');
});
$(document.body).append($anchorButton);
$(document.body).append($linkButton);
keyupEvent = $.Event('keyup');
keyupEvent.target = $anchorButton.get(0);
GOVUK.anchorButtons.init();
keyupEvent.target = $linkButton.get(0);
GOVUK.linkButtons.init();
});

afterEach(function () {
$anchorButton.remove();
$linkButton.remove();
$(document).off('keyup');
});

Expand All @@ -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($linkButton.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($linkButton.hasClass('clicked')).toBe(false);
});

});

0 comments on commit dcb4292

Please sign in to comment.