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.

Files: 
CommentFileSizeAuthor
#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 ]

Comments

Title:Add Support for Touch Screen DevicesAdd touch support to contextual links
Issue tags:+mobile

Hmmm, always visible.

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.

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?

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

Issue summary:View changes

Removing "meta" issue.

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.

Priority:Normal» Major

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

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 http://drupal.org/project/spark

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.

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?

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.

StatusFileSize
new2.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!

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.

Works perfectly on my android.

StatusFileSize
new22.68 KB
new15.04 KB

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.

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

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.

Status:Needs review» Reviewed & tested by the community

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

Tested on Android 4.1 with success.

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

Status:Reviewed & tested by the community» Fixed

Committed to 8.x. Thanks.

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

Issue summary:View changes

Note that A11y issue needs to be tracked.