search

UCDavisLibrary / ucdlib-theme-wp

Wordpress theme port of the UC Davis SiteFarm One Theme
2 stars 0 forks source link

Priority link set forces white background / text color accessibility issues #259

Closed wrenaria closed 8 months ago

wrenaria commented 9 months ago

The Priority link set block currently forces a white background. I'm experimenting with concepts for using it on top of color for DataLab's homepage, but cannot actually do so because of this. I can do a workaround using columns and individual priority links instead of the set, but in this context it doesn't break as nicely as the link set does on smaller screens and limits my layout options.

In addition, the link text shows correctly in the editor but incorrectly on the user-facing production page when placed in a brand box.

Examples can currently be seen here: https://stage.library.ucdavis.edu/priority-linkset/

Are these things that can easily be adjusted when you have time?

spelkey-ucd commented 9 months ago

Yeah, we can put in some css overrides to:

  1. do away with the white background for the priority links organism
  2. Ensure that, if the priority links are placed inside a brand-box, the text below the icon uses the contrast color of the brand box and not the priority link on the public-facing page.

However, getting the link text to perfectly match in the editor and public side is potentially a bit more problematic because of how the branding box block is constructed, but I can see what I can do.

Dev note: Will have to create a new scss rule that loops through the category brands and sets a new css variable. End result will look something like:

.colored-section .priority-links {
  background-color: transparent;
}
.colored-section.category-brand--rec-pool {
  --category-brand-contrast-colored-section: #022851;
}
.vertical-link__title {
  color: var(--category-brand-contrast-colored-section, inherit);
}
wrenaria commented 9 months ago

@spelkey-ucd Thanks Steve! The block display on the editor matching live view isn't an issue that needs to be resolved per se, it's more that currently editor shows an accessible friendly text color and the public-facing version does not. As long as the published page ends up looking as expected, it is fine.

spelkey-ucd commented 8 months ago

Added v3.6.0