==== Background
This ticket is a split from T400366
We agree to split that ticket into three tickets, this is one of them.
==== User Story
As a logged-in reader, I'd like to know where can I access by Saved items.
==== Open questions
- Clarify message to be most concise: "Access all your saved pages from here." vs "Access all your saved pages here." vs …?
==== Design
[X] SVG for illustration to be provided
{F66750744}
[] The onboarding dialog informing users about Saved list appears when the user saves their first page
[] The dialog points to where the Save feature is available depending on the width of the screen
[] The onboarding dialog should show on top of the generic confirmation toast (if we cannot hide it for this instance)
[] The onboarding dialog should be exited by clicking the 'x' button or clicking anywhere on the screens.
[] Onboarding dialog is reviewed by the designer
| {F65961637 width=550} | {F65961639 width=300} |
| When the Saved list is in the header, the onboarding dialog points to the icon in the header | When Saved list is under the user menu, the onboarding dialog points to the user menu |
=====[[ https://www.figma.com/design/Q3pYKI7RRMdRRgkQp2RiTf/Web--Reading-List-Collections?node-id=493-44273&t=u6SWIY403irIahPz-4 | Link to Figma ]]
---
== Requirement
Scope: Desktop web (Vector 2022).
- Display an onboarding dialog informing users how to access their Saved list after saving their first article.
- The dialog must appear immediately after the first successful save action.
- The dialog points to the location of the Saved list entry in the user menu or toolbar, depending on viewport width.
- The dialog appears above the confirmation toast if both are present.
- The dialog can be dismissed by clicking the close (“x”) button or anywhere outside the dialog.
- The dialog message should be concise (e.g., “Access all your saved pages from here.”).
- Onboarding dialog appearance and placement must be reviewed by design.
== BDD
```
Feature: Onboarding dialog for accessing Saved list
Scenario: Showing onboarding dialog after first saved article
Given I am a logged-in user
And I have just saved my first article using the bookmark icon
When the save action completes
Then an onboarding dialog appears pointing to the Saved list location
And the message reads “Access all your saved pages from here.”
Scenario: Dismissing the onboarding dialog
Given the onboarding dialog is visible
When I click the close button or anywhere outside the dialog
Then the dialog is dismissed
And it does not reappear on future saves
```
== Test Steps
__Test Case 1: Verify onboarding dialog appears after first save__
1. Log in and enable the Reading List feature.
2. Clear local storage to simulate a first-time user.
3. Open an article and click the bookmark icon to save it.
4. **AC1:** The onboarding dialog appears immediately after saving the first article.
5. **AC2:** The dialog points to the Saved list location in the toolbar or user menu.
6. **AC3:** The message reads “Access all your saved pages from here.”
7. **AC4:** The dialog appears above the confirmation toast.
__Test Case 2: Verify dismissal behavior__
8. Click outside the dialog or click the close (“x”) button.
9. Save another article.
10. **AC5:** The onboarding dialog does not appear again.
== QA Results - Prod
| **AC** | **Status** | **Details** |
| ----- | ----- | ----- |
| 1 | ✅ | T406922#11356401 |
| 2 | ✅ | T406922#11356401 |
| 3 | ✅ | T406922#11356401 |
| 4 | ✅ | T406922#11356401 |
| 5 | ✅ | T406922#11356401 |