Image: URL input field insufficient focus style

[afercia]

Description

The image link URL implementation has always been slighly inconsistent with the normal Link UI, which is not ideal, but at least provided some level of accessibility.

Starting from WordPress 6.4, the focus style of the input field has been changed and it is now less visible and also inconsistent with the default input fields focus style. Making the focus style less visible isn't an improvement. Rather, it's a regression.

Specifically, the CSS sets the input border width to 0 only for visual aesthetics reasons but that impacts the focus style. IN fact the focus style relies on the border being visible. It appears this change hasn'g ben tested with keyboard and accessibility wasn't taken into account.

Screenshot from WordPress 6.3:

The focus style and overall styling of the input field is inconsistent with the default input styling but at least the focus style is a thick blue visual outline:

Screenshot from WordPress 6.4:

The focus style is thinner and barely visible.

Screenshot from WordPress trunk and Gutenberg trunk:

Same on trunk. I'd also say the horizontal alignment of the input and placeholder text isn't nice as it used to be.

Cc @annezazu can we please make sure this gets fixed for WP 6.5? Thanks 🙏

Step-by-step reproduction instructions

• Add an image block.
• In the block toolbar, click the Link button.
• Initial focus is set to the input field.
• Observe the focus style is worse than in previous versions.
• Observe the horizontal alignment of the placeholder text could be improved.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes