By benjifisher on
Change record status: 
Draft (View all draft change records)
Project: 
Toolbar
Introduced in branch: 
11.5.x
Introduced in version: 
11.5.0
Issue links: 
https://www.drupal.org/node/3093378
Description: 

This change affects the markup for the <button> elements in the admin toolbar when it is in vertical mode, such as the buttons next to "Structure" and "Display modes" in this screenshot:

Screenshot showing the admin toolbar, Manage tab, and the Structure submenu is expanded

There should not be any visible difference before or after this change, so the screenshot works for both.

Before

Markup for the collapsed Structure item:

<button class="toolbar-icon toolbar-handle" style="">
  <span class="action">Extend</span>
  <span class="label">Structure</span>
</button>

Markup for the expanded Structure item:

<button class="toolbar-icon toolbar-handle open" style="">
  <span class="action">Collapse</span>
  <span class="label">Structure</span>
</button>

After

Markup for the collapsed Structure item:

<button aria-expanded="false" class="toolbar-icon toolbar-handle" style="">
  <span class="label visually-hidden">Structure menu</span>
</button>

Markup for the expanded Structure item:

<button aria-expanded="true" class="toolbar-icon toolbar-handle open" style="">
  <span class="label visually-hidden">Structure menu</span>
</button>

Affected themes

Any theme that uses the Twig templates, CSS, and JavaScript from the core Toolbar module will get the updated markup. That includes the core Claro, Olivero, Stark, and Starterkit theme themes.

Any theme that overrides the core Toolbar module will not get the updated markup. That includes the core Stable 9 theme.

Custom themes

How to keep the old markup

If the new markup causes problems with your custom theme, then you can override the Toolbar module. The Stable 9 theme does this:

From stable9.info.yml:

libraries-override:
  toolbar/toolbar:
    css:
      theme:
        css/toolbar.theme.css: css/toolbar/toolbar.theme.css
        css/toolbar.icons.theme.css: css/toolbar/toolbar.icons.theme.css
  toolbar/toolbar.menu:
    js:
      js/toolbar.menu.js: js/toolbar/toolbar.menu.js

How to get the new markup

If your theme extends the Stable 9 theme, but you want to get the accessibility improvements from the new markup, then you will have to override the overrides. Add something like this to your theme's .info.yml file:

libraries-override:
  # Use the CSS and JS files from the toolbar module, not the stable9 theme.
  toolbar/toolbar:
    css:
      theme:
        /core/themes/stable9/css/toolbar/toolbar.icons.theme.css: /core/modules/toolbar/css/toolbar.icons.theme.css
        /core/themes/stable9/css/toolbar/toolbar.theme.css: /core/modules/toolbar/css/toolbar.theme.css
  toolbar/toolbar.menu:
    js:
      /core/themes/stable9/js/toolbar/toolbar.menu.js: /core/modules/toolbar/js/toolbar.menu.js
Impacts: 
Module developers
Themers