Page MenuHomePhabricator

Edit summary field on publish story form
Closed, ResolvedPublic

Assigned To
Authored By
SBisson
Feb 9 2023, 3:37 PM
Referenced Files
F37612038: Screenshot_20230822-114820_Chrome.jpg
Aug 22 2023, 6:39 AM
F37612040: Screenshot_20230822-114752_Chrome.jpg
Aug 22 2023, 6:39 AM
F37603243: 2023-08-21_09-32-53.png
Aug 21 2023, 4:41 PM
F37576819: 2023-08-18_15-35-07.mp4.gif
Aug 18 2023, 10:52 PM
F37576632: 2023-08-18_15-21-56.mp4.gif
Aug 18 2023, 10:52 PM
F37576887: 2023-08-18_15-44-19.png
Aug 18 2023, 10:52 PM
F37084191: 03 - Write summary field.png
May 30 2023, 12:23 PM
F37084188: 02 - Initial landing on publish page with error.png
May 30 2023, 12:23 PM

Description

Description

As a story editor, I would like to include an 'edit summary' during the publishing stage, detailing the specific changes or additions I made to the story. This feature will promote quicker content review by providing other editors with an overview of my modifications.

Design details

01. Initial landing on the publish page

01 - Initial landing on publish page default.png (780×360 px, 46 KB)
  • Upon navigation to the Wikistories publishing page, the user's focus is directed to the story title input field.
  • The device's keyboard activates for this field, its borders are highlighted in blue, and a blinking cursor appears within it.
  • Below this field, the watchlist checkbox and the fine-print terms and conditions are visible.
  • The new "Write edit summary" accordion is also visible but inactive.

02. Error handling

02 - Initial landing on publish page with error.png (780×360 px, 48 KB)
  • If a user attempts to publish a story without a title or with a duplicate title, an error message surfaces below the story title input field.
  • This causes the checkbox, fine-print, and accordion to be pushed down as primary focus shifts to addressing and rectifying the error.

03. Writing an edit summary

03 - Write summary field.png (780×360 px, 46 KB)
  • When "Write edit summary" is tapped, the checkbox, fine-print, and story title input field move upward, creating room for an empty edit summary text box.
  • The keyboard becomes active, and the cursor starts blinking within this text box.
  • If the edit summary extend beyond the visible space within the text box, a scrollbar appears within the text box to facilitate scrolling through the content.
  • When a user taps outside the "Write edit summary" field, the keyboard deactivates, and the text box remains open and moves down below the fine-print. It retains any text inputted during its activation.
  • The page layout returns to the original state with the story title field in focus.

04. Editing a story after publishing

  • After editing a published story, on returning to the publish page, the "Write edit summary" field is in its expanded form by default, with the device's keyboard active and a blinking cursor inside the empty text box for the edit summary.
  • Once an edit summary is written, the user can opt to publish the revised story using the primary "Publish" button.
  • Regardless of the state of the keyboard or the "Write edit summary" field, the entire page should be scrollable to allow access to all elements at any time.

Note: For the desktop version, the same functionality applies but the layout and interactions will be adjusted to suit a desktop environment.

Design file

Acceptance Criteria
  • On first navigation to the Wikistories publishing page, the user's focus should be directed to the story title input field.
  • Tapping on "Write edit summary" should reveal an empty text box for the user to describe their edits.
  • The summary field should have a scrollbar when the user's summary exceeds the text box size.
  • The text box for the summary remains open and move down below the fine-print copy if the user taps outside of it.
  • When editing a published story, the user should see the "Write edit summary" option in an expanded form by default.
Test Scenarios
  • Verify that the story title input field is automatically in focus when the user first navigates to the Wikistories publishing page.
  • Verify that the system displays an error message when a user attempts to publish a story without a title or with a pre-existing title also while displaying error message publish page layout adjusts to accommodate error messages.
  • Verify that an empty text box appears when the user taps on "Write edit summary".
  • Verify that the summary field remain opens and moves down if the user taps outside of it, and that it preserves the entered text.
  • Required logs are generated when users writes edit summary.
  • Test the layout correctly adapts for desktop usage.

Related Objects

StatusSubtypeAssignedTask
OpenNone
Resolvedhueitan

Event Timeline

SBisson edited projects, added Wikistories (R2); removed Wikistories.

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

[mediawiki/extensions/Wikistories@master] Edit summary field on publish story form

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

SBisson triaged this task as Medium priority.Jun 26 2023, 8:07 PM

Change 933093 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Edit summary field on publish story form

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

@hueitan Please see the gif findings below and let me know how to proceed, thanks!

Status:
Environment: Beta
OS: macOS Ventura
Browser: Chrome 116
Device: MBP
Emulated Device: iPhone 12 via Dev Tool
Test Link:
https://en.m.wikipedia.beta.wmflabs.org/wiki/Harry_Potter

✅ = PASS: Verify that the story title input field is automatically in focus when the user first navigates to the Wikistories publishing page.
✅ = PASS: Verify that the system displays an error message when a user attempts to publish a story without a title or with a pre-existing title also while displaying error message publish page layout adjusts to accommodate error messages.
✅ = PASS: Verify that an empty text box appears when the user taps on "Write edit summary".
❌ = FAIL: Verify that the summary field collapses and moves down if the user taps outside of it, and that it preserves the entered text.
❓ = More Info: Required logs are generated when users writes edit summary.

  • Did you mean in Special:Logs?
    2023-08-18_15-44-19.png (1×1 px, 258 KB)

✅ = PASS: Test the layout correctly adapts for desktop usage.

Mobile
❌ = FAIL: Cursor starts blinking within this text box
❌ = FAIL: When a user taps outside the "Write edit summary" field, the keyboard deactivates, and the text box collapses and moves down below the fine-print. It retains any text inputted during its activation.
gif

2023-08-18_15-21-56.mp4.gif (842×852 px, 744 KB)

Desktop
✅ = PASS: Cursor starts blinking within this text box
❌ = FAIL: When a user taps outside the "Write edit summary" field, the keyboard deactivates, and the text box collapses and moves down below the fine-print. It retains any text inputted during its activation.
gif

2023-08-18_15-35-07.mp4.gif (1×2 px, 1 MB)

❌ = FAIL: When a user taps outside the "Write edit summary" field, the keyboard deactivates, and the text box collapses and moves down below the fine-print. It retains any text inputted during its activation.

I think the collapses isn't necessary when tapping outside; if we do so, that means user can only see it when edit the field. User can manually toggle the field text box by clicking the label. @SGautam_WMF can you confirm again?

❓ = More Info: Required logs are generated when users writes edit summary.

It means the revision history
https://en.wikipedia.beta.wmflabs.org/w/index.php?title=Story:Universal_Studios&action=history

Mobile
❌ = FAIL: Cursor starts blinking within this text box

It does auto focus on edit summary field when you toggle it.

@hueitan Ok sounds good for the edit summary since I see it in the revision history below. That's fine with the autofocus on edit summary.

2023-08-21_09-32-53.png (1×3 px, 606 KB)

I think the collapses isn't necessary when tapping outside; if we do so, that means the user can only see it when edit the field. User can manually toggle the field text box by clicking the label. @SGautam_WMF can you confirm again?

I'll move this to sign off once he confirms.

@hueitan @GMikesell-WMF we can with the behavior of text box not collapsing when a user tap outside of it after finishing the edits.

Btw, @hueitan I noticed we still need to change the border color of story & edit summary text box fields as they still appear to me be in active stage while control is not over them. We can use #A2A9B1 for their border when control is not over them. I think this change can be done using our css tweaks so we can still move this task for design signoff column.

Screenshot_20230822-114752_Chrome.jpg (2×1 px, 122 KB)
Screenshot_20230822-114820_Chrome.jpg (2×1 px, 79 KB)

@hueitan @GMikesell-WMF we can with the behavior of text box not collapsing when a user tap outside of it after finishing the edits.

Btw, @hueitan I noticed we still need to change the border color of story & edit summary text box fields as they still appear to me be in active stage while control is not over them. We can use #A2A9B1 for their border when control is not over them. I think this change can be done using our css tweaks so we can still move this task for design signoff column.

Screenshot_20230822-114752_Chrome.jpg (2×1 px, 122 KB)
Screenshot_20230822-114820_Chrome.jpg (2×1 px, 79 KB)

Thanks @SGautam_WMF. Yes, we can do the css tweak with other styling update together. Move this to design sign off.

Note - Updated the task description to change the behavior of "Write edit summary" text box, instead of it collapsed it can now remain open once user interacts with it.