Merge pull request #2830 from alphagov/button-boolean-attribute

Set the boolean `disabled` attribute consistently in the button component

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

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! #}
 

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'] }],