WordPress.org

Make WordPress Core

Opened 8 months ago

Closed 8 months ago

Last modified 8 months ago

#51944 closed defect (bug) (fixed)

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

Reported by: albertomake Owned by: SergeyBiryukov
Milestone: 5.6 Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-patch commit dev-reviewed
Focuses: accessibility, coding-standards Cc:

Description (last modified by SergeyBiryukov)

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!

Attachments (1)

51944.patch (1014 bytes) - added by poena 8 months ago.
Replace section with div

Download all attachments as: .zip

Change History (11)

#1 @kebbet
8 months ago

  • Component changed from Themes to Bundled Theme
  • Focuses accessibility added

@poena
8 months ago

Replace section with div

#2 @poena
8 months ago

  • Keywords has-patch added; needs-patch removed

#3 @SergeyBiryukov
8 months ago

  • Description modified (diff)
  • Milestone changed from Awaiting Review to 5.6

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.

#4 @SergeyBiryukov
8 months ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

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.
}}}

Last edited 8 months ago by SergeyBiryukov (previous) (diff)

#5 @SergeyBiryukov
8 months ago

  • Keywords commit dev-feedback added
  • Resolution fixed deleted
  • Status changed from closed to reopened

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

This ticket was mentioned in Slack in #core-committers by hellofromtonya. View the logs.


8 months ago

#7 @peterwilsoncc
8 months ago

  • Keywords dev-reviewed added; dev-feedback removed

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
Last edited 8 months ago by peterwilsoncc (previous) (diff)

#8 @SergeyBiryukov
8 months ago

  • Summary changed from TwentyTwentyOne: The main element must not appear as a descendant of the section element. to Twenty Twenty-One: The main element must not appear as a descendant of the section element.

#9 @peterwilsoncc
8 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

This ticket was mentioned in Slack in #core by sergey. View the logs.


8 months ago

Note: See TracTickets for help on using tickets.