Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix link buttons #310

Merged
merged 6 commits into from
Aug 19, 2016
Merged

Fix link buttons #310

merged 6 commits into from
Aug 19, 2016

Conversation

robinwhittleton
Copy link
Contributor

@robinwhittleton robinwhittleton commented Aug 19, 2016 •
edited
Loading

The anchor buttons JS wasn’t properly triggering a native click event. This PR fixes that, and adds a couple of tests around this code.

Robin Whittleton added 4 commits August 18, 2016 13:17
Trigger anchor buttons with a standard click
837bd21 
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.
Use jQuery’s normalised code data
24e1639 
event.which normalises keyCode and charCode already: http://api.jquery.com/event.which/
Fix running the tests locally
205b522 
Jasmine changed location, breaking the local test runner.
Add a couple of tests for anchor buttons
45f90af 
1. It should trigger with a space key
2. It shouldn’t trigger with a tab key
@NickColley
Copy link
Contributor

Looks good to me, setup a JSBin to give it a go for anyone else to poke.

http://jsbin.com/lazuyuneca/edit?html,js,console,output

Document the anchor button code
9232c88 
Add some standard documentation describing how to initialise the code and what options are present.
@robinwhittleton robinwhittleton changed the title Fix anchor buttons Fix link buttons Aug 19, 2016
Rename anchor-buttons to shim-links-with-button-role
19430c3 
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.
@gemmaleigh
Copy link
Contributor

This looks great, thanks @robinwhittleton & @NickColley! 💯

@gemmaleigh gemmaleigh merged commit 21d19d7 into master Aug 19, 2016
@gemmaleigh gemmaleigh deleted the fix-anchor-buttons branch August 19, 2016 10:56
gemmaleigh added a commit that referenced this pull request Aug 19, 2016
@gemmaleigh
v4.16.1
a7f0986 
# 4.16.1

- Fix anchor-buttons.js to trigger a native click event, also rename to
shimLinksWithButtonRole to explain what it does

- Add tests for shimLinksWithButtonRole ([PR
#310](#310))
@gemmaleigh gemmaleigh mentioned this pull request Aug 19, 2016
Merged
gemmaleigh added a commit to alphagov/govuk_elements that referenced this pull request Aug 19, 2016
@gemmaleigh
Update govuk_frontend_toolkit to 4.16.1
7476af1 
# 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))
@gemmaleigh gemmaleigh mentioned this pull request Aug 19, 2016
Merged
gemmaleigh added a commit to alphagov/govuk-prototype-kit that referenced this pull request Aug 19, 2016
@gemmaleigh
Use version 4.16.1 of the govuk_frontend_toolkit
3aff673 
# 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))
This was referenced Aug 19, 2016
Merged
Merged
gemmaleigh added a commit to alphagov/govuk_accessibility_sandbox that referenced this pull request Sep 6, 2016
@gemmaleigh
Bump govuk_frontend_toolkit to 4.18.0
0a3c341 
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)
@gemmaleigh gemmaleigh mentioned this pull request Sep 6, 2016
Merged
gemmaleigh added a commit to alphagov/service-manual-frontend that referenced this pull request Oct 7, 2016
@gemmaleigh
Bump the govuk frontend toolkit to 4.18.3
df2f761 
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.
@gemmaleigh gemmaleigh mentioned this pull request Oct 7, 2016
Merged
gemmaleigh added a commit to alphagov/service-manual-frontend that referenced this pull request Oct 8, 2016
@gemmaleigh
Bump the govuk frontend toolkit to 4.18.3
09eccff 
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.
gemmaleigh added a commit to alphagov/service-manual-frontend that referenced this pull request Oct 8, 2016
@gemmaleigh
Bump the govuk frontend toolkit to 4.18.3
a3e43dc 
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@robinwhittleton @NickColley @gemmaleigh