Twenty Twenty-One: The main element must not appear as a descendant of the section element.

[albertomake]

Hi, on the header.php in the twentytwentyone theme we can see this at the end of the document:

	<div id="content" class="site-content">
		<section id="primary" class="content-area">
			<main id="main" class="site-main" role="main">

The problem here is that the main element must not appear as a descendant of the section element.

I raised a similar ticket two years ago for the twentynineteen theme where I proposed to change the section element for a div. (#47066).

Also, this change involves changing the closing section element in the footer.php:

			</main><!-- #main -->
		</section><!-- #primary -->
	</div><!-- #content -->

The solution for the header and footer files would look like this:
header.php

	<div id="content" class="site-content">
		<div id="primary" class="content-area">
			<main id="main" class="site-main" role="main">

footer.php

			</main><!-- #main -->
		</div><!-- #primary -->
	</div><!-- #content -->

Thanks!

[poena]

Replace section with div

[SergeyBiryukov]

Hi there, welcome back to WordPress Trac! Thanks for the report.

Looking at #47066, this is much easier to fix before the release, otherwise there would be backward compatibility concerns and we'd need to write a dev note like the one for a similar change to ​Twenty Nineteen in WordPress 5.3.

Based on the above, moving this to 5.6. I don't think this will require another RC before the final release.

[SergeyBiryukov]

In 49759:

Twenty Twenty-One: Fix the nesting of the main element.

The main element must not appear as a descendant of the section element. Correct markup is the first requirement to make user agents and assistive technologies work properly.

Changes the <section> element that was wrapping the <main> element to a <div>.

Follow-up to [45942] for Twenty Nineteen.

Props albertomake, poena.
Fixes #51944.
}}}

[SergeyBiryukov]

Reopening for backporting to the 5.6 branch after a second committer's review.

[peterwilsoncc]

Approved for commit to 5.6 branch.

Review notes:

• confirmed HTML is correct on home, category archive, post, page and media
• confirmed neither #primary or .content-area selectors were overloaded with section in CSS

[peterwilsoncc]

In 49760:

Twenty Twenty-One: Fix the nesting of the main element.

The main element must not appear as a descendant of the section element. Correct markup is the first requirement to make user agents and assistive technologies work properly.

Changes the <section> element that was wrapping the <main> element to a <div>.

Follow-up to [45942] for Twenty Nineteen.

Props albertomake, poena.
Reviewed by SergeyBiryukov, peterwilsoncc.
Merges [49759] to the 5.6 branch.
Fixes #51944.