Sidebar navigation headings are not in a logical order (H2, H3, H3, H3)

Problem/Motivation

• The sidebar currently contains several <h2> elements
• The visually-hidden “Administrative toolbar” heading should be the only <h2> heading, and all others should cascade below that starting with <h3>

WCAG success criteria

1.3.1 Information and Relationships
2.4.6 Headings and Labels

Steps to reproduce

1. Open the navigation in mobile or desktop view
2. Inspect the page in your browser
3. Search for “
4. Verify that the <aside> only contains <h2> headings

Code snippet

<aside class="admin-toolbar" id="admin-toolbar" data-once="navigation">
  …
  <div class="admin-toolbar__scroll-wrapper">
    <h2 id="admin-toolbar" class="visually-hidden">Administrative toolbar</h2>
      <nav id="menu-builder" class="admin-toolbar__content" aria-labelledby="admin-toolbar">
        ...

        <div class="admin-toolbar__item toolbar-block menu--shortcuts">
          <h2 id="menu-top-menus" class="toolbar-block__title visually-hidden">Top Menus</h2>
          ...
        </div>

        <div class="admin-toolbar__item toolbar-block">
          <h2 id="menu--admin" class="toolbar-block__title visually-hidden focusable">Administration</h2>
          ...
        </div>

        <div class="admin-toolbar__item toolbar-block">
          <h2 id="menu--content" class="toolbar-block__title visually-hidden focusable">Content</h2>
          ...
        </div>
      </nav>
    </div>
  </div>
</aside>

Potential resolution

Excluding the parent “Administrative toolbar” H2 heading, change all submenu H2 headings to H3 headings:

<aside class="admin-toolbar" id="admin-toolbar" data-once="navigation">
  …
  <div class="admin-toolbar__scroll-wrapper">
    <h2 id="admin-toolbar" class="visually-hidden">Administrative toolbar</h2>
      <nav id="menu-builder" class="admin-toolbar__content" aria-labelledby="admin-toolbar">
        ...

        <div class="admin-toolbar__item toolbar-block menu--shortcuts">
          <h3 id="menu-top-menus" class="toolbar-block__title visually-hidden">Top Menus</h3>
          ...
        </div>

        <div class="admin-toolbar__item toolbar-block">
          <h3 id="menu--admin" class="toolbar-block__title visually-hidden focusable">Administration</h3>
          ...
        </div>

        <div class="admin-toolbar__item toolbar-block">
          <h3 id="menu--content" class="toolbar-block__title visually-hidden focusable">Content</h3>
          ...
        </div>
      </nav>
    </div>
  </div>
</aside>