diff --git a/CHANGELOG.md b/CHANGELOG.md index e5413f02e3..af38452a0b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,18 @@ ## Unreleased +### Breaking changes + +#### Check that disabled buttons work as expected + +The `disabled` attribute on disabled buttons created using our Nunjucks macros no longer includes a value. + +If you are using `$button.getAttribute('disabled')` to check for the disabled attribute in JavaScript, this will now return an empty string. This may cause unexpected behaviour if you are relying on the return value being the string 'disabled' or being [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). + +Instead we recommend checking for the disabled attribute using [`$button.hasAttribute('disabled')`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute) or the [`$button.disabled` IDL attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/disabled). + +This change was made in [pull request #2830: Set the boolean disabled attribute consistently in the button component](/~https://github.com/alphagov/govuk-frontend/pull/2830). + ## 4.6.0 (Feature release) ### New features diff --git a/src/govuk/components/button/template.njk b/src/govuk/components/button/template.njk index 1ef846cfb7..90c185cf4b 100644 --- a/src/govuk/components/button/template.njk +++ b/src/govuk/components/button/template.njk @@ -37,7 +37,7 @@ treat it as an interactive element - without this it will be {#- Define common attributes we can use for both button and input types #} -{%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %}{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% if params.preventDoubleClick !== undefined %} data-prevent-double-click="{{params.preventDoubleClick}}"{% endif %}{% endset %} +{%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %}{% if params.disabled %} disabled aria-disabled="true"{% endif %}{% if params.preventDoubleClick !== undefined %} data-prevent-double-click="{{params.preventDoubleClick}}"{% endif %}{% endset %} {#- Actually create a button... or a link! #} diff --git a/src/govuk/components/components.template.test.js b/src/govuk/components/components.template.test.js index 9824cef99a..1abee1a702 100644 --- a/src/govuk/components/components.template.test.js +++ b/src/govuk/components/components.template.test.js @@ -45,10 +45,6 @@ describe('Components', () => { validator = new HtmlValidate({ extends: ['html-validate:recommended'], rules: { - // We don't use boolean attributes consistently – buttons currently - // use disabled="disabled" - 'attribute-boolean-style': 'off', - // Allow for multiple buttons in the same form to have the same name // (as in the cookie banner examples) 'form-dup-name': ['error', { shared: ['radio', 'checkbox', 'submit'] }],