Site Hub and ExternalLink: replace the North East Arrow unicode character with equivalent SVG icon

[afercia]

Description

See https://core.trac.wordpress.org/ticket/40428

In #60255 the ExternalLink component was changed to use the North East Arrow unicode character ↗ rather than the external SVG icon.

In #61258, the site editor 'hub' was changed to use the North East Arrow unicode character but only display it on hover and focus via an ::after CSS pseudo element.

Both unicode characters and pseudo generated content are treated as text and screen readers do read out text.

In the ExternalLink component the only reason why screen readers do not announce North East Arrow is because the unicode character is wrapped within a span element with an aria-label opens in a new tab):

gutenberg/packages/components/src/external-link/index.tsx

Lines 69 to 77 in 2c5f768

	<span
	className="components-external-link__icon"
	aria-label={
	/* translators: accessibility text */
	__( '(opens in a new tab)' )
	}
	>
	&#8599;
	</span>

Instead, in the site hub after #62648 is merged, the unicode character in the pseudo generated element will be announced. Screen readers will read out:

link, {site title} opens in a new tab North East Arrow

This could be fixed in the site hub implementation but I'd rather suggest a more general approach, also for educational purposes. The most important thing to take into consideration for accessibility is as follows:

Important

Content of CSS pseudo elements and Unicode characters are text and are announced by screen readers.

To avoid future similar cases I'd like to propose to establish a guide line and never use unicode characters or pseudo generated content this way.

Also, unicode characters may be rendered in a slighly different way on different operating systems.

The ExternalLink component and the Site Hub custom implementation should use an SVG icon instead. Icons in the @package/icons are hidden from assistive technologies by default.

Step-by-step reproduction instructions

• Checkout to Fix: a11y text for site editor #62648 it it hasn't be merged yet.
• Use Safari and VoiceOver.
• Go to the site editor and tab to the site title in the navigation panel.
• Observe the unicode character in the site title is announced. VoiceOver will read out: link, {site title} opens in a new tab North East Arrow

Screenshots, screen recording, code snippet

Note: the VoiceOver caption panel shows the character ↗ but it actually announces it as 'North East Arrow`:

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]

I'm cool if we do the unicode symbol as an icon, resulting in no change visually.