Remove deprecated govuk-button--disabled class

[36degrees]

What

Relies on the class having been marked as deprecated in #2271.

It's currently possible to make 'link buttons' look disabled by using the .govuk-button--disabled modifier class. However, it doesn't really make sense to do so as you can't easily – and almost certainly shouldn't – disable links.

Remove the .govuk-button--disabled modifier class and only apply disabled styles using the [disabled] attribute selector.

We'll also need to modify the macro so that the disabled option does nothing for link buttons, and update the macro documentation accordingly.

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 work on this

Who needs to know about this

Designers, developers

Done when

• CSS for disabled class removed
• Macro updated to ignore the disabled option for link buttons
• Macro documentation updated to make it clear the disabled option has no effect on links