Site title: link text and accessible name mismatch

[afercia]

Description

Follow up to https://github.com/WordPress/gutenberg/pull/61258

The Site Title in the Site editor navigation panel is now a link to the front end. So far so good. However, there's a couple issues to fix:

1. The link visible text and the link accessible name mismatch. This is not ok for a11y and prevents some users from understanding and using the link. Sighted screen reader users, speech recognition software usrers will be impacted.
   • The visible text is the blogname value, for example: "My awesome site".
   • The accessible name is determined by the link aria-label="View site (opens in a new tab)" which is an hardcoded string.
2. The icon (actually a ↗ unicode character via a CSS pseudo element) mismatches other icons used for the same 'view site' functionality. I'm not sure this helps building a cohesive visual language. Icons usage should be consistent, as also mentioned in the original PR https://github.com/WordPress/gutenberg/pull/61258#pullrequestreview-2033031447

Step-by-step reproduction instructions

• Go to the site editor.
• With the navigation panel open, observe the site title link has an aria-label="View site (opens in a new tab)" that mismatches the visible text.
• Hover or focus the link
• Observe the icon that appears is different from the icon used for other 'view site' links.

Screenshots, screen recording, code snippet

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

[up1512001]

Hi, @afercia updated please check this PR. https://github.com/WordPress/gutenberg/pull/62648

[afercia]

@up1512001 thanks. Personally, I would use the external icon which is the one that was previously used in WordPress 6.5 and it is still used in the 'View' menu in the Post editor:

Note: All the available iocns from the @wordpress/icons package can be seen in the Storybook at https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library

[up1512001]

@afercia used the external icon, please check.

[richtabor]

The icon (actually a ↗ unicode character via a CSS pseudo element) mismatches other icons used for the same 'view site' functionality. I'm not sure this helps building a cohesive visual language. Icons usage should be consistent, as also mentioned in the original PR

Currently the UI is shifting from text based external links to leverage the ↗ character. You'll note the ExternalLink component now leverages it as well.

[afercia]

Currently the UI is shifting from text based external links to leverage the ↗ character. You'll note the ExternalLink component now leverages it as well.

Thanks, I'm seeing it now in a few places in the UI. Can you please point me to the relevant discussion issue / PR for that change? [Edit] Found the PR: https://github.com/WordPress/gutenberg/pull/60255

As a first thought, I'm not sure I can support a design change that makes things less visible. I see a trend in the editor design where low vision users needs aren't very well considered. I'd like to read the argumentations behind that change first though. Thanks.

[afercia]

I created a separate issue for the design of the external icon / new unicode character. See https://github.com/WordPress/gutenberg/issues/62832