NOTE: This ticket spun off multiple sub tasks, but the acceptance criteria can be used to completely QA the feature and sign off that it is complete.
Background
As part of the reading list experiment we want users to be able to view all of their saved content. This ticket is to build the page where all the saved content can be accessed potentially giving users different ways in which they can view their saved lists such as list, card, image view.
For the scope of this experiment, it's sufficient to only have one layout style (e.g. card view, list view).
User story
As a reader on web, I want to view all of my saved articles on a single page.
Design
Layouts when menu's are open
 |  |  |
Layouts when width is reduced
 |  |
Figma design spec for spacing and other stylistic details.
- Generally following Special pages designs
- Sorting, filtering, and remove options have been removed from this initial version
- Saved items are in a card view that contains: thumbnail, title, and wikidata description in the language of the article
- Do not show any placeholder image when there is no lead image in the article as shown in some of the entries in the mock
- Show the empty state when there are no items saved
Acceptance criteria for done
Design
- Heading/Sorting text is following design spec
- Heading (and menu item) label is "Saved pages" for now for i18n/a11y. Will be picked up later with ideas around "My collection" possibly later again – ReadingLists/+/1191186
- Card layout is following design spec – ReadingLists/+/1190567
- Project description labels are hidden – ReadingLists/+/1191204
- Compact layout is removed – T405539 ReadingLists/+/1191201
-
Placeholder image question is resolvedcarved out to following sprint in T406523 - Empty state is following design spec – T405995 ReadingLists/+/1192319
Functionality
- Users can see all their saved items on the Special:ReadingLists page
- Page Title is following spec
- Accessibility: Common Special page heading is not hidden – T405431: ReadingList extension should show default (Special:Page) heading
- Saved items are sorted by most recently added at the top
- Users can continue to click through to the articles from the Special:ReadingLists page. (for QA steps only - no changes needed)
- Accessibility: Sorting message element (i.e. "sorted by most recent") is not child of the heading element (i.e. "Saved").
- Descoped
- Layout resize based on the available width according to responsive design templates shown – ReadingLists/+/1193516 descoped to T406628
- Layout has been signed-off by designer
QTE Requirement
Scope: Desktop web (Vector 2022). Special:ReadingLists must display a layout of saved articles according to design specifications:
- Layout is card view only, showing thumbnail (if present), article title in the language of the article.
- No placeholder image is shown if the article lacks a lead image.
- Saved items are sorted by most recently added at the top.
- Users can click through to the article from the card.
- Layout is responsive: adapts to different widths based on design templates.
- Accessibility: the “sorted by most recent” message must not be a child of the “Saved” heading element.
- Empty state must display when no items are saved.
- Project labels (e.g., fr.wikipedia.org) must be removed.
BDD
Feature: Display saved articles on Special:ReadingLists
Scenario: User views saved articles
Given I have saved articles in my Reading List
When I open Special:ReadingLists
Then my saved items are displayed in card view
And the most recently added item is at the top
And each card shows the article title and Wikidata description
And no placeholder image is shown when a lead image is absent
And clicking the card takes me to the article
Scenario: Responsive layout
Given I view Special:ReadingLists on different screen widths
When the viewport is resized
Then the card layout adjusts according to the responsive design templates
Scenario: Empty state
Given I have no saved articles
When I open Special:ReadingLists
Then the empty state is displayed
Scenario: Accessibility compliance
Given I view Special:ReadingLists
When inspecting the page structure
Then the “sorted by most recent” message is not a child of the “Saved” heading elementTest Steps
Test Case 1: Saved items displayed in card view
- Log in and save multiple articles.
- Open Special:ReadingLists.
- AC1: Saved items are displayed in card view with thumbnail, title, and Wikidata description.
- AC2: No placeholder image appears if an article lacks a lead image.
- AC3: Cards are sorted with most recently saved at the top.
- AC4: Clicking a card navigates to the article page.
Test Case 2: Responsive layout
- Resize the browser window across multiple widths.
- AC5: Card layout adjusts per responsive design templates.
- AC6: Content remains legible and aligned.
Test Case 3: Empty state
- Remove all saved articles from the Reading List.
- Open Special:ReadingLists.
- AC7: An empty state message is displayed.
Test Case 4: Accessibility structure
- Inspect the DOM structure of Special:ReadingLists in DevTools.
- AC8: “Sorted by most recent” text is not a child element of the “Saved” heading.
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T400939#11283020 |
| 2 | ✅ | T400939#11283020 |
| 3 | ✅ | T400939#11283020 |
| 4 | ✅ | T400939#11283020 |
| 5 | ✅ | T400939#11283020 |
| 6 | ✅ | T400939#11283020 |
| 7 | ✅ | T400939#11283020 |
| 8 | ✅ | T400939#11283020 |
