govuk-frontend icon indicating copy to clipboard operation
govuk-frontend copied to clipboard

Deprecate govuk-button--disabled - ability to style link buttons as disabled

Open 36degrees opened this issue 2 years ago • 1 comments

What

Mark the govuk-button--disabled modifier class as deprecated, and communicate the change to users.

Why

Adding the --disabled modifier class to the button does not prevent users from interacting with it. Because of the way that our CSS is currently written, the disabled link button still has a change on focus state.

Because we're trying to remove states from an element that is still interactive and focusable, automated accessibility testing tools are likely to flag issues with it, as seen in #2127. We've also seen links with the disabled modifier flagged as failing color contrast requirements in Axe.

Further detail

At the same time, we could consider applying the hover and active states using the :enabled pseudo-class, rather than the current approach of 're-setting' the non-hover state for each button variant to avoid the change on hover. This would allow us to simplify the CSS, but would mean that buttons would no longer have a hover or active state in IE8.

Who needs to know about this

Designers, developers

Done when

  • [ ] disabled modifier class marked as deprecated
  • [ ] Deprecation communicated in release notes
  • [x] Created a card to remove the modifier class in a breaking release

36degrees avatar Jul 08 '21 15:07 36degrees

This card covered both deprecation and removal – I've split the removal out in to #2681 and updated the description in this issue to only cover the initial deprecation.

36degrees avatar Jul 05 '22 08:07 36degrees