Feature/anchor buttons #297

paulmsmith · 2016-07-26T06:40:37Z

As discussed in 'remove button role from start link' here is a pull request to shim anchors with role="button" to be 'clicked' via the space key.

I've not written tests yet, assuming the general style of this is fine then I'll do that. My thoughts were that this shim should be configurable but I've heard opinion that for a 'shim' that is not always a good thing. Thoughts, Suggestions welcome. :)

alextea · 2016-07-27T10:38:33Z

javascripts/govuk/anchor-buttons.js

+
+  };
+
+  // if disbaleInit is not true then run the init method


Good spot! Will fix.

NickColley · 2016-07-27T12:31:54Z

Thanks a lot for getting this together Paul 👍

One thing that worries me with this is it could break the behaviour of scrolling the page when pressing space.

It seems as though if a user is focused on a link it's okay to block that behaviour but I'm not entirely sure of all the edge cases so thought I'd comment in the hope that someone else can think about this too.

NickColley · 2016-07-27T12:34:22Z

javascripts/govuk/anchor-buttons.js

+    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) {


A nit (sorry) but I'm wondering, if we're only ever going to be shimming the spacekey, could we just do a boring

code === 32

here instead of an array comparison, not super important (sorry again :P)

Again fair point. Originally there was talk of triggering on enter/return as well. Left it open to additional key-codes just in case more than anything. Happy to change if we feel that makes it more readable/explicit.

Generally for me I prefer to avoid anticipating future updates since more often than not they don't happen but don't think this blocks merging, so up to you. ✌️

robinwhittleton · 2016-07-27T12:44:13Z

This adds a file, but won’t roll it out across GOV.UK. I guess we want to add it to govuk_template.js, intialise it in govuk_template’s core.js, then push a new version and update static’s Gemfile to use that.

…omment

paulmsmith · 2016-07-28T09:33:38Z

Hi all, I've made the updates after the suggestions. I have changed it now so that the event listener is on the document and I have also updated the module pattern so that it needs to be explicitly initiated.

paulmsmith · 2016-07-29T11:32:32Z

@robinwhittleton I'm due to go away for two weeks now. I've removed the 'WIP' from the title and I think this can be merged whenever you and others feel is a good time.

gemmaleigh · 2016-07-29T16:10:55Z

@paulmsmith thanks for this! We'll review shortly. Have a good break!

gemmaleigh · 2016-08-04T09:38:44Z

I'd like to get @aduggin's opinion on this before we merge.

gemmaleigh · 2016-08-04T09:40:19Z

javascripts/govuk/anchor-buttons.js

+    },
+
+    // By default this will find all anchors with role attribute set to 
+    // 'button' and will trigger their click event when the spaceky (32) is pressed.


mini-nit, typo in comment (spacekey)

aduggin · 2016-08-10T07:40:20Z

This approach looks good to me

robinwhittleton · 2016-08-10T08:24:34Z

Thanks. Will merge this now, address @gemmaleigh’s nits in a further PR.

- Add support for Google Analytics fieldsObject (PR #298) - anchor-buttons.js: normalise keyboard behaviour between buttons and links with a button role (PR #297)

@Viewport

https://github.com/alphagov/govuk_frontend_toolkit/blob/master/CHANGELOG .md # 4.18.0 - Add GOVUK.ShowHideContent JavaScript to support showing and hiding content, toggled by radio buttons and checkboxes ([PR #315](alphagov/govuk_frontend_toolkit#315)). # 4.17.0 - SelectionButtons will add a class to the label with the type of the child input ([PR #317](alphagov/govuk_frontend_toolkit#317)) # 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](alphagov/govuk_frontend_toolkit#310)) # 4.16.0 - Add Department for International Trade organisation ([PR #308](alphagov/govuk_frontend_toolkit#308)) # 4.15.0 - Add support for Google Analytics fieldsObject ([PR #298](alphagov/govuk_frontend_toolkit#298)) - anchor-buttons.js: normalise keyboard behaviour between buttons and links with a button role ([PR #297](alphagov/govuk_frontend_toolkit#297)) # 4.14.1 - Fix tabular number sizing in Firefox ([PR #301](alphagov/govuk_frontend_toolkit#301)) # 4.14.0 - Allow use of multiple GA customDimensionIndex. See [this section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/ docs/javascript.md#using-google-custom-dimensions-with-your-own-statisti cal-model) of the documentation for more information. - Configurable duration (in days) for AB Test cookie. See [this section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/ docs/javascript.md#multivariate-test-framework) of the documentation for more information. - Allow base scripts to run within a module loader. See [this PR](alphagov/govuk_frontend_toolkit#290) for more information. # 4.13.0 - Make headings block-level by default (PR #200). If you are styling elements you want to be inline with heading includes, you’ll need to explicitly make them inline in your CSS. # 4.12.0 - Increase button padding to match padding from GOV.UK elements (PR #275). If you have UI which depends on the padding set by the button mixin in the frontend toolkit and this is not overridden by button padding set by GOV.UK elements, this change will affect it. # 4.11.0 - Remove the GDS-Logo font-face definition (PR #272) - Move the @Viewport statements to govuk_template (PR #272). If you upgrade to this version of govuk_frontend_toolkit and you’re also using govuk_template you’ll need to upgrade that to at least 0.17.2 to maintain compatibility with desktop IE10 in snap mode. # 4.10.0 - Allow New Transport font stack to be overridden by apps using `$toolkit-font-stack` and `$toolkit-font-stack-tabular` (PR #230) # 4.9.1 - Fix phase banner alignment (PR #266) # 4.9.0 - Add websafe organisation colours - Split colours into two files with backwards-compatible colours.scss replacement # 4.8.2 - Add GOV.UK lint to lint scss files (PR #260) - Remove reference to old colour palette (PR #256) - Fix link to GOV.UK elements - tabular data # 4.8.1 - Update DEFRA brand colour to new green (PR #249) # 4.8.0 - Pass cohort name to analytics when using multivariate test (PR #251) # 4.7.0 - Add 'mailto' tracking to GOV.UK Analytics (PR #244) # 4.6.1 - Use the Sass variable $light-blue for link active and hover colours (PR #242)

@Viewport

https://github.com/alphagov/govuk_frontend_toolkit/blob/master/CHANGELOG .md # 4.18.3 - For smaller screens (<768px) ensure that the GOVUK.StickAtTopWhenScrolling JS "unsticks" the element which was previously "stuck" (by removing both the class which sets fixed positioning and the shim). ([PR #329](alphagov/govuk_frontend_toolkit#329)) # 4.18.2 - Remove unnecessary print font fallback that causes regression downstream ([PR #328](alphagov/govuk_frontend_toolkit#328)) - Update tooling to use npm script rather than grunt-shell ([PR #327](alphagov/govuk_frontend_toolkit#327)) # 4.18.1 - Fix error in IE - remove trailing comma from shimLinksWithButtonRole JavaScript ([PR #323](alphagov/govuk_frontend_toolkit#323)). # 4.18.0 - Add GOVUK.ShowHideContent JavaScript to support showing and hiding content, toggled by radio buttons and checkboxes ([PR #315](alphagov/govuk_frontend_toolkit#315)). # 4.17.0 - SelectionButtons will add a class to the label with the type of the child input ([PR #317](alphagov/govuk_frontend_toolkit#317)) # 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](alphagov/govuk_frontend_toolkit#310)) # 4.16.0 - Add Department for International Trade organisation ([PR #308](alphagov/govuk_frontend_toolkit#308)) # 4.15.0 - Add support for Google Analytics fieldsObject ([PR #298](alphagov/govuk_frontend_toolkit#298)) - anchor-buttons.js: normalise keyboard behaviour between buttons and links with a button role ([PR #297](alphagov/govuk_frontend_toolkit#297)) # 4.14.1 - Fix tabular number sizing in Firefox ([PR #301](alphagov/govuk_frontend_toolkit#301)) # 4.14.0 - Allow use of multiple GA customDimensionIndex. See [this section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/ docs/javascript.md#using-google-custom-dimensions-with-your-own-statisti cal-model) of the documentation for more information. - Configurable duration (in days) for AB Test cookie. See [this section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/ docs/javascript.md#multivariate-test-framework) of the documentation for more information. - Allow base scripts to run within a module loader. See [this PR](alphagov/govuk_frontend_toolkit#290) for more information. # 4.13.0 - Make headings block-level by default (PR #200). If you are styling elements you want to be inline with heading includes, you’ll need to explicitly make them inline in your CSS. # 4.12.0 - Increase button padding to match padding from GOV.UK elements (PR #275). If you have UI which depends on the padding set by the button mixin in the frontend toolkit and this is not overridden by button padding set by GOV.UK elements, this change will affect it. # 4.11.0 - Remove the GDS-Logo font-face definition (PR #272) - Move the @Viewport statements to govuk_template (PR #272). If you upgrade to this version of govuk_frontend_toolkit and you’re also using govuk_template you’ll need to upgrade that to at least 0.17.2 to maintain compatibility with desktop IE10 in snap mode.

@Viewport

https://github.com/alphagov/govuk_frontend_toolkit/blob/master/CHANGELOG .md 4.18.3 - For smaller screens (<768px) ensure that the GOVUK.StickAtTopWhenScrolling JS "unsticks" the element which was previously "stuck" (by removing both the class which sets fixed positioning and the shim). ([PR 329](alphagov/govuk_frontend_toolkit#329)) 4.18.2 - Remove unnecessary print font fallback that causes regression downstream ([PR 328](alphagov/govuk_frontend_toolkit#328)) - Update tooling to use npm script rather than grunt-shell ([PR 327](alphagov/govuk_frontend_toolkit#327)) 4.18.1 - Fix error in IE - remove trailing comma from shimLinksWithButtonRole JavaScript ([PR 323](alphagov/govuk_frontend_toolkit#323)). 4.18.0 - Add GOVUK.ShowHideContent JavaScript to support showing and hiding content, toggled by radio buttons and checkboxes ([PR 315](alphagov/govuk_frontend_toolkit#315)). 4.17.0 - SelectionButtons will add a class to the label with the type of the child input ([PR 317](alphagov/govuk_frontend_toolkit#317)) 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](alphagov/govuk_frontend_toolkit#310)) 4.16.0 - Add Department for International Trade organisation ([PR 308](alphagov/govuk_frontend_toolkit#308)) 4.15.0 - Add support for Google Analytics fieldsObject ([PR 298](alphagov/govuk_frontend_toolkit#298)) - anchor-buttons.js: normalise keyboard behaviour between buttons and links with a button role ([PR 297](alphagov/govuk_frontend_toolkit#297)) 4.14.1 - Fix tabular number sizing in Firefox ([PR 301](alphagov/govuk_frontend_toolkit#301)) 4.14.0 - Allow use of multiple GA customDimensionIndex. See [this section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/ docs/javascript.md#using-google-custom-dimensions-with-your-own-statisti cal-model) of the documentation for more information. - Configurable duration (in days) for AB Test cookie. See [this section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/ docs/javascript.md#multivariate-test-framework) of the documentation for more information. - Allow base scripts to run within a module loader. See [this PR](alphagov/govuk_frontend_toolkit#290) for more information. 4.13.0 - Make headings block-level by default (PR #200). If you are styling elements you want to be inline with heading includes, you’ll need to explicitly make them inline in your CSS. 4.12.0 - Increase button padding to match padding from GOV.UK elements (PR 275). If you have UI which depends on the padding set by the button mixin in the frontend toolkit and this is not overridden by button padding set by GOV.UK elements, this change will affect it. 4.11.0 - Remove the GDS-Logo font-face definition (PR #272) - Move the @Viewport statements to govuk_template (PR #272). If you upgrade to this version of govuk_frontend_toolkit and you’re also using govuk_template you’ll need to upgrade that to at least 0.17.2 to maintain compatibility with desktop IE10 in snap mode.

@Viewport

https://github.com/alphagov/govuk_frontend_toolkit/blob/master/CHANGELOG .md 4.18.3 - For smaller screens (<768px) ensure that the GOVUK.StickAtTopWhenScrolling JS "unsticks" the element which was previously "stuck" (by removing both the class which sets fixed positioning and the shim). ([PR 329](alphagov/govuk_frontend_toolkit#329)) 4.18.2 - Remove unnecessary print font fallback that causes regression downstream ([PR 328](alphagov/govuk_frontend_toolkit#328)) - Update tooling to use npm script rather than grunt-shell ([PR 327](alphagov/govuk_frontend_toolkit#327)) 4.18.1 - Fix error in IE - remove trailing comma from shimLinksWithButtonRole JavaScript ([PR 323](alphagov/govuk_frontend_toolkit#323)). 4.18.0 - Add GOVUK.ShowHideContent JavaScript to support showing and hiding content, toggled by radio buttons and checkboxes ([PR 315](alphagov/govuk_frontend_toolkit#315)). 4.17.0 - SelectionButtons will add a class to the label with the type of the child input ([PR 317](alphagov/govuk_frontend_toolkit#317)) 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](alphagov/govuk_frontend_toolkit#310)) 4.16.0 - Add Department for International Trade organisation ([PR 308](alphagov/govuk_frontend_toolkit#308)) 4.15.0 - Add support for Google Analytics fieldsObject ([PR 298](alphagov/govuk_frontend_toolkit#298)) - anchor-buttons.js: normalise keyboard behaviour between buttons and links with a button role ([PR 297](alphagov/govuk_frontend_toolkit#297)) 4.14.1 - Fix tabular number sizing in Firefox ([PR 301](alphagov/govuk_frontend_toolkit#301)) 4.14.0 - Allow use of multiple GA customDimensionIndex. See [this section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/ docs/javascript.md#using-google-custom-dimensions-with-your-own-statisti cal-model) of the documentation for more information. - Configurable duration (in days) for AB Test cookie. See [this section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/ docs/javascript.md#multivariate-test-framework) of the documentation for more information. - Allow base scripts to run within a module loader. See [this PR](alphagov/govuk_frontend_toolkit#290) for more information. 4.13.0 - Make headings block-level by default (PR #200). If you are styling elements you want to be inline with heading includes, you’ll need to explicitly make them inline in your CSS. 4.12.0 - Increase button padding to match padding from GOV.UK elements (PR 275). If you have UI which depends on the padding set by the button mixin in the frontend toolkit and this is not overridden by button padding set by GOV.UK elements, this change will affect it. 4.11.0 - Remove the GDS-Logo font-face definition (PR #272) - Move the @Viewport statements to govuk_template (PR #272). If you upgrade to this version of govuk_frontend_toolkit and you’re also using govuk_template you’ll need to upgrade that to at least 0.17.2 to maintain compatibility with desktop IE10 in snap mode.

Another of the changes pulled in in the latest template is that links with a role="button" can be targeted by a script that will treat them the same as buttons. This means you can press the space bar when they're focused and it should register a click. Frontend apps will have to set up their javascript independently, but the button role will be in the markup from now on. Source: alphagov/govuk_frontend_toolkit#297

Paul Smith added 2 commits July 25, 2016 15:31

shim for anchors with role="button" to trigger click on pressing space

427eb63

updated comments

91d6841

alextea reviewed Jul 27, 2016
View reviewed changes

NickColley reviewed Jul 27, 2016
View reviewed changes

refactored after peer review: updates event listener, adds overview c…

5f8076d

…omment

paulmsmith changed the title ~~WIP: Feature/anchor buttons~~ Feature/anchor buttons Jul 29, 2016

gemmaleigh reviewed Aug 4, 2016
View reviewed changes

robinwhittleton merged commit 8e403dd into alphagov:master Aug 10, 2016

robinwhittleton pushed a commit that referenced this pull request Aug 11, 2016

Bump version to 4.15.0

620c7fd

- Add support for Google Analytics fieldsObject (PR #298) - anchor-buttons.js: normalise keyboard behaviour between buttons and links with a button role (PR #297)

robinwhittleton mentioned this pull request Aug 11, 2016

Bump version to 4.15.0 #306

Merged

This was referenced Aug 11, 2016

Include the shim-links-with-button-role.js script from the frontend toolkit alphagov/govuk_elements#283

Merged

Include the shim-links-with-button-role.js script from the govuk_frontend_toolkit alphagov/govuk-prototype-kit#237

Merged

gemmaleigh mentioned this pull request Sep 6, 2016

Bump govuk_frontend_toolkit to 4.18.0 alphagov/govuk_accessibility_sandbox#103

Merged

gemmaleigh mentioned this pull request Oct 7, 2016

Bump the govuk frontend toolkit to 4.18.3 alphagov/service-manual-frontend#64

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/anchor buttons #297

Feature/anchor buttons #297

paulmsmith commented Jul 26, 2016

alextea Jul 27, 2016

paulmsmith Jul 27, 2016

NickColley commented Jul 27, 2016

NickColley Jul 27, 2016

paulmsmith Jul 27, 2016 •

edited

Loading

NickColley Jul 28, 2016

robinwhittleton commented Jul 27, 2016

paulmsmith commented Jul 28, 2016

paulmsmith commented Jul 29, 2016

gemmaleigh commented Jul 29, 2016

gemmaleigh commented Aug 4, 2016

gemmaleigh Aug 4, 2016

aduggin commented Aug 10, 2016

robinwhittleton commented Aug 10, 2016

Feature/anchor buttons #297

Feature/anchor buttons #297

Conversation

paulmsmith commented Jul 26, 2016

alextea Jul 27, 2016

Choose a reason for hiding this comment

paulmsmith Jul 27, 2016

Choose a reason for hiding this comment

NickColley commented Jul 27, 2016

NickColley Jul 27, 2016

Choose a reason for hiding this comment

paulmsmith Jul 27, 2016 • edited Loading

Choose a reason for hiding this comment

NickColley Jul 28, 2016

Choose a reason for hiding this comment

robinwhittleton commented Jul 27, 2016

paulmsmith commented Jul 28, 2016

paulmsmith commented Jul 29, 2016

gemmaleigh commented Jul 29, 2016

gemmaleigh commented Aug 4, 2016

gemmaleigh Aug 4, 2016

Choose a reason for hiding this comment

aduggin commented Aug 10, 2016

robinwhittleton commented Aug 10, 2016

paulmsmith Jul 27, 2016 •

edited

Loading