Page MenuHomePhabricator

[L] Modal sheet: Add image and link button, bottom copy/warning and counter, guidance button
Closed, ResolvedPublic5 Estimated Story Points

Assigned To
None
Authored By
HNordeenWMF
Jul 17 2024, 5:23 PM
Referenced Files
F57271802: IMG_4313C79CD0A7-1.jpeg
Aug 13 2024, 3:40 PM
F57271457: IMG_7575.PNG
Aug 13 2024, 12:54 PM
F57271439: IMG_7574.PNG
Aug 13 2024, 12:54 PM
F57271389: image.png
Aug 13 2024, 12:54 PM
F57271392: CleanShot 2024-08-13 at 14.16.38.png
Aug 13 2024, 12:54 PM
F57271382: CleanShot 2024-08-13 at 14.12.50.png
Aug 13 2024, 12:54 PM
F57271377: IMG_7567 2.PNG
Aug 13 2024, 12:54 PM
F57271360: IMG_7567.PNG
Aug 13 2024, 12:54 PM

Description

Background

As users are writing alt text, they should be able to review relevant image information by visiting the image's page on Wikimedia Commons. We also want to movivate users to keep alt text short, under 125 characters. They should be able to find and open guidance on how to write good alt text while completing the task.

In this first task, we built the MTV version of the add alt text modal sheet: T370232. This task adds the final elements to the alt text sheet.

Requirements
  • "Next" button is not active until user has added input into "Describe the image"
  • Input box does not allow line breaks
  • Embed all content in half sheet modal within scroll view
  • Add image thumbnail
  • Add image filename
  • Character counter below the input box starts at 0/125 and automatically updates as user types text
  • Show warning message in standard format if what the user has typed exceeds 125 characters.
    • "Next" is still active, and users can still publish with over 125 characters
  • Add link for "Guidance for writing alt text"
  • Typed text is retained if user navigates away to Guidance, image information, etc and then back
  • Relevant events are instrumented according to Data instrumentation plan and completed slides have been marked with a green background
  • Translations are added for target languages from UI Copy for Suggested edits Alt text on iOS (T370725)

Nice to have:

  • Input box does not allow pasting into it (to avoid users copy/pasting the caption)
Design:

Figma

Add alt text sheetCommons img detailsActive text fieldWarning for exceeding 125 characters
image.png (667×375 px, 176 KB)
image.png (667×375 px, 184 KB)
image.png (667×375 px, 58 KB)
image.png (667×375 px, 68 KB)

Event Timeline

Tsevener renamed this task from Modal sheet: Add image and link button, bottom copy/warning and counter, guidance button to [L] Modal sheet: Add image and link button, bottom copy/warning and counter, guidance button.Jul 23 2024, 6:24 PM
HNordeenWMF raised the priority of this task from Low to Medium.Jul 23 2024, 10:04 PM
Seddon set the point value for this task to 5.Jul 25 2024, 2:28 PM

Relevant analytics are:

active_interface = alt_text_editing_interface 
action = image_detail_view_click

When tapping on the file name.

active_interface = alt_text_editing_interface
action = character_warning

When the character warning appears.

Hi @scblr! The design review build for this will be in TestFlight Experimental build 7.5.7 (141). Please enable the related feature flags under the Developer Settings menu (Settings > About the app > tap About 7 times) to open up the entry point after an image recommendations edit. Note the experiment is randomly assigned at 50% after the image recommendations edit goes through, so you may need to fresh install a few times and repeat the steps for the assignment to work.

@scblr New Experimental build will be TestFlight 7.5.7 (142). This will have a developer settings toggle that allows you to set the experiment to 100%. Also be sure to uninstall any other Wikipedia apps while you test this Experimental build, in case their persisted data is messing with this build. Hope this helps with testing!

Thanks @Tsevener. The new developer setting is super helpful!

Not quite sure which of the things below are relevant in this phase and for this ticket, but here’s what I found:

1. Pasting does not work in the Describe the image field

IMG_7567.PNG (2×1 px, 312 KB)

2. Guidance for writing alt text link is not tappable yet. Do you know where the link should point to @Tsevener ? (I found this page in T370330).

IMG_7567 2.PNG (2×1 px, 319 KB)

3. The file link and image are not tappable yet. It should lead to the Commons file page.

CleanShot 2024-08-13 at 14.12.50.png (2×1 px, 1 MB)

4. Detail: the space between the blinking cursor and placeholder should be reduced

Implementation
CleanShot 2024-08-13 at 14.16.38.png (2×1 px, 302 KB)
How it should be
image.png (2×1 px, 228 KB)

5. Next button does not work yet

IMG_7574.PNG (2×1 px, 325 KB)

6. [Bug?] Locking/unlocking my phone with a filled sheet resulted in this:

IMG_7575.PNG (2×1 px, 253 KB)

7. FYI: I created T372398 as well after reviewing.

@scblr Thanks!

Pasting does not work in the Describe the image field

That's by design - task description says "Nice to have: Input box does not allow pasting into it (to avoid users copy/pasting the caption)"

  1. Guidance for writing alt text link is not tappable yet. Do you know where the link should point to?

This will be done as a part of T370330, which has the links.

The file link and image are not tappable yet. It should lead to the Commons file page.

This will be done as a part of T370332.

  1. Detail: the space between the blinking cursor and placeholder should be reduced

👍 I'll fix that.

Next button does not work yet

Tapping it should currently post the edit (if you don't have the "do not post image rec edit" dev settings flag on) and pop back to the next image recommendation. We will push it to the review screen after T370359 is done. Are you not seeing that behavior?

[Bug?] Locking/unlocking my phone with a filled sheet resulted in this:

That's really strange! I can't reproduce so far. Can you tell me what theme you had in your settings? (Default or Light?)

@scblr New Experimental build #143 with the fix for #4.

Detail: the space between the blinking cursor and placeholder should be reduced

Thx @Tsevener

Pasting does not work in the Describe the image field

That's by design - task description says "Nice to have: Input box does not allow pasting into it (to avoid users copy/pasting the caption)"

👍

  1. Guidance for writing alt text link is not tappable yet. Do you know where the link should point to?

This will be done as a part of T370330, which has the links.

👍

The file link and image are not tappable yet. It should lead to the Commons file page.

This will be done as a part of T370332.

👍

  1. Detail: the space between the blinking cursor and placeholder should be reduced

👍 I'll fix that.

Thanks, looks good in the updated build.

Next button does not work yet

Tapping it should currently post the edit (if you don't have the "do not post image rec edit" dev settings flag on) and pop back to the next image recommendation. We will push it to the review screen after T370359 is done. Are you not seeing that behavior?

  • Gotcha. I didn’t notice that the article in the background has changed since the sheet was expanded. I assume the sheet will be collapsed after users go through the preview step T370359.
  • I noticed, though, that this state...

IMG_4313C79CD0A7-1.jpeg (2×1 px, 471 KB)

... happens after publishing, not locking the phone. Might it be solved after finishing the other tickets?

@Tsevener @scblr I experienced a similar state after making test edits in the external beta 7.5.7 (3841)
After successfully publishing an alt text edit, parts of the UI disappeared, and the half sheet remained while the article updated to the next Image Recs suggestion.
Here is the state after publishing alt text with "next"
https://drive.google.com/file/d/1f4aXxRaIfLBMwerB4AtTu6PvjDsdvOo_/view?usp=sharing

@scblr @HNordeenWMF I put up a fix in TestFlight Experimental build 7.5.7 (#145). Since it seems to be sporadic I'm not certain I fixed it, but feel free to check.

Since this last remaining issue is a bug and not design tweaks, I'm going to move this ticket past design review and into Code Review.

Note for @ABorbaWMF : this is the only new element that should be checked for Dynamic Type compatibility