All reports : Heading semantics used inappropriately

Issue Summary

On the “All reports” page, the “Switch report” button is inappropriately included within the heading markup.

Steps to Reproduce

1. Navigate onto the above mentioned page.
2. Navigate onto the mentioned instance and inspect its code.
3. Observe that the mentioned button is inappropriately included within the heading markup.

Screenshot

Actual Results

The “Switch report” button is inappropriately included within heading tag. However, this element does not title or categorise any content. As a result, users of a screen reader will not be able to understand the page’s content structure.

Expected Results

Elements that do not title or categorise any content should not use heading tags. Use CSS to style the content if required. Do not use heading tags, such as <h1>, <h2>, and so on, unless the elements title or categorise other content. Use neutral tags that do not have any structural meaning, such as <div>, <span>, and <p> tags.
In this scenario, move the <button> element out of the <h1> element in the DOM.
Code Snippet
<h1>All reports</h1>
<button aria-expanded="false">Switch report</button>

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2021)
macOS Monterey Version 12.4
Chrome - Version 103.0.5060.134 (Official Build) (arm64)
Firefox- Version 93.0 (32-bit)
Safari- Version 15.5 (17613.2.7.1.8)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest