Improve how and what navigation block titles are communicating to screenreader users

I'm also seeing three instances of these focusable yet visually-hidden headings.

<h4 id="menu--shortcuts--2" class="toolbar-block__title visually-hidden focusable"></h4>
<h4 id="menu--content" class="toolbar-block__title visually-hidden focusable"></h4>
<h4 id="menu--admin" class="toolbar-block__title visually-hidden focusable"></h4>

Because these are meant to be visually-hidden headings, I'd recommend the following proposed solution:

1. Add missing heading text for each of them
2. Remove the CSS class .focusable

<h4 id="menu--shortcuts--2" class="toolbar-block__title visually-hidden">Shortcuts</h4>
<h4 id="menu--content" class="toolbar-block__title visually-hidden">Content</h4>
<h4 id="menu--admin" class="toolbar-block__title visually-hidden">Administration</h4>

Thanks @katannshaw! Updating the issue summary with the detailed recommended approach to make it easier to understand and address the issue.

Hey there, I'm working on this issue at the Mentored Contribution during DrupalCon Portland 2024. I'll be working on this for the next few hours.

Working on this issue during the mentored contribution DrupalCon Portland 2024.

Hello. I'm working on this at the DrupalCon Mentor Contribution in Portland 2024.

I will be working on this for the next few hours.

Hi, I am working on this at the mentor contribution session in Drupalcon in Portland 2024. I will be working on this for the next few hours.

Hello! I'm working at the mentored contribution in Drupalcon Portland 2024. I will be working on this for the next few hours.

hktang → changed the visibility of the branch 3439643-block-title-accessibility to hidden.

hktang → changed the visibility of the branch 3439643-block-title-accessibility to hidden.

Hello! I'm working at the mentored contribution in Drupalcon Portland 2024. I will be working on this for the next few hours.

Hello! I'm working at the mentored contribution in Drupalcon Portland 2024 too. I will be working on this for the next few hours.

Hello! I'm working at the mentored contribution in Drupalcon Portland 2024. I will be working on this for the next few hours too.

So far we have accomplished the following:

• We are spun up to do the work with DrupalPod/Tugboat.
• Everyone on our team has posted a comment.

Up next:

• We have begun to validate the issue so that we reproduce the issue properly. So far we have not been able to recreate. I used a screen reader extension to tab through the admin experience via Tugboat and was not able to recreate.
• We are going to continue our investigation after lunch and use the parent issue for clues to ensure we are recreating properly.

We'll be back at it after lunch!

I am working on this issue at DrupalCon 2024 PDX and will be working with it for the next few hours as well.

We've got some feedback and further information from @rkoller. We are summarizing these and provide an update soon.

I am also taking a look at this issue as part of contribution day at DrupalCon Portland 2024.

So far I'm not seeing the title variable (see line 4) ever get populated in the navigation--menu.html.twig template. Either way, I'm also seeing a heading level is being skipped between the menu template and its parent block--navigation.html.twig template.

We might consider not outputting a heading in the menu template, and instead provide an aria-label attribute for the <ul>, which would use the title var as its value.

We are out of time today. We spoke with the original opener of this issue, rkoller, via slack. The thread can be found at: https://drupal.slack.com/archives/C7AB68LJV/p1715202081200079

rkoller is using voiceover on a mac, and looking at the headings using voice over's rotor feature. The uploaded video nicely illustrates this.

Some hopefully useful context:

https://www.w3.org/WAI/tutorials/menus/structure/#label-menus

This is an indication that the invisible

tag is desirable, but in the time I've had, I haven't found an explanation for specifically why this is useful or what the outcome should be. That section includes a link to https://www.w3.org/WAI/tutorials/page-structure/labels/ which might be more useful.

Removing novice tag as the next steps require some specialist expertise.