Searchkit arrows don't match in size
- Truncate descriptions
Here the next button icon is about double the size of the previous arrow icon, which does not look intentional:
These buttons use unicode
It seems like it's a unicode bug that these often don't match, but it does appear to be font-dependant: https://stackoverflow.com/questions/9490578/why-dont-more-all-of-unicodes-right-and-left-arrows-match-in-particular-the
The easiest solution is probably for Riverlea to just replace the icons with a background image. e.g.:
.pagination-next a {
text-indent: -9999px;
width: 30px;
background: arrow.svg;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yOC4yOSAxNi4wN2wtMTAuNzUtMTAuNzVhMSAxIDAgMCAwLTEuNDEgMS40MWw4LjA5IDguMDlIMy41YTEgMSAwIDAgMCAwIDJoMjAuMjJsLTguMDkgOC4wOWExIDEgMCAwIDAgMS40MSAxLjQxbDEwLjc1LTEwLjc1YTEgMSAwIDAgMC0uMDEtMS40MXoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=");
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
}
(That's not the best SVG, but demonstrates the idea)
From an accessibility perspective, I doubt the unicode ⮕ is read out nicely by assistive tech. As such, I feel like the actual button text should just be "previous" and "next", leaving themes fully responsible for adding any icons.
- Show labels
- Show closed items