Headings cannot be activated by clicking child elements

[rzhw]

It appears that placing a child element inside a heading (e.g. <span>) will capture clicks intended for the heading element itself.

Should this be resolved? That is, should clicks to child elements of headings activate the heading?

Example

Take the following markup:

--const-mq-affordances:
  [screen] tab-bar
;
.vulnerability-packages h2 {
   padding: 16px;
}
.vulnerability-packages[affordance=tab-bar] h2 .vuln-ecosystem {
    display: block;
    font-weight: bold;
    text-transform: uppercase;
}
.vulnerability-packages[affordance=tab-bar] h2 .vuln-name {
    display: block;
    font-weight: normal;
}

<spicy-sections class="vulnerability-packages">
    <h2>
        <span class="vuln-ecosystem">NuGet</span>
        <span class="vuln-title-divider">/</span>
        <span class="vuln-name">Google.Protobuf</span>
    </h2>
    <div>
        ...
    </div>
    <h2>
        <span class="vuln-ecosystem">Packagist</span>
        <span class="vuln-title-divider">/</span>
        <span class="vuln-name">google/protobuf</span>
    </h2>
    <div>
        ...
    </div>
    ...
</spicy-sections>

Which renders similarly to follows:

Using SpicySections.js at commit c3aae99dbf1e627cdf03a35c913d7f6e970de22b, clicking the <span> elements in the tabs will result in the following:

SpicySections.js:408 Uncaught TypeError: Cannot read properties of undefined (reading 'activate')
    at HTMLHeadingElement.eval (SpicySections.js:408:34)

However, clicking the padding on the tabs themselves will result in tabs triggering as expected.