a.nhsuk-button.nhsuk-button--reverse:visited text is invisible!

[adam-carruthers]

Bug Report

What is the issue?

Using the nhsuk CSS, if you have a button with

What steps are required to reproduce the issue?

If you have a button like this

<a class="nhsuk-button nhsuk-button--reverse BasePage_logoutButton__rc_BE" role="button" aria-disabled="false" draggable="false" href="https://www.google.com">I'm a button</a>

the CSS is such that the button is invisible when the link is visited. This is because the .nhsuk-button:visisted CSS is defined, and sets the text color to white, but the .nhs-button--reverse class sets the background color to white as well.

How it looks when the link is visited (no hover):

It should look like:

The fix to this issue would be to add a .nhs-button--reverse:visited class to the CSS to cover this edge case.

What was the environment where this issue occurred?

• Device: Thinkpad
• Operating System: Windows
• Browser: Chrome
• Browser version: 109.0.5414.120 (Official Build) (64-bit)
• NHS.UK frontend package version: 6.2.0
• Node version:
• npm version:

Is there anything else you think would be useful in recreating the issue?

[mikemonteith]

@talieScript is going to fix this