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.
| Comment | File | Size | Author |
|---|---|---|---|
| #16 | contexttuallinks_withoutpatch.jpg | 15.04 KB | shyamala |
| #16 | contexttuallinks_withpatch.PNG | 22.68 KB | shyamala |
| #13 | drupal-touch_contextual_links-1138844-12.patch | 2.74 KB | lewisnyman |
Comments
Comment #1
johnalbinComment #2
Bojhan commentedHmmm, always visible.
Comment #3
Everett Zufelt commentedI'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.
Comment #4
FreekyMage commentedTo 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?
Comment #5
alanburke commentedSo this might need something like #1033392: Script loader support in core (LABjs etc.) or modernizr.
Comment #5.0
alanburke commentedRemoving "meta" issue.
Comment #6
johnalbinI 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.
Comment #7
effulgentsia commentedI think that "Mobile first" for D8 implies that making things work on small device and touch devices are "major" tasks :)
Comment #8
stevesmename commentedI 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
Comment #9
robloachRelated: #1169906: Switch to jQuery UI Menu for the Contextual Links
Comment #10
shyamala commentedI 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.
Comment #11
moshe weitzman commentedThis is one of the main outstanding issues for Mobile. Seems like we have consensus on an approach. Anyone care to make a patch?
Comment #12
lewisnymanNow 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.
Comment #13
lewisnymanThis 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!
Comment #14
nod_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.
Comment #15
jibranWorks perfectly on my android.
Comment #16
shyamala commentedNot 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.
Comment #17
moshe weitzman commented@shymala. you might have to clear cache if you have css aggregation enabled. just a guess.
Comment #18
lewisnymanActually 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.
Comment #19
moshe weitzman commentedVerified to work as designed in iOS Simulator. Thanks Lewis.
Comment #20
jessebeach commentedTested on Android 4.1 with success.
Let's get this in! It's a simple fix.
Comment #21
dries commentedCommitted to 8.x. Thanks.
Comment #22.0
(not verified) commentedNote that A11y issue needs to be tracked.