Enhance Group Block Placeholder Design and Accessibility for Consistency with Other Blocks

[sarthaknagoshe2002]

Fixes: #66062

What?

This PR improves the placeholder UI and accessibility of the Group block to align it with other blocks (e.g., Columns, Query Loop); refer #66062. It addresses the following:

1. Implements a consistent design pattern for the Group block placeholder with:
   • Icon and title.
   • Description text.
   • Interactive controls for initial configuration.
2. Improves accessibility by:
   • Ensuring variation buttons have correct labels and descriptions.
   • Providing accessible names for all interactive controls using aria-describedby.

Why?

• The Group block placeholder currently uses an inconsistent design pattern compared to other blocks like Columns and Query Loop. This inconsistency may confuse users and reduce the user experience.
• The variations picker for Group, Columns, and Query Loop blocks had missing aria-describedby attributes.

How?

1. Design Consistency:

   • Updated the Group block placeholder to include an icon, title, and description matching the design pattern of other blocks.
   • Added a clear and informative description to the placeholder for better guidance.

2. Accessibility Improvements:

   • Updated variation buttons to include appropriate aria-describedby attributes, ensuring accessible names match the visible text.
   • Used screen reader text and associated descriptions for interactive controls to provide semantic meaning.
   • Corrected the accessible name for Group block variations by integrating the title and description.

Testing Instructions

1. Verify Design Consistency:

   • Add a Group block in the editor and observe the placeholder.
   • Confirm the placeholder displays an icon, title ("Group"), and description ("Group blocks together. Select a layout:").
   • Ensure the layout options (variations) are displayed clearly with labels.

2. Compare Placeholders:

   • Add Columns, and Query Loop blocks. Observe their placeholders.
   • Ensure the Group block now follows the same design pattern as these blocks.

3. Accessibility Testing:

   • The aria-describedby attribute is present and correctly associates the title and description.
   • Test the variation buttons for the Columns and Query Loop blocks to verify similar improvements.

Screenshots or screencast

Before

Design	Floating tooltip

After

Design	Floating tooltip

aria-describedby label

[github-actions[bot]]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions[bot]]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions[bot]]

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: sarthaknagoshe2002 <sarthaknagoshe2002@git.wordpress.org>

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

[github-actions[bot]]

:wave: Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @sarthaknagoshe2002! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.