Page MenuHomePhabricator

Indicate that saved items and collections are private to the user
Closed, ResolvedPublic3 Estimated Story Points

Description

Background

All users will soon be able to save articles and organize them into collections on Wikipedia. However, there is currently no indication of whether saved items and collections are visible to others. Since most content on Wikipedia is public, some users may assume their saved content is public as well, making them more hesitant to use these features. Providing a simple privacy cue can reduce that uncertainty and provide clarity.

User story

As a user, I want to know that my saved items and collections are private, so that I can confidently use these features for personal use.

Design requirements

Show a lock icon at the end of the page title to indicate that saved items are private.

private icon mobile.png (384×699 px, 155 KB)
private icon desktop.png (1,440×790 px, 341 KB)
Figma

Tooltip
On desktop users should be able to hover on top to see a tool tip with the following copy: "Your saved items and collections are private and visible only to you"
On mobile show the tool tip by tapping on the icon. Design to be provided.

Requirements

NOTE: we should do https://phabricator.wikimedia.org/T433995 before this task.

Acceptance criteria

  • Add the lock icon at the end of the title on saved pages
  • When viewing collection, show the icon at the end of collection name
  • Hovering on the lock icon on desktop show a tool tip
  • Tapping on on the lock icon on mobile shows a tool tip
  • Copy for the tooltip is: "Your saved items and collections are private and visible only to you"

QA strategy

  • Risky change? List whether this change has an increased potential to cause bug, regressions, or controversy.
  • QA by: Who should QA this task?
  • QA in: Which environment? Patchdemo, beta, production...
  • Test steps: Add if needed.

Communication criteria

Add if this needs an announcement or discussion.

Rollback plan

Describe the rollback plan in production for this task if something goes wrong.

This task was created by Version 1.1.0 of the Reader Experience team task template using phabulous.

Event Timeline

HFan-WMF moved this task from Incoming to Needs refinement on the Reader Experience Team board.

Is this required for graduating ReadingLists from a beta feature? or is this part of the custom collections work?

I would put this is under graduating ReadingList from beta work. Not required for building collections.

HFan-WMF lowered the priority of this task from High to Medium.Tue, Aug 11, 5:59 PM
aude raised the priority of this task from Medium to High.Fri, Aug 14, 5:44 PM
aude set the point value for this task to 3.Mon, Aug 17, 1:57 PM

@Sneha For "Tapping on on the lock icon on mobile shows a tool tip", is Codex’s standard long-press behavior (as available in CdxTooltip) acceptable here? or do you intend for different behavior?

so on mobile the tool tips show up on long press? Can we show it on tap without adding complexity?

@Sneha I tried the demo on my phone https://doc.wikimedia.org/codex/latest/components/directives/tooltip.html#technical-implementation

When I tap on the button, that gives it focus which triggers the tooltip. (without a long press, despite what the documentation says)

The lock icon in the designs isn't contrast-ey enough for our accessibility requirements.

Yes good point and I meant to revisit the colour as it looks light overall. How about we use: color-subtle (color.gray600)? I tested for accessibility and it works.

For the icon size, could we make it 15px instead of the standard 20 px since this icon is not meant to be clicked or used for any feature and only an indicator. I will update the screens here.

@Sneha For the tooltip itself, do you want white text with a black background (per the default in the component) in light mode? in dark mode, the tooltip is black text with a white background. or do you want something else?

https://doc.wikimedia.org/codex/latest/components/directives/tooltip.html

also can we have access to the figma design?

@aude we can go with the defaults in the component

@Sneha Can we have the icon be 16px size, which allows us to use the size-icon-small design token?

Change #1327177 had a related patch set uploaded (by Aude; author: Aude):

[mediawiki/extensions/ReadingLists@master] Add privacy lock indicator to Special:ReadingLists

https://gerrit.wikimedia.org/r/1327177

Change #1327177 merged by jenkins-bot:

[mediawiki/extensions/ReadingLists@master] Add privacy lock indicator to Special:ReadingLists

https://gerrit.wikimedia.org/r/1327177

Etonkovidova subscribed.

@Sneha Can we have the icon be 16px size, which allows us to use the size-icon-small design token?

@aude - on enwiki beta the icon size is 16px. I assume that how it should look?

The icon look smaller comparing to the design; assuming that it's passed @Sneha review.

designenwiki beta
The lock icon is as big as the title font
Screenshot 2026-08-20 at 10.55.24 AM.png (244×458 px, 96 KB)
Screenshot 2026-08-20 at 10.46.10 AM.png (760×1,678 px, 133 KB)
Screenshot 2026-08-20 at 11.07.58 AM.png (1,276×804 px, 134 KB)
Screenshot 2026-08-20 at 11.08.20 AM.png (744×1,106 px, 131 KB)

Additional screenshots for the tip - light and dark mode (no issues):

Screenshot 2026-08-20 at 10.59.40 AM.png (748×1,272 px, 126 KB)
real device (iPhone 11)
IMG_8981 (1).PNG (828×1,792 px, 390 KB)
Jdlrobson-WMF subscribed.

Please resolve if all looks good!

Please resolve if all looks good!

@Etonkovidova I am not sure why the icon looks smaller compared to the title on beta compared to my design. Beta is not loading for me right now so can't check what is going on. Also the padding between title and icon is larger than specified on Minerva.

@Sneha you can login and test on this patchdemo: https://0a2d4eb91f.catalyst.wmcloud.org/wiki/Main_Page
(FYI: if beta is ever down you can spin up a patchdemo of the current code just by clicking the "create demo" button)

Okay I was able to check now and the icon on Vector looks too small. It should be 16px like it is on Minerva.

icon size issue.png (816×472 px, 123 KB)

Change #1328647 had a related patch set uploaded (by Aude; author: Aude):

[mediawiki/extensions/ReadingLists@master] Ensure correct and consistent lock icon size

https://gerrit.wikimedia.org/r/1328647

Change #1328647 merged by jenkins-bot:

[mediawiki/extensions/ReadingLists@master] Ensure correct and consistent lock icon size

https://gerrit.wikimedia.org/r/1328647

Just checked. Looks good to me.