Remove Duplicate Level One Heading

[jkva]

This PR addresses the following item from PAC's "ARIA-AT App Screen Reader Accessibility Observations" document:

There are two level 1 headings for each testing task, making it potentially unclear where the main content of interest begins. There should only ever be one level 1 heading on a page.

---

Question: since the h1 and h2 on this page are now quite similar:

• h1 "Testing task: 1. Open a Modal Dialog"
• h2 (previously h1) "Testing task: Open a Modal Dialog"

Could the h2 not be done without? That way this PR can be simplified by just removing the duplicate h1 altogether and thus keeping the rest of the heading structure intact. This would then also ensure no changes need to be made to #375.

The main instructional and data entry content for the task is still in a separate section, and it looks like the content that would require a heading either way. But generally this looks like the overall page structure could be improved here.

---

Effective changes:

• Move second h1 (Testing task title) to h2; and
• any h2 to h3, h3 to h4.

[jscholes]

@jkva I agree with your assertions here, but I think restructuring the headings completely is a larger task. E.g. I'd personally have the test plan name, AT/browser info and number of completed tests earlier on the page, maybe before the test navigator or in that section? Not sure. But either way it would also require some design changes.

For now, does this also address the formatting of the remaining h1, whereby the text is missing whitespace after the colon for screen reader users?

[jkva]

@jscholes I've added a non breaking space between the "Testing task:" span and the rest of the h1 content. There's otherwise not really anything to do there apart from setting the aria-label on the h1 which seems overkill.

As for the heading restructuring, the PR in its current state already manages that. It just results in two headings (h1 and h2) being quite similar in text content.

[jscholes]

Approving this, caveat emptor my comments in #379 (review).

[isaacdurazo]

@jkva I noticed that adding the non-breaking-space creates an alignment issue in the UI, which pushes the "Testing task" name slightly to the right.

Before:

After:

Would it be possible and semantically correct to have the non-breaking-space right after the colon but within the <span> element?

[jkva]

@isaacdurazo good point, thank you. Addressed.

[isaacdurazo]

Thanks for addressing, @jkva