[wp-trac] [WordPress Trac] #51944: TwentyTwentyOne: The main element must not appear as a descendant of the section element.

[WordPress Trac]

#51944: TwentyTwentyOne: The main element must not appear as a descendant of the
section element.
---------------------------+----------------------------------------------
 Reporter:  albertomake    |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  5.6
Component:  Bundled Theme  |     Version:  5.6
 Severity:  normal         |  Resolution:
 Keywords:  has-patch      |     Focuses:  accessibility, coding-standards
---------------------------+----------------------------------------------
Changes (by SergeyBiryukov):

 * milestone:  Awaiting Review => 5.6


Old description:

> 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.
> (https://core.trac.wordpress.org/ticket/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!

New description:

 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!

--

Comment:

 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
 [https://make.wordpress.org/core/2019/09/04/changes-on-twenty-nineteen-
 html-structure-in-wordpress-5-3/ 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/51944#comment:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform