Navigation link: incorrect usage of Tooltip

[afercia]

Description

Similar to #66271 and #68591
This is one more occurrence of incorrect usage of the Tooltip component.

Tooltips should be used to visually expose the accessible name of an interactive control. They're not the right tool to use for descriptions or additional infomration.

• In the bste case, the description / additional information isn't accessible to all users.
• In the worst case, the non-interactive element the Tooltip is used with will get a tabindex=0 attribute added by the Ariakit-based Tooltip component, thus making the non-interactive element focusable. This is a WCAG violation and in some cases disrupts the expected keyboard interaction.

In

gutenberg/packages/block-library/src/navigation-link/edit.js

Lines 536 to 538 in 79234bd

	<Tooltip text={ tooltipText }>
	<span>{ missingText }</span>
	</Tooltip>

and

gutenberg/packages/block-library/src/navigation-link/edit.js

Lines 582 to 601 in 79234bd

	<Tooltip text={ tooltipText }>
	<span
	aria-label={ __(
	'Navigation link text'
	) }
	>
	{
	// Some attributes are stored in an escaped form. It's a legacy issue.
	// Ideally they would be stored in a raw, unescaped form.
	// Unescape is used here to "recover" the escaped characters
	// so they display without encoding.
	// See `updateAttributes` for more details.
	`${ decodeEntities( label ) } ${
	isInvalid || isDraft
	? placeholderText
	: ''
	}`.trim()
	}
	</span>
	</Tooltip>

The Tooltip wraps a span element. As such, the span element gets a tabindex=0 attribute and becomes a non-interactive focusable element.

Once again, it is worth reminding that tooltips should not be used to provide information in a 'visual' way, that is: only on mouse hover.

Instead of using tooltips, the invalid or missing link state should be communicated by the visible placeholder text.
For example, when a link is missing, 'Add link' should be 'Missing link' and maybe the item should be visually highlighted in some way as an error or warning.

Step-by-step reproduction instructions

• Edit a navigation menu.
• Add a link to a post and save.
• In another browser tab, delete the linked post.
• Refresh the editor page.
• Observe a text (Invalid) is added after the link.
• Hover the link and observe a tooltip appears with some extra info.
• Add a link to a post or page.
• Select the newly added item in the navigation and click 'Remove link' in the popover.
• Observe the menu item text becomes 'Add link'
• Hover the link and observe a tooltip appears with some extra info.

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure