Navigation block should be identifiable with aria-label

[tellthemachines]

Is your feature request related to a problem? Please describe.

The Navigation block allows us to have multiple instances of navigation on the same page, each of these wrapped in a <nav> tag. To make it easier for screen reader users to make sense of multiple navigations, each <nav> tag should have an aria-label indicating what its contents are, e.g. "Site navigation" or "Categories navigation".

It won't be easy to generate an aria-label based on the contents of the block, so we might have to depend on users adding it in as a setting.

Describe the solution you'd like

A setting in the Navigation block allowing us to add a title, or (very) short description of the purpose of that Navigation. The content of the field should then be added as aria-label on the <nav> tag.

[brettkrueger]

Discussed in Navigation (screen and block) triage meeting

Unique auto-generating labels
https://wordpress.slack.com/archives/C02RQBWTW/p1597217654203300

Use of placeholder for enforcing field
https://wordpress.slack.com/archives/C02RQBWTW/p1597217840208300

[noisysocks]

We need to display a text field which allows the user to name the Navigation. Because this field would likely need to display in the block inspector, we're blocked on #23934.

[tellthemachines]

Hmm, in the links above we discussed adding the field in the placeholder so that it has to be filled in - that would display in the Navigation screen?

In any case, this issue is relevant to the Navigation block in general, so it's not blocked on all fronts 😄

[noisysocks]

Let's pull the aria-label from a new menu name field shown in the toolbar. See #24581. This can work in both the Navigation screen and Navigation block.

[annezazu]

Since a lot has changed with the nav block and it's been a minute since this issue was updated, I wanted to note that the current experience in WordPress 5.9 and Gutenberg 12.5.3 auto-names menus when creating new ones and gives you the option to update the name under Advanced. However, currently the aria label remains the same regardless (just shows as menu).

[carolinan]

I do not see any aria-label on the nav element. When I select a named menu, I see the following:
<nav class="wp-container-6200d3af748ba is-responsive items-justified-right wp-block-navigation">
Gutenberg trunk is active.

@annezazu can you help me locate where the aria-label you mentioned is? Did you mean the one on the button element?
"Open menu" ?

[annezazu]

Ah yes. Apologies :)

[tellthemachines]

We could add an aria-label with the menu name. While it's possible that there is more than one instance of the same menu on a page, and so both menus will end up with the same aria-label, given that both menus will be identical in content, the repeated aria-label would indicate that. Does that make sense?

[getdave]

Let's pull the aria-label from a new menu name field shown in the toolbar. See #24581. This can work in both the Navigation screen and Navigation block.

@tellthemachines Should we proceed with what @noisysocks suggests?

[noisysocks]

I wrote that comment a while ago 😅 just noting that we now have a field for the menu name underneath Advanced in the block inspector. Using that for the ARIA label makes sense to me.

[getdave]

@noisysocks I assumed that was the field you were referring to 😄 👍