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 what this bookmark icon does before I click it.
Design
- SVG for illustration to be provided
- The onboarding dialog informing users about the Save feature appears when the user is shown the Saved icon for the first time
- The dialog points to where the Save feature is available depending on the width of the screen
- The onboarding dialog should be exited by clicking the 'x' button or clicking anywhere on the screens.
- Onboarding dialog is reviewed by the designer
Things we agreed to add on Oct 16
- Make the illustration area smaller by reducing spacing above and below the illustration. See mock for guidance.
- Do not show the onboarding dialog if the bookmark is out of screen (i.e. the user has scrolled down or away from bookmark)
- fix z-index issue with sticky header
-
Keyboard behaviour like tabbing should not dismiss the dialog(applying the default behaviour of the codex popover component)
First time the user is shown the Save icon
 |  |
| When the Save icon is in the action bar, the onboarding dialog points to it | When the Save icon is in the tools menu, the onboarding dialog points to the tools menu |
Link to Figma
Requirement
Scope: Desktop web (Vector 2022).
- The onboarding dialog for the Reading List “Save” feature appears the first time a logged-in user is shown the bookmark icon.
- The dialog explains the Save feature with the provided save_onboarding.svg illustration.
- The dialog points to the visible Save icon, adapting position based on screen width (action bar or tools menu).
- The dialog must:
- Not appear if the Save icon is out of view (user has scrolled away).
- Be dismissible by clicking the close (“x”) button or clicking outside the dialog.
Not dismiss on keyboard tabbing.- Maintain correct z-index and appear above sticky headers or other UI layers.
- Use reduced spacing above and below the illustration per updated design mock.
- The onboarding dialog must be reviewed and approved by design for visual accuracy.
BDD
Feature: Onboarding dialog for Save feature
Scenario: Displaying onboarding dialog for first-time users
Given I am a logged-in user who has never seen the Save feature onboarding
When the Save icon becomes visible on screen
Then an onboarding dialog appears pointing to the Save icon
And it displays the `save_onboarding.svg` illustration
And the spacing around the illustration is reduced per design updates
Scenario: Dismissing the onboarding dialog
Given the onboarding dialog is visible
When I click the close (“x”) button or anywhere outside the dialog
Then the dialog closes
And it does not reappear during the same session
Scenario: Accessibility and layering behavior
Given the onboarding dialog is visible
When I navigate using the keyboard
~~Then tabbing does not dismiss the dialog~~
And the dialog remains layered above sticky headers and other elementsTest Steps
Test Case 1: Display of onboarding dialog
- Log in with a test user who has not seen the Save onboarding before.
- Load an article with the Save icon visible in the toolbar.
- AC1: The onboarding dialog appears only when the Save icon is visible on screen.
- AC2: The dialog points correctly to the Save icon (action bar or tools menu based on layout).
- AC3: The save_onboarding.svg illustration appears with reduced top and bottom spacing.
Test Case 2: Dismissal behavior
- Click the “x” button or any area outside the dialog.
- AC4: The dialog closes and does not reappear during the same session.
Test Case 3: Accessibility and z-index verification
- Use the keyboard to tab through elements while the dialog is open.
- AC5:
Tabbing does not dismiss the dialog.Requirement removed as of Oct 16 - AC6: The dialog remains visible and above sticky headers or overlapping UI elements.
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T406923#11321868 |
| 2 | ✅ | T406923#11321868 |
| 3 | ✅ | T406923#11321868 |
| 4 | ✅ | T406923#11321868 |
| 5 | ❌ | T406923#11321868 |
| 6 | ❓ | T406923#11321868 |
