A heading that wraps a button renders as an empty heading #89

A heading whose content is an actionable control (a <button> carrying a ref) renders as an empty heading, with the control emitted after it.

Observed

The Ben & Jerry's flavor graveyard (https://www.benjerry.com/flavors/flavor-graveyard) is an accordion of this shape:

<li>
  <h2>
    <button type="button" aria-expanded="false">Aloha Macadamia</button>
  </h2>
  …
</li>

The session dump (with actionable refs) renders each item as:

- ##

   <button type="button" aria-expanded="false" ref="13">

  Aloha Macadamia

  </button>

So the heading is empty and its text only appears inside the raw control tag below it.

Why it matters

• The document outline is lost: grep '^##' finds 35 empty headings, and a model skimming headings sees none of the flavor names.
• A heading wrapping a disclosure button is the standard accessible accordion pattern (the WAI-ARIA APG accordion), so this affects a common kind of page, not an edge case.

Suggested behaviour

Keep the control inside the heading, so the heading carries its label and the ref together:

- ## <button type="button" aria-expanded="false" ref="13">Aloha Macadamia</button>

Or put the label in the heading text and the ref on the element:

- ## Aloha Macadamia <button type="button" aria-expanded="false" ref="13">

Either way, the heading text must not be empty when its only content is an actionable element.