Settings toggle shows wrong icon when 'Show button text labels'

[karthick-murugan]

What?

Fixes #57646

This PR resolves the issue where the "Settings" panel toggle button on the Edit Widgets page displayed the wrong icon when the "Show button text labels" accessibility option was enabled.

Why?

The "Show button text labels" feature is a cross-editor accessibility preference intended to improve usability. However, the Edit Widgets page did not fully implement this feature, causing inconsistencies in the button's appearance. Specifically, enabling "Show button text labels" replaced the expected "Settings" text with a checkmark icon, which was both incorrect and confusing.

This fix ensures that the Edit Widgets page aligns with other editors, providing a consistent user experience across all WordPress editing interfaces.

How?

• Updated the logic for the "Settings" toggle button within the ComplementaryAreaToggle component to correctly handle the showIconLabels preference.
• Adjusted the icon prop to ensure that the button displays either the "Settings" text label or the appropriate icon (drawerRight), based on the state of showIconLabels.
• Verified that tooltips and button behaviour also reflect the intended design when toggling between states.

Testing Instructions

1. Enable "Show button text labels" in the Post Editor under Options > Preferences > Accessibility.
2. Navigate to Appearance > Widgets and check the "Settings" panel toggle button. Ensure it displays "Settings" as text and there is no tooltip.
3. Disable "Show button text labels" in the Post Editor.
4. Navigate back to the Edit Widgets page and confirm the "Settings" panel toggle button displays the appropriate icon (drawerRight) with a tooltip showing "Settings."
5. Verify the behaviour is consistent across the Post Editor, Site Editor, and Edit Widgets page.

Video

REC-20241219123847.mp4

cc @tellthemachines

[github-actions]

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: karthick-murugan <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: afercia <[email protected]>

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

[karthick-murugan]

@afercia - Please have a look at this PR when you get some time.

[karthick-murugan]

Closing this PR in favour of #68531

cc @afercia