Page MenuHomePhabricator

Design improvements to focus area cards
Closed, ResolvedPublic5 Estimated Story Points

Description

From the testing party with @JSengupta-WMF

Acceptance criteria

  • Make the focus area title link to the focus area
  • The "View wishes in this area" message should be changed to "View N wishes in this area"
  • The "View N wishes in this area" link should jump to the "Wishes in this focus area" section of the focus area page
  • The "Supported by N people" link should jump to the "Votes" section of the focus area page

Derived Requirement

Update the focus area cards with design and functional improvements to improve navigation and clarity:

  • The focus area title should be clickable and link directly to the focus area page.
  • The label “View wishes in this area” should change to “View N wishes in this area”, where N = number of wishes.
  • The “View N wishes in this area” link should navigate directly to the “Wishes in this focus area” section of the focus area page.
  • The “Supported by N people” link should navigate directly to the “Votes” section of the focus area page.
Test Steps

Test Case 1: Focus Area Title Linking

  1. Go to the Focus Area index page.
  2. Click the focus area title on any focus area card.
  3. ✅❓❌⬜ AC1: Clicking the title navigates to the correct focus area page.

Test Case 2: Display of Wishes Count in Link

  1. On the focus area index page, check the “View wishes in this area” text.
  2. ✅❓❌⬜ AC2: The text displays as “View N wishes in this area” with the correct count.

Test Case 3: Wishes Link Navigation

  1. Click the “View N wishes in this area” link.
  2. ✅❓❌⬜ AC3: User is navigated to the “Wishes in this focus area” section of the focus area page.

Test Case 4: Supporters Link Navigation

  1. On a focus area card, click the “Supported by N people” link.
  2. ✅❓❌⬜ AC4: User is navigated to the “Votes” section of the focus area page.

Test Case 5: Regression Check – Links with Zero Wishes

  1. Identify a focus area with 0 wishes.
  2. ✅❓❌⬜ AC5: The label correctly displays “View 0 wishes in this area” and the link still navigates to the “Wishes in this focus area” section, even if empty.

QA Results - Meta Beta

Event Timeline

HMonroy changed the task status from Open to In Progress.Sep 23 2025, 7:00 PM
HMonroy claimed this task.
MusikAnimal set the point value for this task to 5.

Developer note: Do whatever it is we need to do so that when a wish is added to a focus area, the count of wishes in the focus area cards is automatically updated.

MusikAnimal changed the task status from In Progress to Open.Sep 24 2025, 9:12 PM
MusikAnimal renamed this task from Change the “View wishes in this area” on focus areas cards to Design improvements to focus area cards.Sep 25 2025, 1:52 AM
MusikAnimal updated the task description. (Show Details)
MusikAnimal added a subscriber: JSengupta-WMF.

I've revised the acceptance criteria based on my memory from the testing party. Joy, please correct us if we got anything wrong.

@MusikAnimal

Quoted Text "The "View N wishes in this area" link should jump to the "Voting" section of the focus area page"

Why should it jump to voting section? Seems wrong.

Quoted Text "The "View N wishes in this area" link should jump to the "Voting" section of the focus area page"

Why should it jump to voting section? Seems wrong.

Oops! That should have been the "Wishes in this focus area section". Fixed :)

Unlicking. I'm still working on migration script things.

Change #1191867 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/CommunityRequests@master] Add and improve links in focus area index cards

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

If there are no wishes should it say something like "There are not yet any wishes in this area" rather than "View 0 wishes in this area"? And perhaps not be linked?

Change #1191981 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/CommunityRequests@master] Add wish counts to focus area index cards

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

Go with View 0 wishes in this area. I don’t see this situation arising
easily as the staff won’t create focus areas till they find a common theme
between wishes.

Samwilson changed the task status from Open to In Progress.Sep 29 2025, 8:30 AM

Good point! That's easier too. :)

Change #1191981 merged by jenkins-bot:

[mediawiki/extensions/CommunityRequests@master] Add wish counts to focus area index cards

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

Change #1191867 merged by jenkins-bot:

[mediawiki/extensions/CommunityRequests@master] Add and improve links in focus area index cards

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

@Samwilson Please review AC4, thanks!

RTL has issues which are noted in T404748: Newly created wishes in non-English languages do not immediately render with correct RTL and localized labels until cache is purged

Test Result - Meta Beta

Status: ✅ PASS ❌ FAIL
Environment: Meta Beta
OS: macOS Tahoe 26.0
Browser: Chrome 140
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Focus Area Title Linking

  1. Go to the Focus Area index page.
  2. Click the focus area title on any focus area card.
  3. AC1: Clicking the title navigates to the correct focus area page.

Test Case 2: Display of Wishes Count in Link

  1. On the focus area index page, check the “View wishes in this area” text.
  2. AC2: The text displays as “View N wishes in this area” with the correct count.

Test Case 3: Wishes Link Navigation

  1. Click the “View N wishes in this area” link.
  2. AC3: User is navigated to the “Wishes in this focus area” section of the focus area page.

See AC2

Test Case 4: Supporters Link Navigation

  1. On a focus area card, click the “Supported by N people” link.
  2. AC4: User is navigated to the “Votes” section of the focus area page.

Does not scroll to the "Votes" section unless you do it manually

Test Case 5: Regression Check – Links with Zero Wishes

  1. Identify a focus area with 0 wishes.
  2. AC5: The label correctly displays “View 0 wishes in this area” and the link still navigates to the “Wishes in this focus area” section, even if empty.

Test Case 4: Supporters Link Navigation
On a focus area card, click the “Supported by N people” link.
❌ AC4: User is navigated to the “Votes” section of the focus area page.
Does not scroll to the "Votes" section unless you do it manually

I think this is because, initially when the page loads, the Votes section is already as far up as it can be (i.e. the page is scrolled to the bottom). That would be correct, but then the wish table loads and pushes the votes section lower, and then the position of the scroll is wrong. I think the fix is to re-scroll after the wish table loads.

Change #1193591 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/CommunityRequests@master] Scroll back to section after loading wish table

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

Change #1193591 merged by jenkins-bot:

[mediawiki/extensions/CommunityRequests@master] Scroll back to section after loading wish table

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

That's hopefully fixed now @GMikesell-WMF, can you have another look? Thanks!

Change #1193968 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/CommunityRequests@master] WishIndexTable: Only scroll if a URL fragment is given

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

Change #1193968 merged by jenkins-bot:

[mediawiki/extensions/CommunityRequests@master] WishIndexTable: Only scroll if a URL fragment is given

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

That's hopefully fixed now @GMikesell-WMF, can you have another look? Thanks!

@Samwilson Yes, that did the trick! I will mark this as Resolved. Thanks for all your work!

Test Case 4: Supporters Link Navigation

  1. On a focus area card, click the “Supported by N people” link.
  2. AC4: User is navigated to the “Votes” section of the focus area page.

GMikesell-WMF updated Other Assignee, removed: GMikesell-WMF.
GMikesell-WMF updated the task description. (Show Details)