Page MenuHomePhabricator

[Bug] Search icon has no visual indication that it's a button on small screens
Closed, ResolvedPublic0.5 Estimated Story Points

Description

Steps to Reproduce

  1. Visit https://en.m.wikipedia.org/wiki/Barack_Obama
  2. Shrink the screen width to less than 720px.
  3. Move the mouse over the search icon.

Expected Results

  • The mouse cursor is a hand indicating that the button is clickable

Actual Results

  • The mouse cursor is a pointer and the search icon does not look like a button

Environments Observed

  • Minerva prod enwiki

Browser Version

  • Chromium v69.0.3497.81

OS Version

  • Ubuntu v18.04 64b

Device Model

  • Desktop

Device Language

  • English

QA Instructions

Environment: staging
Browser & device: desktop, all browsers
Skin: Minerva
Steps:

  • Go to any page on staging
  • Make your screen less than 720px wide
  • Mouse over the search icon and make sure that the cursor changes to the click hand, rather than the black pointer

Event Timeline

Restricted Application changed the subtype of this task from "Deadline" to "Task". · View Herald TranscriptSep 24 2018, 6:42 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Change 462559 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Buttons should be cursor pointer by default

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

Jdlrobson added a subscriber: Jdlrobson.

It's because we optimised this for touch devices. This keeps coming up in some form (T197105, T126387, T145493, T197105#4283320). This is easy enough to fix it's just never been prioritised and likely never will be. I'm just going to be bold and submit a patch to fix these issues.

In future, please also feel empowered to post patches for this kind of thing I will happily review!

Change 462559 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Buttons should be cursor pointer by default

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

Jdlrobson added subscribers: alexhollender, Volker_E.

This was such a trivial task, I just did it (and @Volker_E merged).

@alexhollender I've loaded the code on https://reading-web-staging.wmflabs.org - can you check the behaviour there and resolve if you're satisfied?

ovasileva set the point value for this task to 0.5.Sep 25 2018, 4:08 PM

hmm, so there is no gap between the buttons, and the buttons don't have hover states (aside from the cursor) so there is no feedback when you transition between the click-zone of one to the other. Not a big deal at all, but while we're doing touch-ups I wonder if we should address that? I think the easiest, unsystematic, way to solve this would be to add some kind of hover-state for these buttons (which is something we have for OOUI buttons), as in:

hmm, so there is no gap between the buttons, and the buttons don't have hover states (aside from the cursor) so there is no feedback when you transition between the click-zone of one to the other. Not a big deal at all, but while we're doing touch-ups I wonder if we should address that? I think the easiest, unsystematic, way to solve this would be to add some kind of hover-state for these buttons (which is something we have for OOUI buttons), as in:

Sounds good. I've opened T205575 to capture that as it's a little more complicated than this one. Is this card good to resolve?