Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Print stylesheets and WHCM improvements #461

Merged
merged 2 commits into from
Feb 25, 2024

Conversation

shyusu4
Copy link
Member

@shyusu4 shyusu4 commented Feb 13, 2024

This PR addresses styling issues related to print stylesheets and windows high contrast mode:

Print stylesheets

  • Components with dark backgrounds arent rendered correctly in print. The text appears gray instead of black.
  • Interactive content such as header navigation elements (search, menu toggle), sign-up forms, and videos should be hidden for print.
  • In-line href attributes should be used in print so that users are aware of destination of each link.
  • Only important iconography and images should be retained for print.

Most site visitors would likely want to print or save blog posts as PDFs compared to other pages on the site. You can see the difference between the blog post without print styles and the one with print styles.

WHCM #454

  • Menu toggle isn't visible
  • Close icon in the search modal isn’t visible
  • Copy icon in "pip install Wagtail" button disappears when clicking on it.
  • (not in audit) SVG icons in buttons now match the button text color
Screenshots
forced-colors: active + prefers-color-scheme: dark forced-colors: active + prefers-color-scheme: light
Screenshot (91) Screenshot (90) Screenshot (89)
Screenshot (95) Screenshot (93) Screenshot (92)
Screenshot (96) Screenshot (98) Screenshot (97)

Copy link
Member

@thibaudcolas thibaudcolas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All looking good, thank you @shyusu4!


abbr[title]::after {
content: " (" attr(title) ")";
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️

.related-content.grid,
.sign-up-form, .hero__icon, .headline__icon{
display: none;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think those kinds of overrides would be easier to manage in component stylesheets? As-is, I can see this getting out of date with other styles over time.

@thibaudcolas thibaudcolas added bug Something isn't working enhancement New feature or request accessibility component: Frontend labels Feb 25, 2024
@thibaudcolas thibaudcolas merged commit e8d4514 into wagtail:main Feb 25, 2024
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility bug Something isn't working component: Frontend enhancement New feature or request
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

2 participants