Contextual links are currently based off hover events. These aren't well supported on touch screen devices.

Hopefully an easy fix, we can take a leaf out of WordPresses book and make these contextual links always visible on touch screens.

We'll need to track the progress on #849926: links wrapped in .contextual-links-wrapper divs are not accessible at all via keyboard alone also problems with screen readers as that is touching the same code.

#16 contexttuallinks_withoutpatch.jpg15.04 KBShyamala
#16 contexttuallinks_withpatch.PNG22.68 KBShyamala
#13 drupal-touch_contextual_links-1138844-12.patch2.74 KBLewisNyman
PASSED: [[SimpleTest]]: [MySQL] 49,325 pass(es). View
Members fund testing for the Drupal project. Drupal Association Learn more


JohnAlbin’s picture

Title: Add Support for Touch Screen Devices » Add touch support to contextual links
Issue tags: +mobile
Bojhan’s picture

Hmmm, always visible.

Everett Zufelt’s picture

I'm not sure what I think about always visible. This would ned to be a configurable setting per user. E.g. I like interacting w/ my site on a mobile device, but hate seeing those stupid links everywhere.

Perhaps whatever solution we brainstorm here can also solve the accessibility problem with contextual links, see #849926: links wrapped in .contextual-links-wrapper divs are not accessible at all via keyboard alone also problems with screen readers.

FreekyMage’s picture

To solve this we would basicly need something like Modernizr to see if the user is using a touch device. Put it would be kinda wrong to put that in core, no?

alanburke’s picture

So this might need something like #1033392: Script loader support in core (LABjs etc.) or modernizr.

alanburke’s picture

Issue summary: View changes

Removing "meta" issue.

JohnAlbin’s picture

I think we should make the gear icon always visible. And it should have a nice fat-finger-friendly clicking area that makes the drop-down appear when tapped. I don't really see a reason to use a different mechanism for desktop browsers if we go with that solution.

effulgentsia’s picture

Priority: Normal » Major

I think that "Mobile first" for D8 implies that making things work on small device and touch devices are "major" tasks :)

stevesmename’s picture

Priority: Major » Normal

I like #6 idea but I think this may get bulky in design. A suggestion I would add is the ability to display the gear icons or not, maybe the logged in administrator clicks "Administer Page" and then the gear icons appear. This may also fit better with the editing features that are being developed by

RobLoach’s picture

Shyamala’s picture

Issue tags: +Responsive Design

I am in agreement with #6. Moving away from hover to a unified solution across devices is the direction that we should take. Since contextual links are beneficial for an admin, they must be available upfront in both mobile and desktop. There could be a global turn on/off switch link the "Administer page" option in Spark. A large bulky icon that displays the contextual links on tap action.

In article pages where the main actions are edit and delete, bringing these contextual links upfront with a more button for more contextual links would be ideal. This is an approach used by gmail mobile web experience.

moshe weitzman’s picture

Issue tags: -mobile, -Responsive Design

This is one of the main outstanding issues for Mobile. Seems like we have consensus on an approach. Anyone care to make a patch?

LewisNyman’s picture

Now that we have Modernizr in core, it's easy to work in some conditional styling for touch. I'll give this a crack this weekend, if it's easy I'll try increasing the target size for touch.

LewisNyman’s picture

2.74 KB
PASSED: [[SimpleTest]]: [MySQL] 49,325 pass(es). View

This patch shows the trigger links on touch devices and disables all hover actions. You can now reach the conditional links with one tap instead of 3!

nod_’s picture

Status: Active » Needs review

Well, that was easy.

Looked around and the :hover style does need to be scoped with .no-touch so it's all good for me.

(edit) if someone with an iphone can try, happy to RTBC afterwards.

jibran’s picture

Works perfectly on my android.

Shyamala’s picture

Not sure what I am doing wrong, the contextual links work before and after I apply the patch, there is also no visible increase in touch area before and after patch.

moshe weitzman’s picture

@shymala. you might have to clear cache if you have css aggregation enabled. just a guess.

LewisNyman’s picture

Actually the above patch does not contain any css to increased the touch target size of the elements. It only displays the trigger link (cog) by default and removes a ton of hover actions that require you to tap the element several times on a touch screen to reveal the contextual links.

moshe weitzman’s picture

Status: Needs review » Reviewed & tested by the community

Verified to work as designed in iOS Simulator. Thanks Lewis.

jessebeach’s picture

Tested on Android 4.1 with success.

Let's get this in! It's a simple fix.

Dries’s picture

Status: Reviewed & tested by the community » Fixed

Committed to 8.x. Thanks.

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

Note that A11y issue needs to be tracked.