gfellerph
commented
2 months ago Hoi @aedu-hostettler, thanks for submitting this bug. Indeed, the <br> is the culprit here. As a workaround, I would propose to use
<h1 class="h2">
<span class="d-block">Heading</span>
<span class="fw-light">Subheading</span>
</h1>While we're trying to remove bootstrap as a dependency, we're also trying to keep the breaking changes to a minimum. Utility classes like the one you used here will most likely be provided as is.
I can't reproduce the issue where the subheading is bigger if the .h2 is only used on the parent element. Without any other influence, the span with .fw-light should inherit other font properties like font-size.
Describe the bug When using a heading with subheading, NVDA recognises the main heading and subheading as 2 separate headings. It seems, that there are e.g. 2x h1 headers, or 2x h2 headers and so on.
To Reproduce Steps to reproduce the behavior:
<h1><span>Heading</span><br /><span class="fw-light">Subheading</span></h1>Expected behavior If you create the heading with subheading as following (in this example bootstrap css classes are used, but if you want to get independent of bootstrap, then use a background css equivalent for the structure of all hx-variants maybe?) then it looks the same as before, but a screen-reader does recognise the main- and sub-heading as one hx-tag.
<h1 class="h2"><span class="d-inline-block w-100">Paketetiketten Inland</span><span class="fw-light d-inline-block w-100 h2">Erstellen Sie Etiketten für den Paketversand innerhalb der Schweiz</span></h1>Note the optional h2 css-class on the second span. It is necessary, if one uses the same h2 css-class on the h1 tag, otherwise it would show up bigger than the main-heading. (h2-class would be used to make both together look different, for hierarchical reasons)