== 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 ]]
- [[ https://di-toc-phase2.web.app/Hokusai | Design prototype ]] (for design experimentation)
- [[ https://en-toc.wmcloud.org/wiki/Main_Page | User testing prototype ]] (shown to end-users)
- User testing prototype results
== User story
As a reader, I want the ability to navigate to different sections in the page.
== Initial feature set
==== 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.ToC visual design
==== new ToC UI behaviour{F34909394, layout=left, float, width=200}
**On scroll**| element | Less CSS token
|-----------|--------
The new ToC will be positioned near the top of the page when the user is at the top of the page. As the user scrolls down the page, the ToC will:| border style | `@border-base`
| border radius | `@border-radius-base`
- "stick" to the top of the page so that it remains visible while scrolling.| background color | `@background-color-base`
| Heading font size | `@font-size-heading-3` (Vector)
- When a user "enters" an article section, the ToC will:| Link font size | `@font-size-base` (Vector)
- Highlight the ToC link corresponding to the current section| Top-level link color | `@color-primary`
| Sub-level link color | `@color-base`
- If the current section is a sub-section, the ToC will highlight the top-level section link as well.| Sub-level indentation | `8px`
//Tokens are taken from wikimedia-ui-base unless specified otherwise.//
---
==== Modified layout to accommodate new ToC
**On click**
When clicking on a section link in the ToC:|{F34909384, width=400} | {F34909387, width=400}
- The page will be scrolled to the corresponding heading (instantly)
- The clicked ToC link will be highlighted
- If the clicked ToC link is a sub-section| current sidebar, 11.5em wide, grey background | new sidebar, white background, the corresponding top-level link~14.5em wide
- The sidebar area will also be highlightedhave to be widened to fit the longer text of the new ToC.
- Any previously highlighted links will be un-highlightedThe sidebar background colour should be changed to transparent to improve the transition between the ToC and sidebar.
Note: Mobile/narrow 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=500} | {F34909406, width=500}
| sidebar open | sidebar closed
==== 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
==== Back-end (presentation) Logic
When determining whether or not to show the new ToC, the same rules that govern the current ToC should be applied. If the ToC is currently hidden via magic words like `__NOTOC__` or by other means, it should remain hidden in this update.
==== Edge cases
**Very long ToC**
When a ToC is longer than the viewport, then the ToC itself should be scrollable. On a very long ToC, when highlighting a section link that is outside the viewport, the ToC should change its scroll position in order to bring the active link into view.
== 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:NOTE: this tasks assumes that all sections within the ToC are uncollapsed. We will be building out the collapsible functionality in a separate ticket