Navigation Link: Improve accessibility by removing non-interactive tooltips

[himanshupathak95]

Fixes: #68597

What?

Improves accessibility in the Navigation Link block by replacing tooltips with visual states for invalid and draft links.

Why?

The current implementation misuses tooltips to show additional information about link states. This creates accessibility issues.

Testing Instructions

• Test Missing Link State:

  • Add a Navigation block
  • Notice the "Add link" placeholder with a wavy underline
  • Verify no tooltip appears on the hover

• Test Invalid Link State:

  • Add a Navigation Link block
  • Link it to any post
  • Move that post to the trash in another tab
  • Return to editor and refresh

• Verify:

  • Link shows "(Invalid)" suffix
  • Has red wavy underline
  • No tooltip on hover

• Test Draft Link State:

  • Add a Navigation Link block
  • Create and link to a draft post

• Verify:

  • Link shows "(Draft)" suffix
  • Has yellow/warning wavy underline
  • No tooltip on hover

Screencast

Before

Screen.Recording.2025-01-15.at.11.52.35.mov

After

Screen.Recording.2025-01-15.at.11.48.17.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: himanshupathak95 <[email protected]>
Co-authored-by: afercia <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[afercia]

@himanshupathak95 thanks for wokring on this!
I think it's going in the right direction and adding the Invalid / Draft state to the visible text is valuable.

However, I wouldn't use an aria-label at all. It introduces a mismatch between the visible text and the accessible name of the link. I'd think the visible text is sufficient to communicate the state so instead of doing this (markp examples):

<span ... aria-label="This item is missing a link">Add link</span>

<span aria-label="Navigation link text - Invalid">Lalala (Invalid)</span>

<span aria-label="Navigation link text - Draft">Lalala (Draft)</span>

I'd suggest to do this:

<span ... >Missing link</span>

<span>Lalala (Invalid)</span>

<span>Lalala (Draft)</span>

[himanshupathak95]

Thanks @afercia, for the suggestion. I have removed the labels as suggested.

Please let me know if there is a way to improve further 🚀