Navigation admin "Extend" button has hidden text before menu title

Problem

WCAG 2.5.3 Label in Name requires that the accessible name of a control contains the visible label text. The navigation admin menu "Extend" button has visually-hidden text that precedes the visible menu item title.

Visible text: Menu item title (e.g., "Content", "Structure")

Accessible name: "Extend Content", "Extend Structure"

A speech recognition user who says "Click Content" may not match because the accessible name starts with "Extend", not "Content".

Proposed resolution

Move the visually-hidden "Extend" text after the menu item title:

<button
  class="toolbar-menu__link toolbar-menu__link--{{ menu_level }}"
  data-toolbar-menu-trigger="{{ menu_level }}"
  aria-expanded="false"
  data-index-text="{{ item.title|first|lower }}"
>
  <span class="toolbar-menu__link-title">{{ item.title }}</span>
  <span data-toolbar-action class="toolbar-menu__link-action visually-hidden">{{ 'Extend'|t }}</span>
  {{ icon('navigation', 'chevron', { class: 'toolbar-menu__chevron', size: 16 }) }}
</button>

File

• core/modules/navigation/templates/navigation-menu.html.twig — lines 138-139

Test

Add a FunctionalJavascript test that:

1. Visits the admin navigation
2. Asserts each expandable menu button's accessible name starts with the visible menu item title

Related

• Meta: Assess Drupal core for WCAG 2.5.3 Label in Name
• WCAG 2.5.3 Label in Name