Page MenuHomePhabricator

Media Search: Selected state of filter text should stay blue
Closed, ResolvedPublic

Description

When hovering on a selected state in the filters on Media Search, the text color is shifting back and forth between black and blue. It should always remain blue.

Link to gif showing this issue: https://files.slack.com/files-pri/T012JBDTTHA-F027YPWDUP5/selected_menu_item_color.gif

(Gif not uploading to Phab)

Event Timeline

@mwilliams I have implemented the changes that you suggested, but while testing it, it seems to be that this was done on purpose to provide a visual clue to users on the currently selected entry (if you use the keyboard only to navigate, the active entry will not change).

https://www.loom.com/share/9ba8b6d6b279495a99c5c3663b35e60d

@SimoneThisDot Good catch. I incorrectly described the bug in the ticket description, apologies. Let me try again and if it makes sense I'll update the main description of this ticket.

Currently, on Media Search, the text of an active selection is blue. There is no hover state activated in this screenshot and it switches to black once you start to hover/interact with the dropdown selections.

Screen Shot 2021-07-28 at 11.10.35 AM.png (414×350 px, 117 KB)

The active state should have a blue background and the only time that the text should be blue is on hover, exactly like the OOUI implementation found here.

Thank you for the answer Matthew...

I was able to review this a big further, and I realised that the current implementation is actually done on purpose. (i have done a small video to explain),but overall:

  • The the dropdown is first clicked, the first entry is blue because it is actually active
  • as soon as the mouse hover on any other entry, the blue is lost as that entry is not active anymore
  • If navigating with the keyboard, the blue one is the active entry, and going up and down will start navigation from the selected/active entry.

Only question that we should answer right now is:

  • When I move away from the dropdown with the mouse, the active state is removed all together, and reopening the dropdown will NOT show the blue text (active) on the selected entry. My suggestion would be to always re-state the focus to the Selected entry when the dropdown is open.

https://www.loom.com/share/adb4fae97c8c482ca6da7aed5e687208?focus_title=1&muted=1&from_recorder=1

Thanks for looking into this further @SimoneThisDot, your explanation makes sense.
I agree that we should always re-state the focus to the selected entry as you have suggested.

Change 715004 had a related patch set uploaded (by Simone Cuomo; author: Simone Cuomo):

[mediawiki/extensions/MediaSearch@master] Media Search: Selected state of filter text should stay blue

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

Change 715004 merged by jenkins-bot:

[mediawiki/extensions/MediaSearch@master] Media Search: Selected state of filter text should stay blue

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

Etonkovidova subscribed.

My suggestion would be to always re-state the focus to the Selected entry when the dropdown is open.

https://www.loom.com/share/adb4fae97c8c482ca6da7aed5e687208?focus_title=1&muted=1&from_recorder=1

Checked on commons beta - works as expected.