Site editor: List view: incorrect labeling of navigation links

[afercia]

Description

In the Site Editor > Design > Navigation > Any navigation menu, the navigation links visually show the link label, that is the textual label users enter when they create a linb.

However, the aria-lable of each link is actually the navigation link type, ie. 'Page Link', 'Custom Link', 'Submenu'.

As such:

• The visual labeling and the actual accessible name mismatch.
• Screen reader users don't have any clue what the navigation link actually is. Only the link type is announced.
• Speech recognition software users can't activate the links because of the label / name mismatch.

It is worth reminding that aria-label overrides any textual content. As such, these labels aren't really useful for users, for example:

• aria-label="Page Link"
• aria-label="Custom Link"
• aria-label="Submenu"

Screenshot:

In this context, 'Page Link', 'Custom Link', 'Submenu' etc. aren't meaningful names for these items.

Instead, in the Post editor list view, the block type makes more sense. However, the items in teh list view can be many things:

• blocks with default names
• blocks with custom names (renamed by users)
• synced patterns with user provided names
• navigation links with user provided labels (the link text)

All these cases need the item aria-label to match the text that is visually displayed as that is the text that gives users the correct information about what they are going to edit.

It appears the List View items labeling mechanism hasn't been tested enough in the context of the Site editor navigation links, as the current labeling is clearly insufficient to provide any useful information to users.

Additionally:

Each item may provide additional information like the 'sticky' status or the 'locked' status. These need improvements as well and I will open a separate issue. For now, I'd like to address also the 'Options' ellipsis button. To me, these aren't 'Options'. The concept of options is about settings or preferences, while the dropdown menu provides actions. Also, in other context this ellipsis button is labeled 'Actions', for example in the patterns cards. For a more meaningful naming and for consistency I'd like to rename this button to 'Actions' and simplify it by removing the part 'for %s'.

Step-by-step reproduction instructions

• Use a screen reader, for example VoiceOver with Safari.
• Go to the Site Editor > Design > Navigation > Any navigation menu.
• Navigate through the list view items in the navigation panel.
• Observe the items are announced with their navigation link type rather than their link text.

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

[getdave]

This is an accessibility bug identified during the RC period. For this reason I believe it should be included in the WordPRess 6.5 release during the RC period.

I'm putting it on the board for now and marking the related PR with the backport label.

Do you concur @youknowriad @fabiankaegy @annezazu?

[youknowriad]

I think this is not a regression in 6.5, so for me, it doesn't have to land in 6.5 (especially at this stage)

[getdave]

I'm still yet to review the PR in detail but I'd certainly trust your judgement on bug vs regression.

[youknowriad]

I wouldn't mind a confirmation though, it's more of a guess :)

[getdave]

Having reviewed the PR and Issue, it's my understanding that whilst this Issue is important to resolve it is not a regression introduced during the 6.5 RC period (or indeed within the 6.5 release).

The PR author (and/or others) may have a different view on this which I'm sure we'd all be open to hearing.

For now I'll remove the backport label to avoid potential confusion.