USWDS - Footer: Fix link styles for accessibility #5588
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mahoneycm
commented
Oct 30, 2023
There was a problem hiding this comment.
Big footer accordion links
In it's current state, this PR removes the hover state underline from big footer accordion links. This matches default accordion behavior but is a change from styles on develop
Flagging to see if I should update to maintain this underline
Comment on lines
-99
to
-102
| &:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
There was a problem hiding this comment.
Styles redundant due to primary links having an underline in default states now
Comment on lines
-169
to
-173
| @include u-text("ink", "no-underline"); | ||
|
|
||
| &:hover { | ||
| text-decoration: underline; | ||
| } |
There was a problem hiding this comment.
Additional styles redundant due to primary links having an underline in default states now
| .usa-footer__primary-link { | ||
| @include u-padding-x($theme-site-margins-mobile-width); | ||
| @include u-padding-y(2); | ||
| @include u-text("ink", "no-underline", "bold"); | ||
| @include u-text("ink", "bold"); |
There was a problem hiding this comment.
Removing no-underline from u-text() mixin properly applies color and weight without causing any unintentional regressions.
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
Restores underlines to footer links in default states. Now, footer links meet WCAG 2.0 AA requirements.
Breaking change
This is not a breaking change
Related issue
Closes #5557
Related pull requests
Changelog →
Preview link
Default footer →
Big footer →
Slim footer →
Problem statement
Currently, footer links do not meet WCAG 2.0 AA accessibility requirements.
Solution
Restore underlines to links in default states.
Alternative solution
We could alternatively increase the color contrast of links to have at least a
3:1contrast ratio to surrounding texts.This solution seems a bit more opinionated and relies on users to have not modified the colors of their footer text and/or links to ensure compliance.
Screenshots
Develop
After fix
Testing and review
Testing checklist