Skip to content

Commit

Permalink
Add 'button' role to link button template
Browse files Browse the repository at this point in the history
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
  • Loading branch information
pcraig3 committed Feb 15, 2017
1 parent 1cdb247 commit b6ab6b5
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 1 deletion.
9 changes: 9 additions & 0 deletions pages_builder/assets/javascripts/onready.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,18 @@
GOVUK.GDM.validation();
}

if (GOVUK.shimLinksWithButtonRole) {
console.log('1');
GOVUK.shimLinksWithButtonRole.init({
selector: '[class^=link-button]'
});
}

if (GOVUK.ShowHideContent) {
var showHideContent = new GOVUK.ShowHideContent()
showHideContent.init()
}

})(window);

$(document).on('click', function() { console.log('click'); });
2 changes: 2 additions & 0 deletions pages_builder/pages/link-button.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ pageTitle: Link buttons
assetPath: ../govuk_template/assets/
head: >
<link rel="stylesheet" media="all" type="text/css" href="../public/stylesheets/index.css" />
bodyEnd: >
<script type="text/javascript" src="../public/javascripts/govuk_frontend_toolkit/govuk/shim-links-with-button-role.js"></script>
examples:
-
label: View service
Expand Down
2 changes: 1 addition & 1 deletion toolkit/templates/link-button.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<a class='link-button{% if advice %}-with-advice{% endif %}' href='{{ url }}'>{{ label }}</a>
<a class='link-button{% if advice %}-with-advice{% endif %}' href='{{ url }}' role='button'>{{ label }}</a>

0 comments on commit b6ab6b5

Please sign in to comment.