USWDS - Pagination: Fix ellipsis and background colors #5358
Conversation
- Meet color contrast requirements
There was a problem hiding this comment.
Looks good! I can confirm:
- Changelog entry exists.
- No visual regressions.
-
$theme-pagination-background-coloris used to set background & text color.
Notes
Some notes based on testing.
Color setting
Since the mixin passes defaults you can also get the same result by modifying $theme-body-background-color.
Warning
Some times simply changing the background (via either setting) won't lead to accessible results. In those cases you'll need to update link settings like$theme-link-color.
The fact that you can change pagination background color and not changing default link color failing is expected.
For example:
$theme-pagination-background-color: "green-20v"#98d035.$theme-link-color: "primary"#005ea2(the default).- Results in contrast fail ― this is expected.
This note applies to all components that rely on background color for setting link colors. Not sure there's a note like that in the guidance, but wanted to document here.
How I tested
Tested different values for $theme-pagination-background-color and checked contrast in ANDI.
Colors tested
primaryprimary-lighterprimary-darker⚠️ green-40v, see warning above in color setting.
There was a problem hiding this comment.
Lookin' good!
-
$theme-pagination-background-colorcorrectly changes pagination background color - Color contrast for ellipses meets requirements on various background colors
- Darker color of ellipses still works well and looks good with the component
- Reviewed changelog
Summary
Updated the ellipsis color to meet color contrast requirements.
Updated styles to respect the value added to
$theme-pagination-background-color.Breaking change
This is a potentially breaking change.
The Design System now respects the value for
$theme-pagination-background-color. Users should confirm that pagination colors display as expected.Related issue
Closes #5188
Related pull requests
Changelog PR
Preview link
Preview link: Pagination component
Problem statement
The ellipsis elements on the pagination component use opacity to lighten the color. Additionally, the color contrast is 3.31:1, which does not meet color contrast requirements.
Additionally, the background of pagination component does not respect the color added to
$theme-pagination-background-color.Solution
Update the color of the
usa-pagination__overflowelement to use a lighter gray color instead of opacity.Set the background and text colors of the pagination component.
Testing and review
$theme-pagination-background-colorchanges the pagination background color