Page MenuHomePhabricator

Click/Tap Targets on User and Page Actions Menu Item Links Should be Maximized
Closed, ResolvedPublic2 Estimated Story Points

Description

Steps to reproduce

  1. Login to the mobile site, enable advanced mode from your settings, and visit https://en.m.wikipedia.org/wiki/Barack_Obama
  2. Click or tap the user menu icon to open the user menu
  3. Click or tap on any edge (top, bottom, left or right) of one of the menu items

Also perform the preceding steps with the page actions overflow menu.

Expected results

  • I go to the page of the menu item I clicked on

Actual results

  • The menu closes and nothing happens.

With AMC mode enabled on the mobile site, there are user and page actions menus with menu items that are links. However, padding is applied to the li element instead of the a (link) element. This makes the tap/click target unintuitive and unnecessarily smaller than it should be. If a user taps the padding region, the menu will unexpectedly close and not go the user's desired action:

tap.gif (838×1 px, 654 KB)

User Menu padding

Screen Shot 2021-08-11 at 3.38.22 PM.png (1×2 px, 753 KB)

Page Actions Menu padding

Screen Shot 2021-08-11 at 3.38.45 PM.png (1×2 px, 704 KB)

Acceptance Criteria

  • The padding that is currently applied to the li element should be moved to the anchor or removed so that the entire menu item is tappable/clickable.

Developer Notes

Looks like this can be fixed by either removing the padding on li and setting a min-height/horizontal padding on the .toggle-list-item__anchor (this is how Vector does it) or by moving the padding on .toggle-list-item to .toggle-list-item__anchor in MenuListItem.less

Event Timeline

nray updated the task description. (Show Details)
nray removed nray as the assignee of this task.Aug 19 2021, 5:03 PM
nray updated the task description. (Show Details)
Jdlrobson added a subscriber: Jdlrobson.

I'll take this one while my knowledge of how to render standardized icon/buttons is fresh.

Change 720065 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] Fix the mw-ui-icon-with-label-desktop class

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

Change 720068 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Fixes Click/Tap Targets on User and Page Actions Menu Item

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

Change 720065 merged by jenkins-bot:

[mediawiki/core@master] Fix the mw-ui-icon-with-label-desktop class

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

cjming moved this task from Code Review to QA on the Readers-Web-Backlog (Kanbanana-FY-2021-22) board.
cjming added a subscriber: cjming.

Change 720067 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Standardize use of buttons and icons in Minerva

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

Jdlrobson added a subscriber: Edtadros.

Test wiki created on Patch Demo by Jdlrobson using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/8610247fb1/w/

Change 720067 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Standardize use of buttons and icons in Minerva

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

Change 720068 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Fixes Click/Tap Targets on User and Page Actions Menu Item

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

@Jdlrobson sorry for the delay, looks great