Background

Currently .mw-page-container-inner contains the main menu, the site notice, and the toc as children elements and in that order. This source order doesn't match the visual order of these elements, and is only necessary because the main menu becomes full width on lower resolutions and appears above the site notice. The difference in visual and source order results in an unexpected experience for keyboard and screenreader users.

In addition to the source order, the ToC and main menu are sibling elements that are both individually positioned by the grid, even though their design suggests a normal layout where the ToC follows the main menu regardless of the grid row. The fact that we are using the grid to achieve a normal layout leads to unnecessary complexity, and makes our grid layout prone to issues in the future. i.e. The only reason why our grid layout works now is because we define the grid template with 'mainMenu pageContent', 'toc pageContent'. Our layout would break if we needed to move elements around like so: 'mainMenu siteNotice, 'toc pageContent'.

Now that the main menu is moved to a dropdown in T317899, we are able to fix both problems by reorganizing the DOM structure and grid layout. This would also be consistent with the ColumnEnd naming and grid setup, and would future proof our DOM for additional items that might be added to ColumnStart.

<div class="mw-page-container-inner">
  {{>Header}}
  {{>SiteNotice}}
  <div class="vector-column-start>
    {{>MainMenu}}
    {{>TableOfContents}}
  </div>
  ...
</div>

grid-template-areas: 'header header'
  'siteNotice siteNotice'
  'columnStart pageContent'
  'footer footer';

AC

• No visual changes
• New .vector-column-start container is added along with ColumnStart.mustache

QA Steps

Steps to replicate the issue

• With the zebra feature flag enabled ?VectorZebraDesign=1 go to any long page on production or beta e.g. https://en.wikipedia.org/wiki/Paris?VectorZebraDesign=1
• Scroll to the bottom of the page

What happens?:

What should have happened instead?:
The ToC should not overlap the footer

Developer notes

This patch requires cached HTML changes

This bug is due to changes in where position:sticky has been applied in Zebra. The position:sticky was moved one element up the dom tree,
from
.mw-page-container-inner > .vector-sticky-pinned-container > #vector-toc-pinned-container
to
.mw-page-container-inner > .vector-sticky-pinned-container

QA Results - Beta

QA Results - Prod