Components: Ensure Consistent Button Focus Styling Across ItemGroup Button and Button

[im3dabasia]

What?

Closes #67747

This PR standardizes focus styles for buttons rendered via ItemGroup Button and the Button component, ensuring visual consistency.

Why?

Currently, buttons in the repository use different approaches for focus styles—some rely on :focus, while others use :focus-visible. This inconsistency leads to uneven focus behavior, impacting both UI consistency and accessibility.

A similar issue was highlighted in this PR comment, where the focus styles in the trunk were deemed superior to the newer changes. Additionally, after the merge of this PR, ItemGroup was replaced with a Button, resolving part of the inconsistency.

How?

• Updated ItemGroup Button styles to align with the Button component’s focus behavior.
• Applied :focus:not(:disabled) for a more consistent and accessible focus style.

Screenshots or screencast

1. The issue: In :focus, the CSS is set to none, as shown here. This is inconsistent with the Button component, which has a box-shadow and outline applied in the :focus pseudo-state. (See the 3rd screenshot for reference.)

---

2. The focus styles are only applied when using :focus-visible, meaning the button does not receive focus styling when clicked with a mouse.

---

3. This is the Button component in its :focus state. We aim to replicate this behavior in the ItemGroup button for consistency.

---

4. The solution: After adjusting the CSS, we have ensured that both the Button and ItemGroup button now behave consistently. :focus styles have been added to ItemGroup, and :focus-visible styles have been removed.

---

[github-actions]

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]

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