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

Fix: Make usage of the search icon more consistent and meaningful #63116

Open
wants to merge 3 commits into
base: trunk
Choose a base branch
from

Conversation

snehapatil2001
Copy link
Contributor

@snehapatil2001 snehapatil2001 commented Jul 4, 2024

issue: #63023

What?

Changed icons to menu for the command part and plus for the Zoom In functionality in the Image block toolbar.

Why?

This PR updates the icons used in the Gutenberg editor to improve visual consistency and clarity. The menu icon is now used for the command part, aligning with standard UI practices for menu interactions. The plus icon replaces the previous icon for Zoom In in the Image block toolbar, making it more intuitive and recognizable for users.

How?

  • Updated the ZoomDropdown component in components/image-editor/zoom-dropdown.js to use the plus icon for Zoom.
  • Modified the render functions of the Dropdown component to conditionally render the menu and plus icons based on specific states.
  • Imported and utilized the icons from the @wordpress/icons library.

Testing Instructions

  1. Open a post or page in the Gutenberg editor.
  2. Insert an Image block.
  3. Verify that the toolbar displays a plus icon for Zoom In in the Image block.
  4. Check that the command part of the toolbar now shows a menu icon.
  5. Perform Zoom In and Zoom Out actions to ensure the functionality works correctly with the new icons.

Testing Instructions for Keyboard

  • Navigate to an Image block using keyboard navigation.
  • Ensure that the Zoom In functionality can be accessed and used effectively using keyboard shortcuts or tab navigation.
  • Verify that the command part of the toolbar is accessible and labeled correctly for screen readers.

Screenshots or screencast

Screenshots or a screencast demonstrating the updated icons in action would be added here.
image

@snehapatil2001 snehapatil2001 requested a review from ellatrix as a code owner July 4, 2024 07:58
Copy link

github-actions bot commented Jul 4, 2024

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: snehapatil2001 <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@akasunil akasunil added the [Type] Bug An existing feature does not function as intended label Jul 5, 2024
@skorasaurus skorasaurus added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Jul 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants