Description
Currently the "active" section link in the ToC gets bolded, corresponding to the active section of the page (i.e. the section you are currently reading). The intention behind this feature is that it makes the table of contents a more useful map of the article, providing a sort of "you are here" type indicator whenever you look at it.
For articles with many sections (example: Paris), if you have expanded one (or likely more than one) section, therefore causing the ToC to be taller than the given vertical space of the ToC container, as you scroll down the page you can get into a situation where the active section link is offscreen (i.e. below the "fold" of the ToC container).
To illustrate this, watch as I scroll below the "Culture" sub-sections on the Paris article:
The active section link is still being bolded, but you cannot see it because it's offscreen.
Solution
In this case we think that the ToC should scroll itself, such that the active section link can never be offscreen. We are evaluating two approaches to this solution:
Approach 1
Logic: if a the active ToC section heading is below the vertical center of the ToC, scroll the ToC so that the active section heading is above the vertical midpoint
Pros/cons: this results in more auto-scrolling of the ToC, but the auto-scrolls are smaller jumps
Demo: link to patchdemo
Screen recording:
Approach 2
Logic: if a the active ToC section heading is ~40px from the bottom of the ToC, scroll the ToC so the active section heading is towards the top of the ToC
Pros/cons: this results in less auto-scrolling of the ToC, but the auto-scrolls are larger jumps
Demo: https://patchdemo.wmflabs.org/wikis/5ec25f7054/wiki/Paris?useskin=vector-2022&tableofcontents=true
Screen recording:
(additional visual aids for understanding both approaches are here: T301150#7707873)
Acceptance criteria
- The bolded section heading in the ToC should always be visible on screen
- The bolded section should scroll to the middle of the TOC when it reaches 100px from the bottom or top of the TOC
- The smooth scrolling transition should be off for users with the 'prefers-reduced-motion' setting
Developer notes
It's possible to leverage Element.scrollIntoView() so that the current active state of the TOC section is visible within the view port as it corresponds to the visibility of the main content section while scrolling.
Initial testing of this method inside the activateSection() function of tableOfContents.js seems to produce the desired effect:
tocSection.scrollIntoView( { block: 'center' } );Purportedly the options parameter is not supported in Safari, but preliminary testing seems to indicate otherwise. It may be that older versions of Safari are not supported. Seems that people have had success with this polyfill in the wild.
There is no IE support for this method but presumably the no-js solution for sticky TOC will suffice for this use case - otherwise we would need to use a polyfill.
Pending design review, we may want to experiment with the different optional parameters that define properties like scrolling behavior, block positioning, etc.
QA Results - Beta (patchdemo)
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T301150#7836955 |
| 2 | ✅ | T301150#7836955 |
| 3 | ✅ | T301150#7836955 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ❌ | T301150#7839700 |
| 2 | ❌ | T301150#7839700 |
| 3 | ⬜ | T301150#7839700 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T301150#7859504 |
| 2 | ✅ | T301150#7859504 |
| 3 | ✅ | T301150#7859504 |
