Page MenuHomePhabricator

Update highlight, selection and focus behaviour in VE template dialog
Closed, ResolvedPublic

Description

Definitions:
Blue background, blue text highlight = selected
Gray background, black text highlight = hover

Requirements per sidebar element

Template names (thus, only multi-part transclusions):

  • Only has blue highlight when selected (with click, enter, or spacebar). No blue highlight when the user has selected other elements, even within the same template.
  • Gray highlight on hover (existing behavior)
  • Blue outline on focus when tabbed to (existing behavior)

Parameters:

  • Has blue highlight when selected (with click on name, click in checkbox, and with click or enter into field in the content pane, or spacebar)
  • Gray highlight on hover (when not selected)
  • Gray highlight on focus, when navigated to within the parameter list using keyboard nav (existing behavior)

Wikitext:

  • Blue highlight when selected (existing behavior)
  • Gray highlight on hover (existing behavior)
  • Blue outline on focus when tabbed to (existing behavior)

Search within template field:

  • Typing into the search field removes any selections and associated highlights --> 810019

General:

  • Ignore hover when already selected - only display selected blue highlight (follow OOUI behavior)
  • Follow OOUI behaviour (Continuous outlined booklet dialog (aside navigation)) for case of hover via keyboard navigation and mouse: Keep background color and text color for selected. 810952

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Lena_WMDE updated the task description. (Show Details)

Change 809835 had a related patch set uploaded (by Awight; author: Awight):

[mediawiki/extensions/VisualEditor@master] [WIP] Experiment with highlight vs select

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

Change 809883 had a related patch set uploaded (by Awight; author: Awight):

[mediawiki/extensions/VisualEditor@master] [WIP] Select parameters like templates

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

awight subscribed.

Change 809988 had a related patch set uploaded (by Andrew-WMDE; author: Andrew-WMDE):

[mediawiki/extensions/VisualEditor@master] Fix gray highlighting for parameters

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

Change 809883 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Select parameters like templates

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

Change 810019 had a related patch set uploaded (by Andrew-WMDE; author: Andrew-WMDE):

[mediawiki/extensions/VisualEditor@master] Remove highlighting when entering a search field

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

Clicking into the search field removes any selections and associated highlights

Just to mention one implication that came to my mind while reviewing this:

  • When the user selects a template and then tabs down to the buttons to remove it, the selection will be lost on the way when entering the search field.

Or should the deselection only be done when clicking into the search field?
Or should the deselection only happen when the user actually types something into the search field?

Change 809988 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Fix gray highlighting for parameters

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

  • Ignore hover when already selected - only display selected blue highlight (follow OOUI behavior)

This is not working for template names when I test locally. They get a grey background when hovering instead of staying blue. For parameter this is working as required.

Change 810952 had a related patch set uploaded (by Svantje Lilienthal; author: Svantje Lilienthal):

[mediawiki/extensions/VisualEditor@master] No highlight for selected template names

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

Clicking into the search field removes any selections and associated highlights

Just to mention one implication that came to my mind while reviewing this:

  • When the user selects a template and then tabs down to the buttons to remove it, the selection will be lost on the way when entering the search field.

Or should the deselection only be done when clicking into the search field?
Or should the deselection only happen when the user actually types something into the search field?

Good point! I would do your second option, so that it works for both users using a mouse and keyboard nav. Will update the task description now.

lilients_WMDE moved this task from Doing to Tech Review on the WMDE-TechWish-Sprint-2022-06-22 board.

I am working on this:

  • Typing into the search field removes any selections and associated highlights
lilients_WMDE claimed this task.
lilients_WMDE updated the task description. (Show Details)
lilients_WMDE moved this task from Tech Review to Doing on the WMDE-TechWish-Sprint-2022-06-22 board.

Change 810019 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Remove highlighting when typing in a search field

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

I still see some two things that might be off:

  • Parameters have grey background but blue text when moving over the list with the keyboard.
  • Template names/Wikitext have no grey background when tabbing - but maybe that's fine.

Change 810952 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] No highlight for selected template names

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

I still see some two things that might be off:

  • Parameters have grey background but blue text when moving over the list with the keyboard.
  • Template names/Wikitext have no grey background when tabbing - but maybe that's fine.

Agree fixing both of these things would make the styling consistent with mouse navigation. I think the blue text is particularly noticeable.

Change 812243 had a related patch set uploaded (by WMDE-Fisch; author: WMDE-Fisch):

[mediawiki/extensions/VisualEditor@master] Add grey background when buttons are in focus

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

Template names/Wikitext have no grey background when tabbing - but maybe that's fine.

Fixed in https://gerrit.wikimedia.org/r/812243

Parameters have grey background but blue text when moving over the list with the keyboard.

Is free for grabs

@ECohen_WMDE I wanted to confirm that the text I've struck-through here was just a typo?

image.png (69×905 px, 9 KB)

We talked about how selection and highlighting is currently working in our approach and compared it to the OOUI version, where mouse hover and key navigation are the same thing. There is only one at a time (meaning they "steal" from each other). Maybe that would be a cleaner solution for us as well, @ECohen_WMDE?

This could be reached if we try to move towards using more of the original SelectWidget and move our checkbox functionality out. We created an investigation ticket to look into this.

Another advantage is that we would be able to differentiate between selected (blue background) and cursor (grey) also in the keyboard interaction. So mouse and key interactions would behave the same.

Change 812435 had a related patch set uploaded (by WMDE-Fisch; author: WMDE-Fisch):

[mediawiki/extensions/VisualEditor@master] Differ between setting and highlighting a parameter

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

Change 812243 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Add grey background when buttons are in focus

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

FYI:

[mediawiki/extensions/VisualEditor@master] Differ between setting and highlighting a parameter

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

Also fixes:

Parameters have grey background but blue text when moving over the list with the keyboard.

@ECohen_WMDE I wanted to confirm that the text I've struck-through here was just a typo?

@awight You're right! That should say enter instead of tab, I can update the task

We talked about how selection and highlighting is currently working in our approach and compared it to the OOUI version, where mouse hover and key navigation are the same thing. There is only one at a time (meaning they "steal" from each other). Maybe that would be a cleaner solution for us as well, @ECohen_WMDE?

@lilients_WMDE I don't think I'm fully understanding from a text description, though it sounds promising. Let's discuss and maybe you can show me what you mean?

I made a screencast of the behaviour I talked about. Hope that helps.

Peek 2022-07-11 11-02.gif (517×983 px, 208 KB)

@lilients_WMDE So you can only have one mouse or keyboard "hover" at a time? This looks good to me and happy to follow this pattern set by OOUI.

This could be reached if we try to move towards using more of the original SelectWidget and move our checkbox functionality out. We created an investigation ticket to look into this.

I'm not sure what this means since they should remain checkboxes, but I have a feeling you are mentioning something more behind the scenes right?

So you can only have one mouse or keyboard "hover" at a time? This looks good to me and happy to follow this pattern set by OOUI.

Yes! Great.

I'm not sure what this means since they should remain checkboxes, but I have a feeling you are mentioning something more behind the scenes right?

Yes, that was for devs eyes mainly. Sorry. :D

Added a small regression: spacebar to add a parameter causes a highlight but should not.

Change 812435 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Differ between setting and highlighting a parameter

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

Added a small regression: spacebar to add a parameter causes a highlight but should not.

I would argue towards leaving the blue highlight, because the other elements (wikitext and template title) have the same behaviour on space bar: blue higlight and scroll to top on the content pane.

@ECohen_WMDE Could you help clear this up? Blue background on spacebar for parameters or not? :) Maybe you can check of the epic is up to date. I tried to consolidate some tickets there. Hope I got that corretly.

awight updated the task description. (Show Details)

@lilients_WMDE @awight I discussed with @ECohen_WMDE and updated the task to say that parameters should have blue background on spacebar.

Change 815239 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Template dialog: Make blue selection color transparent

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

Change 815239 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Template dialog: Make blue selection color transparent

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

Change 815909 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Tab to first template parameter in list, not to the selection

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

Change 815909 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Tab to first template parameter in list, not to the selection

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

Change 809835 abandoned by Thiemo Kreuz (WMDE):

[mediawiki/extensions/VisualEditor@master] [WIP] Experiment with highlight vs select

Reason:

T311204 is resolved. Should be obsolete.

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

Change 822076 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Move gray highlight of template items before blue active rect

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

Change 822076 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Move gray highlight of template items before blue active rect

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