-
Notifications
You must be signed in to change notification settings - Fork 138
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
Accessibility: Plugin favorites heart color contrast failure #265
Comments
I like the star, and it makes "favoriting" things consistent with the new Patterns design. While we should definitely fix this issue asap, I don't think it should block launching the new design since the color is the same as it is on the current theme. |
That's true, but I think "staring" something is also a common way to favorite things. I am thinking about Slack and Figma. Would it be possible to add a tooltip to the icon (like in the gif) that provides more context about what it is? Even with the current heart icon, it's not 100% clear what it does if you don't associate a heart with favoriting a plugin. Thoughts @WordPress/meta-design? |
Yep, good to have a tooltip. |
Also, we could keep this star grey/black like it is in the Patterns refresh so it's visually different than the pomegranate star ratings for the plugins. |
RE the tool tip, I'll admit that I don't even know what this does, really.
Assumingly there's a way or a place to view all your favorite plugins, but
I have no idea what that is or how to do it.
It might be helpful to make it more clear where to view favorites.
…On Wed, Apr 17, 2024, 7:23 AM Nick Diego ***@***.***> wrote:
Also, we could keep this star grey/black like it is in the Patterns
refresh <https://wordpress.org/patterns/?new-theme=1> so it's visually
different than the pomegranate star ratings for the plugins.
—
Reply to this email directly, view it on GitHub
<#265 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ADELJMEIJD7L54FW7CSAWBTY5ZSUHAVCNFSM6AAAAABGKGP7RGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANRRGEZTOMJYHA>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
There's a page in wp-admin where you can view a user's favorites (presumably yours, but there's no connection between wp.org and assorted WordPress sites). They also show up on your profile. Maybe a little copy could be added to the favorites page, linking off to some documentation (like https://wordpress.org/documentation/article/plugins-add-new-screen/)? (Though this is getting into separate issue territory 🙂 ) |
I have a separate issue that I opened for larger functionality issues on this button beyond color contrast: #266 It probably makes sense for this to be part of that discussion, because the role needs to be changed anyway. I will add some additional thoughts there and link back to these comments. |
I think we’re mixing three different concepts here. The actions I have noticed on the web when browsing and interacting with directories are:
The last two are currently on the WordPress site, unless I’m missing something. If we are using stars for rating, then we can not use it for saving. It would quickly lead to confusion. There is no standard icon for saving, it swings between a heart and a bookmark. Therefore, the safest way to reduce misinterpretations is by adding a label next to it. In that vein, and following @ndiego's example, Figma also uses heart and bookmark for liking and saving, respectively. Regarding preferences, I’m drawn to using a bookmark icon. The heart feels like an overrepresentation of the action as “love” is also conveyed with the heart. |
On the plugin single page (Gutenberg plugin test page), the plugin favorites heart in its unselected state is #cbcdce on a white background which is 1:59:1.
Here's the contrast on WebAIM's checker. This fails for UI components and many people with low-vision will not even know that is there.
Because we don't want to fail Use of Color, it would not be sufficient to just darken the color of the heart. I'd recommend adding a border to it so it has a border and light or no color if unselected and a solid color if hovered or selected.
The text was updated successfully, but these errors were encountered: