Nested main element in faq

[MikeMcC399]

Where to find the issue

• https://www.coronawarn.app/en/faq/
• https://www.coronawarn.app/de/faq/

Describe the issue

The FAQ page https://www.coronawarn.app/en/faq/ contains two <main> elements. This is not allowed:

    <main id="main" class="main-content" role="main" tabindex="-1">
        <main class="main text-center">

Steps to reproduce

Run https://validator.w3.org/ on https://www.coronawarn.app/en/faq/ and note the error messages:

• "The main element must not appear as a descendant of the main element."
• "A document must not include more than one visible main element"

also

• "Stray end tag div."

Analysis

The first main definition comes from:

cwa-website/src/layouts/default.html

Line 30 in 5e37655

<main id="main" class="main-content" role="main" tabindex="-1">

• The class="main-content" attribute statement does not seem to be used.
• According to https://w3c.github.io/html-aria/#el-main it is not recommended to explicitly assign role="main" since it is already implicitly assigned.

The second main definition comes from:

cwa-website/src/partials/page-faq.html

Line 2 in 5e37655

<main class="main text-center">

• The main class is not defined. It may not be needed.
• The text-center class is from bootstrap.

Suggestion

Convert the <main> tag in src/partials/page-faq.html to a <div> tag and combine this with the stray </div> end tag.

Review the attribute settings class="main-content" role="main" in src/layouts/default.html in a separate issue.

References

• https://html.spec.whatwg.org/multipage/grouping-content.html#the-main-element

[MikeMcC399]

• PR Replace child main in faq by div section #3265 submitted to resolve this issue