== Background
This will be the first part of setting up the new, persistent version of the table of contents
- [[ https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Repository/Sticky_Header_and_Table_of_Contents_User_Testing | Objectives and research ]]
- Design prototypes [[ https://di-toc-phase2.web.app/Hokusai | 1 ]], [[https://di-toc-collapsible-sections.web.app/Aretha_Franklin | 2 ]] [[ https://di-toc-phase2.web.app/Hydrogen | 3 ]] (for design experimentation)
- [[ https://en-toc.wmcloud.org/wiki/Main_Page | User testing prototype ]] (shown to end-users)
- User testing prototype results
== Initial feature set
==== ToC visual design
{F34909394, layout=left, float, width=200}
| element | Less CSS token
|-----------|--------
| border style | `@border-base`
| border radius | `@border-radius-base`
| background color | `@background-color-base`
| Heading font size | `@font-size-heading-3` (Vector)
| Link font size | `@font-size-base` (Vector)
| Top-level link color | `@color-primary`
| Sub-level link color | `@color-base`
| Sub-level indentation | `8px`
//Tokens are taken from wikimedia-ui-base unless specified otherwise.//
---
==== Modified layout to accommodate new ToC
|{F34909384, width=350} | {F34909387, width=350}
| current sidebar, 11.5em wide, grey background | new sidebar, white background, ~14.5em wide
- 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.
| {F34909412, width=350} | {F34909406, width=350}
| sidebar open | sidebar closed
==== 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.
| {F34909488, width=350 } | {F34909490, width=350 }
| no ToC, sidebar closed | no ToC, sidebar 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
NOTE: this tasks assumes that all sections within the ToC are uncollapsed.
== 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