As a reader, I want to understand when a relevant section is within a search result article, and have the ability to go directly to that section, so that I don’t overlook a relevant search result or have to move through irrelevant sections of a long article after clicking through.
Providing a table of contents for an article in the results list helps readers verify that the relevant content they are looking for is within a large article, and allows them to go directly to that section. This is part of the quickview panel epic https://phabricator.wikimedia.org/T306341
Note: this does not include determining the relevance of sections.
Proposed Design
Desktop
Link to design in Figma
Desktop
Acceptance criteria (Applicable to mobile and tablet)
- Show the header "Sections in the article" above the sections.
- Show all section levels starting from top i.e. include sub sections.
- Show as many sections as can be fit in three rows. (We can revisit this once we see how it works with actual data and increase the rows if needed)
- If the section name does not fit in a single row then crop the title with ellipsis at the end.
- If the section name is too long to fit in a row (with other section) have a line break and show that section in the second row.
- Clicking/tapping on section name will navigate users to that section of the article in the same tab.
- The quick view panel (if it was previously open before navigating to an article) should stay open when user return to search results using browser back button. (This applies to all links and not just sections)
- Show " n sections" indicating the number of sections that are not shown in the quick view.
- If there is only 1 more section to show then show that section on the fourth row
- Clicking/Tapping on the " n sections" will navigate to the first of the remaining number of sections in the article.
-
Do not repeat the sections that have been already mentioned above the "Sections" list as shown in this mock. - Where no sections are available, do not display feature
- Information are retrieved using cirrusdoc
Technical notes
- Retrieve sections for a given page via sections property - https://en.wikipedia.org/w/api.php?action=parse&format=json&page=Pet&prop=sections
