Fix focus style of social icons with no link yet

[afercia]

Description

Noticed while testing https://github.com/WordPress/gutenberg/pull/64883

When adding social icons, the focus style and the state of a social icon that hasn't a link set yet are problematic.

• The focus style is altered by the opacity set on the social icon. The social icon button is focused but the focus style isn't standard. This issue is very similar to the one fixed in https://github.com/WordPress/gutenberg/pull/62480. No matter what is the state of a control, the focus style needs to be clearly visible and standard.

Screenshot: The Instagram icon isn't linked yet. Notice the opacity alters the focus style. Instead, the GitHub icon is linked. The focus style is the standard one.

• The state of a non-linked social icon is only communicated visually by the opacity. This is insufficient and not accessible as the state is only communicated via a different color produced by the opacity. There's no other indication od the different state of the icons. Color alone is not sufficient. The different state must be communicated via a shape.

Screenshot: the GitHub icon does have a link set, the Instagram one doesn't:

@WordPress/gutenberg-design please provide a new design where the state is communicated via a meaningful, understandable sahpe.

Step-by-step reproduction instructions

• Add a Social icons block.
• Add an icon with a link and another icon without a link.
• Compare the visuals of the different states.
• Compare the focus style of the two icons.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

• [X] Yes

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

• [X] Yes

[afercia]

How about using the warning icon and removing any opacity? Roughly:

Maybe a new icon to indicate a missing link would be more meaningful.

[t-hamano]

As for the design, I don't have any good ideas at the moment, but apart from that, is there any need to improve the way screen readers read when no links are set? Unlike other blocks, I think the social icon block is expected to always have links applied.

[afercia]

is there any need to improve the way screen readers read when no links are set?

In the editor: the icon should render even with no link set and an appropriate visual indication and label should clearly communicate the icon misses a link. On the front end: I'd tend to think a social icon with no link should no render at all.

[hanneslsm]

How about using the warning icon and removing any opacity? Roughly:

Interesting idea. The icons block is definitely a special case, but let's not forget we have also blocks that currently use a opacity when they are not rendered in the frontend, like the "Read more" link in a Post Template or "Previous Page" and "Next Page" in the Pagination block.

And then, of course, there are image placeholders without opacity.

I guess what I'm trying to say is that we should look holistically from UX and UI standpoint at that topic "placeholders" / what's displayed on the editor but not frontend.