This task involves the work of introducing a new prompt/call to action that invites someone acting on/implementing a change via Suggestion Mode for the first time to proceed to publishing said change.
If successful, the UX this task introduces will cause newcomers to be more likely to publish their first suggestion rather than abandoning the interface.
User stories
As a newcomer using Suggestion Mode for the first time, I want to be prompted with a clear call to action once I've completed my first suggestion, so that I understand I can publish my change right away and feel confident doing so rather than wondering whether there might be something else I need to do.
Requirements
Meta
- The prompt is shown only after a user completes their first suggestion in Suggestion Mode (it does not reappear on subsequent completions).
Open questions
- What happens when someone navigates away from this either with navigating to other suggestion or clicking outside?
- If you click outside, it doesn’t close
- If you click on other suggestion, it closes
Design proposal
Prototype
https://bmartinezcalvo.github.io/suggestion-mode/explorations/
Content of the card / bottom sheet with publish prompt
- Start icon: cdxIconSuccess en @color-icon-success
- Title: Suggestion completed!
- Description: Your change is ready to go live on Wikipedia. Publish it now or keep finding more improvements.
- Buttons:
- View more suggestions: it will automatically navigates and scroll to next suggestion available
- Publish: it will open the Publish Dialog
Expected behavior
- After a user completes their first suggestion, a publish prompt will appear alongside the success feedback (which will be implemented in T404607). Both success feedback and publish prompt will be shown at the same time.
- The card/bottom sheet of that completed suggestion will transitions to a success state including the publish prompt and appearing in the same position as the suggestion card completed.
- This publish prompt will non-dismissible by clicking outside (in either desktop or mobile), so users can't accidentally close it without making a deliberate choice. The only way to close it is by actively tapping in either Publish or View more suggestions to navigate to the next suggestion (which opens that suggestion's card/bottom sheet), or tapping the × to explicitly dismiss it.
 |  |
| desktop | mobile: it appears after 200ms the suggestion is completed, sliding up from the bottom |
Acceptance criteria (or Done)
Design
- Explore possible solutions and decide on the best approach
Implementation
- Implement decided solution
Derived Requirements
Ensure that when a newcomer completes their first suggestion in VisualEditor Suggestion Mode, a success card or mobile bottom sheet displays the message “Suggestion completed!” alongside the success feedback, explains that the change is ready to publish, and provides Publish and View more suggestions actions. The prompt must appear in the completed suggestion's position, remain open when the user clicks outside it, and be dismissible only through an explicit dismissal control where available or by selecting either action; Publish opens the Publish dialog, while View more suggestions navigates to and scrolls to the next available suggestion. The prompt must not reappear after subsequent suggestion completions.
Test Steps
Test Case 1: Verify the publish prompt appears after completing the first suggestion
- Open the Patchdemo test page.
- Ensure Suggestion Mode is enabled.
- Confirm that the publish prompt is not displayed before completing a suggestion.
- Open the first available suggestion.
- Complete the suggestion using its recommended action.
- Observe the completed suggestion card and success feedback.
- Repeat on mobile using an eligible first-time test account.
- ✅❓❌⬜ AC1: Completing the first suggestion displays the publish prompt alongside the success feedback on desktop and mobile.
Test Case 2: Verify the publish prompt content and appearance on desktop
- Open the Patchdemo test page in desktop VisualEditor with Suggestion Mode enabled.
- Locate and open the first available suggestion.
- Complete the suggestion.
- Verify that the original suggestion card transitions into a success card in the same position.
- Verify that the card displays a green success header and success icon.
- Verify the title displays Suggestion completed!
- Verify the description displays Your change is ready to go live on Wikipedia. Publish it now or keep finding more improvements.
- Verify the buttons display View more and Publish.
- ✅❓❌⬜ AC2: The desktop success card replaces the completed suggestion card in the same position and displays the approved success styling, title, description, and action buttons.
Test Case 3: Verify the publish prompt appears in the mobile bottom sheet
- Open the Patchdemo test page in mobile VisualEditor using iPhone 17 Pro Max emulation.
- Ensure Suggestion Mode is enabled.
- Open and complete the first available suggestion.
- Observe the success feedback and publish prompt.
- Verify that the bottom sheet transitions into the success state.
- Verify that the publish prompt slides up from the bottom approximately 200 milliseconds after completing the suggestion.
- Verify that the success title, description, and action buttons are displayed.
- ✅❓❌⬜ AC3: The mobile success bottom sheet appears with the expected content and slide-up transition after the first suggestion is completed.
Test Case 4: Verify clicking outside does not dismiss the desktop publish prompt
- Open the Patchdemo test page in desktop VisualEditor.
- Complete the first available suggestion.
- Verify that the success card is displayed.
- Click outside the success card without selecting Publish or View more.
- Observe whether the success card remains visible.
- ✅❓❌⬜ AC4: Clicking outside the desktop publish prompt does not dismiss it.
Test Case 5: Verify tapping outside does not dismiss the mobile publish prompt
- Open the Patchdemo test page in mobile VisualEditor using iPhone 17 Pro Max emulation.
- Complete the first available suggestion.
- Verify that the success bottom sheet is displayed.
- Tap outside the bottom sheet without selecting an action.
- Observe whether the bottom sheet remains visible.
- ✅❓❌⬜ AC5: Tapping outside the mobile publish prompt does not dismiss it.
Test Case 6: Verify Publish opens the Publish Dialog
- Open the Patchdemo test page in VisualEditor with Suggestion Mode enabled.
- Complete the first available suggestion.
- Verify that the publish prompt is displayed.
- Select Publish.
- Verify that the Publish Dialog opens for the pending change.
- Repeat on mobile using a separate eligible test account.
- ✅❓❌⬜ AC6: Selecting Publish opens the Publish Dialog on desktop and mobile.
Test Case 7: Verify View more navigates to the next available suggestion
- Open the Patchdemo test page in VisualEditor with Suggestion Mode enabled.
- Ensure another available suggestion exists after the first suggestion.
- Complete the first suggestion.
- Select View more or the approved equivalent mobile action.
- Verify that the success prompt closes.
- Verify that VisualEditor automatically scrolls to the next available suggestion.
- Verify that the next suggestion's card or bottom sheet opens.
- Repeat on mobile using a separate eligible test account.
- ✅❓❌⬜ AC7: Selecting the View more action closes the success prompt, scrolls to the next available suggestion, and opens its card or bottom sheet on desktop and mobile.
Test Case 8: Verify the mobile dismissal control
- Open the Patchdemo test page in mobile VisualEditor using iPhone 17 Pro Max emulation.
- Complete the first available suggestion.
- Verify that the success bottom sheet is displayed.
- Locate the × dismissal button.
- Tap ×.
- Observe whether the success bottom sheet closes.
- ✅❓❌⬜ AC8: Selecting × explicitly dismisses the mobile publish prompt.
Test Case 9: Verify the desktop prompt does not display a dismissal control
- Open the Patchdemo test page in desktop VisualEditor.
- Complete the first available suggestion.
- Inspect the success card.
- Verify that View more and Publish are displayed.
- Verify that no × dismissal button is displayed.
- ✅❓❌⬜ AC9: The desktop success card provides the two approved action buttons without an × dismissal control.
Test Case 10: Verify navigating directly to another suggestion dismisses the prompt
- Open the Patchdemo test page in VisualEditor with Suggestion Mode enabled.
- Complete the first available suggestion.
- Verify that the success prompt is displayed.
- Without selecting View more or Publish, navigate directly to another available suggestion using the editor's navigation controls, if accessible.
- Verify that the success prompt closes and the selected suggestion is displayed.
- Repeat on mobile if direct suggestion navigation is available.
- ✅❓❌⬜ AC10: Navigating directly to another available suggestion closes the success prompt and displays the selected suggestion.
Test Case 11: Verify the publish prompt does not reappear after subsequent suggestions
- Open the Patchdemo test page in VisualEditor with Suggestion Mode enabled.
- Complete the first available suggestion and verify that the publish prompt appears.
- Select View more to navigate to the next suggestion.
- Complete the second suggestion.
- Verify that the first-completion publish prompt does not reappear.
- Exit and reopen VisualEditor using the same account.
- Complete another available suggestion.
- Verify that the first-completion publish prompt does not reappear.
- Repeat the applicable steps on mobile using an eligible test account.
- ✅❓❌⬜ AC11: The publish prompt appears only after the user's first completed suggestion and does not reappear after subsequent completions, including across editing sessions if first-completion state is intended to persist.
QA Results - PatchDemo
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T432622#12427824 |
| 2 | ❓ | T432622#12427824 |
| 3 | ✅ | T432622#12427824 |
| 4 | ✅ | T432622#12427824 |
| 5 | ✅ | T432622#12427824 |
| 6 | ✅ | T432622#12427824 |
| 7 | ❌ | T432622#12427824 |
| 8 | ❌ | T432622#12427824 |
| 9 | ✅ | T432622#12427824 |
| 10 | ❓ | T432622#12427824 |
| 11 | ✅ | T432622#12427824 |
