Repository navigation
Conversation
- sponsors description: text alpha -0.4 -> -0.25 (3.17:1 -> 4.61:1) - footer tagline: white alpha -0.2 -> -0.1 (3.96:1 -> 4.61:1) - footer donate button: keep label white on hover/focus/active and use a 2px white focus-visible outline (focus was ~1.7:1) - base.html: render sponsors row and legal footer inside <footer>; sponsors keeps the page background, legal footer keeps body text color, and the footer drops its bottom padding Fixes pypi#20785 (prepared locally, not yet submitted)
Moving .legal-footer and .sponsors inside <footer> subjects their links to .footer a (white text, white focus outline), which is nearly invisible on their light backgrounds. Restore the standard link colors in .legal-footer and the dark focus outline for sponsor links.
This branch has not been deployed
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
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.
Fixes #20785
Four changes from the axe-core findings in #20785:
Color contrast
.sponsors__description(_sponsors.scss):$text-coloralpha reduction-0.4→-0.25. The effective color over the page background goes from#8f8f8f(3.17:1) to#747474(4.61:1)..footer__tagline(_footer.scss):$whitealpha reduction-0.2→-0.1. Effective color over the footer background goes from#cce2f0(3.96:1) to#e6f1f7(4.61:1).Both are the smallest alpha step (in 0.05 increments) that reaches 4.5:1, computed with the WCAG relative-luminance formula; the script reproduces the ratios reported in the issue for the current values before applying the change.
"Donate today!" button focus
The generic
.buttonhover/focus color (#004d7a) sits at ~1.7:1 on the footer background. Inside.footer__donate, hover/focus/active now keep the label white (5.30:1) with a solid white border, and:focus-visiblegets a 2px white outline with a 2px offset (5.30:1 against the footer background, above the 3:1 non-text requirement).Landmarks
base.htmlnow renders the sponsors include and.legal-footerinside<footer>instead of after it. Small compensations keep the rendering unchanged:.sponsorsgetsbackground-color: $background-color— inside the footer it would otherwise sit on the footer blue, breaking the sponsor text contrast fixed above..legal-footerpinscolor: $text-color— it previously inherited the body color; inside.footerit would inherit white on its own light background..legal-footerlinks use the standardprimary-underlined-linkcolors — inside.footerthey would otherwise take the white.footer astyling (about 1.05:1 on the legal footer's light background)..footer a:focuswould otherwise paint it white on the light sponsors background..footerdrops its bottom padding (40px desktop / 20px mobile), which would otherwise leave a blue strip below the legal footer; the sponsors and legal blocks provide the closing spacing, as they did outside the footer.Verification
sasscompiles the three changed blocks and the fullwarehouse.scssbundle.stylelintpasses on the three changed SCSS files with the repo configuration.<footer>(354) and</footer>(527).