Page MenuHomePhabricator

Selected topic card is missing a border when not focused
Closed, ResolvedPublic1 Estimated Story Points

Description

As part of MinT for Wikipedia Readers MVP (T359072), the Confirm step (T359512) presents the article the user selected before the user access the translation. The selected article is presented as a Card Codex component using the "portrait" orientation (still pending official Codex implementation in T310632). The card shows initially with the focus input which provides a blue border around it. However, when the focus is moved away (e.g., pressing tab key) the card is shown with no border at all, which makes it hard to identify as a card.

Card with input focusCard without input focus
Screenshot 2024-05-09 at 13.59.59 2.png (568×320 px, 98 KB)
ca.m.wikipedia.org_wiki_Especial_MinT(Wiki Mobile).png (568×320 px, 96 KB)

This ticket proposes to add a regular border (using the Codex border token border-color-base) in the same way that the regular Card component. The expected result is illustrated below:

Card with input focusCard without input focus
Screenshot 2024-05-09 at 13.59.59 2.png (568×320 px, 98 KB)
ca.m.wikipedia.org_wiki_Especial_MinT(Wiki Mobile) (3).png (568×320 px, 95 KB)

Event Timeline

Pginer-WMF triaged this task as Medium priority.
Pginer-WMF moved this task from Backlog to Product integration on the MinT board.

Change #1122596 had a related patch set uploaded (by Huei Tan; author: Huei Tan):

[mediawiki/extensions/ContentTranslation@master] Add the missing border for the topic card

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

Change #1122596 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Add the missing border for the topic card

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

Nikerabbit set the point value for this task to 1.Mar 3 2025, 7:27 AM
abi_ changed the task status from Open to In Progress.Mar 6 2025, 5:45 AM
abi_ subscribed.

Verified on production

image.png (1×499 px, 140 KB)