Explicitly set visited state of unstyled button #3846
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR explicitly sets the
:visited
state of unstyled buttons when they are also inverse and outline.Note: This solves a problem that's specific to
<a class="usa-button">
elements that include anhref
value (i.e. buttons that have avisited
state).When buttons have all three of these classes…
.usa-button--outline.usa-button--inverse.usa-button--unstyled
…their ruleset includes the
button-unstyled
mixin, which in turn includes thetypeset-link
mixin, which makes the button look like an anchor by setting all 4 anchor pseudo classes (including a purple :visited state). So, when these 3 classes are used on a dark background, the:visited
state is not inversed and the color is not accessible.This proposed change overrides the mixin's
:visited
state with the inverse color so that an outline, inverse, unstyled button has the inverse text color and is accessible on a dark background.