Page MenuHomePhabricator

Edit Check: Review the Bottom Sheet + Keyboard behavior
Closed, ResolvedPublic

Description

Background

On mobile, when selecting the icon to display the Bottom Sheet, the keyboard collapses, requiring the user to click the text again to reopen it. Then, when the keyboard and Bottom Sheet are displayed simultaneously, it’s impossible to read and edit the article. And, if the Bottom Sheet is collapsed, both it and the keyboard collapse, requiring the user to start the process over by clicking the warning icon again.

keyboard + bottom sheet.gif (512×230 px, 235 KB)

Expected behavior

    1. In mid-edit checks
  1. Whenever the keyboard is opened:
    • The bottom sheet is closed/hidden
    • The check remains highlighted
  2. Whenever the sidebar icon is clicked
    • The bottom sheet is opened (always expanded)
    • The keyboard is hidden
  3. The bottom sheet is never collapsed (but can be closed/hidden)
    1. In pre-save checks
  1. The keyboard is never visible (no chnage)
  2. The bottom sheet is always visible (no change)
    • It can be collapsed when expanded
    • It can be expanded when collapsed
NOTE: this is a high priority for us to fix before the start of the a/b test.

Acceptance criteria (or Done)

  • Implement the expected behavior

Event Timeline

bmartinezcalvo updated the task description. (Show Details)
bmartinezcalvo updated the task description. (Show Details)

I can't reproduce this - the edit check card disappears whenever I focus the surface.

ppelberg added a subscriber: Esanders.

Assigning this over to Bárabara to see if she can reproduce this issue using the ecenable=2 URL parameter. E.g. https://en.wikipedia.org/w/index.php?title=Lemon&veaction=edit&ecenable=2 .

This task still needs to be reviewed. Sharing how it currently works (Google Chrome in Android device).

Expected behavior:

  1. When the keyboard is open and the user selects the Check:
    • The bottom sheet is displayed.
    • The keyboard is hidden.
    • The bottom sheet should always expand fully so the user can easily view the information from the Check.
  2. When the Check is expanded and the user starts typing:
    • The keyboard opens.
    • The bottom passes from expanded to collapsed, allowing the user to type while keeping the Check available but not distracting.
  3. When the user clicks the Check icon (trigger), the bottom sheet should always expand.
    • If the bottom sheet was not displayed, it appears.
    • If the bottom sheet was collapsed, it expands.

Expected behavior:

  1. When the keyboard is open and the user selects the Check:
    • The bottom sheet is displayed.

This already behaves as expected for me

  • The keyboard is hidden.

This already behaves as expected for me

  • The bottom sheet should always expand fully so the user can easily view the information from the Check.

This needs to be fixed, an is the same as (3) below

  1. When the Check is expanded and the user starts typing:
    • The keyboard opens.

The user can't start typing unless the keyboard is already open.

  • The bottom passes from expanded to collapsed, allowing the user to type while keeping the Check available but not distracting.

The check is fully hidden when the keyboard is opened, which is as expected

  1. When the user clicks the Check icon (trigger), the bottom sheet should always expand.
    • If the bottom sheet was not displayed, it appears.
    • If the bottom sheet was collapsed, it expands.

See above.

The complexity here is coming from collapsing the edit check in mid-edit. I think this functionality should never have existed and got copied over from the pre-save moment without consideration.

We've ended up with three states where two would suffice:

  1. Keyboard is visible (no edit check sheet can be visible in this state, collapsed or expanded)
  2. Check is visible and expanded
  3. Check is visible and collapsed

In mid edit checks, as it is possible for the keyboard to be visible, state (3) seems unnecessary, and indeed this is how the context bottom sheet behaves (e.g. for links). You can only close it, not collapse it. If you want to get back to a check you can use the icon in the sidebar.
In pre-save checks, as it is impossible for the keyboard to be visible, and we don't show the sidebar, this is where we use states (2) and (3) only. The check dialog is always visible in some for but we allow users to collapse it if they want to see more of the document.

We should change mid-edit checks to use a close button instead of a collapse button, and then all the issues above will be resolved.

Change #1211074 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/VisualEditor@master] Show a close button for mid-edit checks, instead of a collapse button

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

Change #1211074 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Show a close button for mid-edit checks, instead of a collapse button

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

Ryasmeen edited projects, added Verified; removed Editing QA.