Page MenuHomePhabricator

[ICONS] Increase touch targets from 40x40 to 44x44
Closed, ResolvedPublic3 Story Points

Description

Most mobile guidelines suggest touch targets of at least 44x44dp.

In MF/AMC after changing all icons the click targets are currently 40x40 by accident.

Developer notes

Updating the icon sizes involves updating a variable value. This hopefully shouldn't impact other things, but as with all our other icon changes we've had so far we shouldn't be so confident :)

Details

Related Gerrit Patches:
mediawiki/skins/MinervaNeue : masterBump icon touch areas to 44x44
mediawiki/skins/MinervaNeue : masterFix touch targets in header
mediawiki/extensions/MobileFrontend : masterFix touch target height of search and editor close buttons
mediawiki/skins/MinervaNeue : masterFix touch target of section edit buttons
mediawiki/extensions/MobileFrontend : masterWatchstar: Apply rotation to image, not link
mediawiki/skins/MinervaNeue : masterAMC actions: Increase touch target size to 44px

Event Timeline

Esanders created this task.Aug 7 2019, 3:48 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 7 2019, 3:48 PM

Change 529595 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/skins/MinervaNeue@master] AMC actions: Increase touch target size to 44px

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

After above patch:

Change 529595 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] AMC actions: Increase touch target size to 44px

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

@alexhollender, this change seemed like a nice improvement to me so I merged it. If there are any issues on your end, please let me know.

Esanders updated the task description. (Show Details)Aug 12 2019, 3:54 PM

Change 529811 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/MobileFrontend@master] Watchstar: Apply rotation to image, not link

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

Change 529813 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/skins/MinervaNeue@master] Fix touch targets in header

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

After above patch:

Change 529811 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Watchstar: Apply rotation to image, not link

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

For completion, that's a success criterion for WCAG 2.1 level AAA.
We should always aim for 44 sp in one direction and 34 sp minimum in the other direction. 44 x 44 sp should be the optimum, but there might be design or technical limitations where it's necessary to break with that optimum.

This got merged so let's put this through design review asap...

Esanders updated the task description. (Show Details)Aug 20 2019, 1:09 PM

Change 531186 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/skins/MinervaNeue@master] Fix touch target of section edit buttons

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

3rd patch fixes section edits:

Niedzielski added a subscriber: Nirzar.

@Nirzar, please weigh in on Design's requirements when you can.

Change 531531 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/MobileFrontend@master] Fix touch target height of editor close button

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

Change 531558 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] WIP: Change the default behaviour for mw-ui-icon

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

@Nirzar, please weigh in on Design's requirements when you can.

Back to @alexhollender.

@alexhollender we'll also need some direction on what the exact preferred touch target size should be with 20px by 20px glyphs.

@Jdlrobson looks like @Volker_E specified the desired touch target sizes, which (if I'm understanding this correctly) don't change even when we reduce the icon size from 24px to 20px:

For completion, that's a success criterion for WCAG 2.1 level AAA.
We should always aim for 44 sp in one direction and 34 sp minimum in the other direction. 44 x 44 sp should be the optimum, but there might be design or technical limitations where it's necessary to break with that optimum.

Change 533111 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Remove icon hacks

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

ovasileva triaged this task as High priority.Aug 30 2019, 3:41 PM
alexhollender removed alexhollender as the assignee of this task.Sep 4 2019, 5:28 PM

In kick off we agreed to push this to the backlog. We will pull it back in when T229440 is ready to QA

ovasileva added a subscriber: ovasileva.

In kick off we agreed to push this to the backlog. We will pull it back in when T229440 is ready to QA

now moving to the brand new upcoming column

Change 531186 abandoned by Jdlrobson:
Fix touch target of section edit buttons

Reason:
Not needed any more since https://gerrit.wikimedia.org/r/533360 has landed.

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

After the latest icon fixes, most of these are now 40x40, which is just slightly below the recommended size. Was this a deliberate choice?

Change 531531 abandoned by Jdlrobson:
Fix touch target height of search and editor close buttons

Reason:
Taken care of in https://gerrit.wikimedia.org/r/537165

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

Change 537165 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] bump icon touch areas to 44x44

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

Jdlrobson renamed this task from Touch targets not large enough to Increase touch targets from 40x40 to 44x44.Sep 17 2019, 5:19 PM
Jdlrobson removed alexhollender as the assignee of this task.
Jdlrobson updated the task description. (Show Details)

Per standup we'll estimate this and treat as new work.

Jdlrobson renamed this task from Increase touch targets from 40x40 to 44x44 to [ICONS] Increase touch targets from 40x40 to 44x44.Sep 17 2019, 10:26 PM

Change 529813 abandoned by Jdlrobson:
Fix touch targets in header

Reason:
See https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/ /537165/

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

@ovasileva this should be in blocked on others. We talked about this during last estimation meeting (wednesday) and said all the other icon patches should be done before we consider bumping the size of the icons

ovasileva set the point value for this task to 3.Oct 1 2019, 4:26 PM

Change 537165 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Bump icon touch areas to 44x44

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

Took a look around, things seem to be fine.

ovasileva closed this task as Resolved.Oct 7 2019, 5:15 PM
ovasileva claimed this task.