Customizer control focus border misaligned in WordPress 7.0 RC4

[hardipparmar]

While testing WordPress 7.0 RC4 in the Customizer, the focus/active border styling for Customizer controls appears visually misaligned.

When hovering or focusing a control (example: 'Header Image'), the blue highlight border does not align correctly. The top and bottom border spacing looks inconsistent compared to the left border, creating an uneven focus outline.

Steps to Reproduce

Install WordPress 7.0 RC4
Activate Twenty Fourteen
Go to Appearance → Customize
Hover or focus a Customizer section item such as 'Header Image'

[hardipparmar]

video attachment

[wildworks]

Thanks for the report.

The important point is that this issue is not new to 7.0, but has existed previously.

[wildworks]

I have identified that this issue occurred in WordPress 6.7. The accordion title was given focus styles by r59224, and the problem should have occurred at that point.

[gaurangsondagar]

Reproduce the issue: https://core.trac.wordpress.org/ticket/65258

Environment:

• PHP: 8.2.29
• WordPress: 7.0-RC4
• Web server: Apache
• Database: MySQL
• Browser: Chrome
• OS: Ubuntu 22.04.5 LTS

Steps I followed:

• Install WordPress 7.0 RC4
• Navigate to Appearance → Customize
• Hover over or focus on a Customizer section item, such as Header Image

Result:
I was able to successfully reproduce the Customizer control focus border misalignment issue. I have also attached screenshots for reference.