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.

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

Set the boolean disabled attribute consistently in the button component #2830

Merged
merged 2 commits into from
Apr 25, 2023

Conversation

36degrees
Copy link
Member

Remove the value from the attribute so that we're setting boolean HTML attributes consistently across all components – matching what we're doing in the radios, checkboxes and select components.

Re-enable the 'attribute-boolean-style' rule so that we enforce this going forward.

Split out from #2828.

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2830 September 7, 2022 15:13 Inactive
@36degrees
Copy link
Member Author

As flagged in #2828 (comment), there are a few edge cases where this could be considered a breaking change.

Specifically, if a user is using getAttribute and relying on the value of the response either exactly matching the string 'disabled' or being truthy:

if ($button.getAttribute('disabled') == 'disabled') {
  // no longer works as getAttribute('disabled') on an element
  // with <button disabled> returns an empty string
}

if ($button.getAttribute('disabled')) {
  // no longer works as an empty string is falsey
}

Depending on how likely we think this scenario is, we could either:

  • accept the risk and include the change in the next minor release
  • consider making this change in the next major release
  • close this PR and avoid making this change

@romaricpascal
Copy link
Member

Another thing that the change may break besides app using JS to check if the button is disabled may be the fixtures for validating non JS implementations.

Rails outputs boolean attributes in the disabled="disabled" form, I believe. Through its button_tag helper, for example.

Base automatically changed from html-validator to main September 13, 2022 08:45
@36degrees 36degrees closed this Nov 8, 2022
@36degrees 36degrees reopened this Nov 8, 2022
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2830 November 8, 2022 13:22 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2830 November 8, 2022 13:27 Inactive
Copy link
Contributor

@colinrotherham colinrotherham left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving this based on a discussion we had yesterday 🙌

But we also flagged the HTML living standard in reference to whether this is a breaking change or not from #2830 (comment)

2.3.2 Boolean attributes
https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes

They give three examples considered valid:

<label><input type=checkbox checked name=cheese disabled> Cheese</label>
<label><input type=checkbox checked=checked name=cheese disabled=disabled> Cheese</label>
<label><input type='checkbox' checked name=cheese disabled=""> Cheese</label>

Although it might be breaking, we've essentially switched from "valid" to "also valid" ✅

@36degrees 36degrees added this to the v5.0 milestone Apr 19, 2023
@querkmachine
Copy link
Member

Presumably this can now be merged given 4.6.0 has gone out, conflict notwithstanding.

@36degrees
Copy link
Member Author

I need to add a changelog entry as well.

Remove the value from the attribute so that we're setting boolean HTML attributes consistently across all components – matching what we're doing in the radios, checkboxes and select components.

Re-enable the 'attribute-boolean-style' rule so that we enforce this going forward.
@36degrees
Copy link
Member Author

I've rebased to resolve the conflict and added a changelog entry.

Copy link
Contributor

@colinrotherham colinrotherham left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

@36degrees 36degrees merged commit 719ccf8 into main Apr 25, 2023
21 checks passed
@36degrees 36degrees deleted the button-boolean-attribute branch April 25, 2023 14:15
colinrotherham added a commit to alphagov/govuk-design-system that referenced this pull request Sep 1, 2023
colinrotherham added a commit to alphagov/govuk-design-system that referenced this pull request Sep 1, 2023
colinrotherham added a commit to alphagov/govuk-design-system that referenced this pull request Sep 1, 2023
colinrotherham added a commit to alphagov/govuk-design-system that referenced this pull request Sep 1, 2023
@romaricpascal romaricpascal mentioned this pull request Dec 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants