Background

This will be the first part of setting up the new, persistent version of the table of contents

• Objectives and research
• Design prototypes 1, 2 3 (for design experimentation)
• User testing prototype (shown to end-users)
• User testing prototype results

Initial feature set

ToC visual design

Tokens are taken from wikimedia-ui-base unless specified otherwise.

---

Modified layout to accommodate new ToC

• The sidebar area will have to be widened to fit the longer text of the new ToC.
• The sidebar background colour should be changed to transparent to improve the transition between the ToC and sidebar.

Note: Narrow-width layout is TBD.

Open and closed states

The sidebar area should switch between showing the sidebar menu and the new table of contents.

Prototype of final version

https://di-toc-phase2.web.app/Hokusai

No ToC state

For pages that do not have a sidebar, such as main page & special pages, the content should be centered and the sidebar width should remain 14.5em when the sidebar is open.

Accessibility & semantic considerations

• The new ToC should be accessible via keyboards and assistive technologies.
• In the accessibility tree, the ToC should be a labeled as a navigational landmark
• It should be a <nav> element

At this stage the feature should be feature-flagged and off by default.

With the work done in T287767, it's now possible to render the table of contents outside the parser content area via mustache templates.

Acceptance criteria

• Allow the table of contents to appear persistently on the left side of the page
• Allow the table of contents to contain links that navigate to the corresponding section within the ToC

Developer notes

You can use array-sections inside the Mustache template to render table of contents. How to do this is demonstrated in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/737504

QA Results - Beta

QA Results - Prod