Repository navigation
USWDS - Bug: Links styled as buttons break in forms #5066
Description
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.
Metadata
Metadata
Assignees
Labels
No labels
Activity
mahoneycm commentedon Jan 19, 2023
I am able to replicate the bug. The
typeset-linkmixin is important because it overrides clicked links as well. For example, in this screenshot theForgot password?link turns purple withouttypeset-link@mejiaj It looks like we could try out the
:not()selector to target anchor tags with theusa-buttonclass. We've used it before and it has pretty good usability on CanIUseResult:
Merge pull request #5112 from uswds/cm-nested-anchor-bttn