Duplicate ARIA id on the burger icon, and a skipped heading level on seven screens

[bpmore]

Bug description

Two small structural defects in the CP, grouped because each is a few lines on its own.

1. Duplicate ARIA id on the burger menu icon

resources/svg/icons/burger-menu-no-border.svg carries a hardcoded id that is referenced by aria-labelledby:

https://github.com/statamic/cms/blob/v6.31.0/resources/svg/icons/burger-menu-no-border.svg

<svg role="img" aria-labelledby="burger-menu-title">
  <title id="burger-menu-title">Toggle Navigation Menu</title>

Because the SVG is inlined wherever it is used, rendering it more than once on a page emits the id twice. axe-core reports duplicate-id-aria (critical) on /cp/playground. An aria-labelledby pointing at a duplicated id resolves ambiguously.

WCAG 2.1 SC 4.1.1 and SC 1.3.1 (Level A).

2. Heading level skipped on seven screens

Seven screens jump from <h1> straight to <h3> with no <h2> in between. The dashboard widget cards are the clearest case:

<h3 class="… text-lg text-gray-900 …" data-ui-heading>Read the Documentation</h3>

axe-core reports heading-order on 7 screens including the dashboard, taxonomy terms, navigation edit, fieldsets, roles and groups.

This is a best-practice rule rather than a hard 2.1 failure, but it does affect how screen reader users navigate by heading, and 2.4.6 Headings and Labels (AA) is the relevant criterion.

How to reproduce

For (1): visit /cp/playground and run

document.querySelectorAll('#burger-menu-title').length  // > 1

For (2): visit /cp/dashboard and run

[...document.querySelectorAll('h1,h2,h3,h4')].map(h => h.tagName)  // H1 then H3, no H2

Suggested fix

1. Generate the <title> id per instance rather than hardcoding it, or drop role="img"/aria-labelledby where the icon sits inside an already-labelled button (the burger button has its own accessible name, so the SVG could simply be aria-hidden="true"). The second option is smaller and probably more correct.
2. Demote the dashboard card headings to <h2>, or add the section heading that is currently implied.

Filing rather than PRing: (1) has two reasonable shapes and (2) is a document-outline decision.

Related

The nameless focusable <svg> I noted at the bottom of #15392 is a third instance of icon markup leaking into the accessibility tree, if you want to treat them together.