USWDS - Bug: Links styled as buttons break in forms

[scottkellum]

Describe the bug

This commit seems to break button styling in forms: 8b57c7b

Button and link styling seem to be working fine without this line. I’m not sure what bug it was meant to solve in the first place but maybe it doesn’t need to be there anymore? If it does need to be there, increasing the specificity of buttons will work by doubling the class on _usa-button.scss to .usa-button.usa-button. This is, of coarse, not very elegant. This is a specificity bug though.

Steps to reproduce the bug

Use the following code on a USWDS page:

<form class="usa-form">
	<a class="usa-button" href="#">This button text will be invisible</a>
	<input class="usa-button" type="submit" value="This text is visible" />
</form>

Expected Behavior

The text in the button should be visible

Related code

<form class="usa-form">
	<a class="usa-button" href="#test">This button text will be invisible</a>
	<input class="usa-button" type="submit" value="This text is visible" />
</form>

Screenshots

System setup

• USWDS 3.3.0
• Mac Mini M1
• Mac OS 13.0.1
• Chromium based browser (Arc 0.80.0)

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct.
• I checked the current issues for duplicate bug reports.

[mahoneycm]

I am able to replicate the bug. The typeset-link mixin is important because it overrides clicked links as well. For example, in this screenshot the Forgot password? link turns purple without typeset-link

@mejiaj It looks like we could try out the :not() selector to target anchor tags with the usa-button class. We've used it before and it has pretty good usability on CanIUse

  a:not(.usa-button) {
    @include typeset-link;
  }

Result: