Change color for added menu items and update hover icon (in Customizer) #10542
Conversation
https://core.trac.wordpress.org/ticket/64013 This change makes the added menu item in Customizer WCAG compliant while leaving subtle effects to let the user know that they already added the menu item, but if they want they can add it again.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
| #available-menu-items .menu-item-handle.item-added:hover .item-add, | ||
| #available-menu-items .menu-item-handle.item-added .item-add:focus { | ||
| color: #8c8f94; | ||
| color: #1d2327; |
There was a problem hiding this comment.
| color: #1d2327; | |
| color: #646970; |
#646970, or Gray 50, would have sufficient contrast of 5.53:1 against white. It also matches the shade used for the item type (Page, Custom Link, etc.).
I prefer to follow the original intent of making the added items a little lighter. If changing all the text to gray does not improve the interface, however, the entire ruleset could be removed instead of matching the darker gray. Then the menu item would still have the lighter text for the item type and blue text when hovering over the menu item.
| content: "\f147" / ''; | ||
| } | ||
|
|
||
| #available-menu-items .menu-item-handle.item-added:hover .item-add:before { |
There was a problem hiding this comment.
| #available-menu-items .menu-item-handle.item-added:hover .item-add:before { | |
| #available-menu-items .menu-item-handle.item-added:hover .item-add:before, | |
| #available-menu-items .menu-item-handle.item-added .item-add:focus:before { |
I am not convinced that the icon should change on :hover, but replacing the button icon on :focus could help more. This suggestion applies the plus icon to both :hover and :focus states.
Plus icon on :focus (with Gray 50 for text):
Hover:
2 participants
This change makes the added menu item in Customizer WCAG compliant while leaving subtle effects to let the user know that they already added the menu item, but also, if they want they can add it again. This decision was made because it's the least amount of CSS changes while still making sense.
The same dark gray color used initially for menu item labels in Customizer is reused because a color change is not needed. The user will already see the checkmark icon indicating that the item was successfully added. Since you can add the same menu item multiple times (which should stay as-is in case a user has a complex repetitive menu or some reason I'm not thinking of), I also changed the on hover icon to the plus icon. This way, after adding, the user sees the check mark (☑️ great, it added!). If they want to re-add, instead of seeing the initial blue hover color, they see the dark gray but also the plus icon. This combination says, "you already added this, but add it again if you want."
Other solutions would add more lines of CSS or require more changes. I'm a fan of fixing the WCAG issue with minimal changes.
Trac ticket: https://core.trac.wordpress.org/ticket/64013
Current:
New, after adding:
New, after adding and on hover:
