Image block: linked image do not have a pressed button in the block toolbar

[afercia]

Description

When some normal text in the editor is linked, the 'Link' button in the block toolbar communicates there is a link both visually and semantically. Screenshot:

Instead, when an image is linked, the 'Link' button doesn't communicate the 'linked' stage. Screenshot:

the button misses the 'is-pressed' CSS class and the aria-pressed="true" attribute.

Besides that, labelling, functionality and UI to unlink/edit link are completely different for text and images. Ideally, the UIs should be similar but that's not the scope of this issue.

Step-by-step reproduction instructions

• Edit a post.
• Select some text and add a link. Save.
• Select the selected text.
• Observe the Link button in the block toolbar has a 'pressed' state and styling (and an aria-pressed="true" attribute)
• Add an Image. Add a link to the image. Save.
• Select the image.
• Observe the Link button in the block toolbar dos not have a 'pressed' state and styling (and no aria-pressed="true" attribute)

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

[richtabor]

Related to #50893. If image and media-text use LinkControl, this would be resolved (as well as further consolidate the linking experience throughout the editor).

[afercia]

While working on this I noticed there's a CSS problem with the is-pressed state. A few of the buttons used in the block toolbar have a components-toolbar__control class. This CSS rule:

gutenberg/packages/components/src/toolbar/toolbar-button/style.scss

Lines 20 to 23 in 4609399

	// Hide focus rectangle on click.
	&:active::before {
	display: none;
	}

Introduces a problem and an inconsistent behavior. It hides the button ::before CSS pseudo element while the button is being clicked and thus:

1. The is-pressed dark background isn't applied any longer while clicikng, which makes the button icon stay white on a white background so that the button looks 'empty'.
2. The focus outline disappears while clicking, which is inconsistent with all the other buttons.

Animated GIF to illustrate the second point. Using the Embed block as an example, but this can be reproduced on other buttons that use the components-toolbar__control class:

• The first button shows the focus outline while it is being clicked. This is the behavior of the vast majority of the buttons in the editor.
• The second button doesn't.

I'm going to remove this CSS rule. It was introduced in this commit as part of the G2 redesign and it appears to be an inconsistent remnant.

[afercia]

Related to #50893. If image and media-text use LinkControl, this would be resolved (as well as further consolidate the linking experience throughout the editor).

Thank @richtabor it would be freat to use the same UI. In the meantime I'll push a simpke fix for the current implementation.

[afercia]

jordesign added [Type] Enhancement and removed [Type] Bug labels 17 hours ago

In its current state, this implementation is not accessible and also the visual behavior is broken, so I'd argue this is actually a bug, not an enhancement.