#66454 - Use consistent label color

[valerogarte]

What?

Fixes #66454

Standardizes the label colors within the Gutenberg editor by replacing the lighter gray #757575 ($gray-700) with a darker gray #1e1e1e ($gray-900) for control and input labels.

Why?

The current use of #757575 for labels results in reduced readability and inconsistency across the editor's interface. By adopting #1e1e1e for all labels, we enhance legibility and ensure a uniform appearance, aligning with accessibility guidelines and improving the user experience.

How?

The CSS styles have been updated to apply #1e1e1e to all control and input labels. Specifically, in the styles.ts file of the toggle-group-control-option-base component, the color property has been changed from COLORS.gray[700] to COLORS.gray[900].

Testing Instructions

1. Access the Editor: Open a post or page in the Gutenberg editor.
2. Insert a Group Block.
   2.1. Click the "+" button to add a new block.
   2.2. Search for and select the "Group" block.)
3. With the Group block selected, navigate to the "Styles" tab in the block settings sidebar.
4. Add a Background Image:
   4.1. Locate the "Background" section and click on the "Background Image" field.
   4.2. Upload a new image or select one from the media library to set as the background.
5. Review the Applied Changes:
   5.1. Click on the uploaded background image within the Group block.
   5.2. A pop-up will appear, allowing you to observe the applied changes.
6. While still in the "Styles" tab, locate the "Typography" section.
   6.1. Review the typography settings to ensure the changes are applied as expected.

Testing Instructions for Keyboard

1. Access the Editor:
   1.1. Open a post or page in the Gutenberg editor.
2. Insert a Group Block:
   2.1. Press Ctrl + Alt + T (Windows/Linux) or ⌥ + ⌘ + T (Mac) to insert a new block before the selected block.
   2.2. Type /group and press Enter to add a Group block.
3. Navigate to the "Styles" Tab:
   3.1. Press Alt + F10 to focus on the nearest toolbar.
   3.2. Use the Tab key to navigate to the block settings sidebar.
   3.3. Press Shift + Tab to move focus to the tabs within the sidebar.
   3.4. Use the arrow keys to select the "Styles" tab and press Enter.
4. Add a Background Image:
   4.1. Press Tab to navigate to the "Background" section.
   4.2. Press Enter to activate the "Background Image" field.
   4.3. Use the Tab key to navigate to the "Upload" button and press Enter to upload a new image, or navigate to the "Media Library" button and press Enter to select an existing image.
   4.4. Use the arrow keys to select the desired image and press Enter to set it as the background.
5. Review the Applied Changes:
   5.1. Press Esc to exit the media selection dialog.
   5.2. Press Tab to navigate back to the Group block in the editor.
   5.3. Use the arrow keys to select the uploaded background image within the Group block.
   5.4. Press Enter to open the pop-up and observe the applied changes.
6. Verify Typography Settings:
   6.1. Press Esc to close the pop-up.
   6.2. Press Tab to navigate to the "Typography" section within the "Styles" tab.
   6.3. Use the arrow keys to review the typography settings and ensure the changes are applied as expected.

Screenshots or screencast

[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: valerogarte <[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.