Make WordPress Core

Opened 9 years ago

Last modified 12 days ago

#30575 assigned defect (bug)

Twenty Fourteen: Submenu items on dropdown menus nearly impossible to select on some Android mobile tablets

Reported by: zoonini's profile zoonini Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.0.1
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: javascript Cc:

Description

On larger Android tablets, it's next to impossible select a submenu item from the dropdown menu, since it appears too quickly to be tapped.

Replicated on Twenty Fourteen demo site using:

  • Samsung Galaxy note 10.1 2014 edition, running Android 4.4.2, using the "Browser" app and Chrome. Tester noted that "When I use my stylus, I am able to hover over the menus so I can choose the correct one."
  • Nexus 7 in landscape mode, Android 4.4.2, Chrome

Screencast: https://cloudup.com/imicb2EvVyc

This does not seem to affect the mobile menu, which kicks in at smaller screen sizes, such as the Nexus 7 in portrait mode. It only affects screen sizes at which the regular dropdown menu is displayed.

Reported in this forum thread

Attachments (4)

30575.patch (921 bytes) - added by rdd 8 years ago.
Adds the javascript to functions.js so that the dropdown menu works on tablets/touch devices
functions.patch (2.2 KB) - added by agkozak 8 years ago.
Patch to Twenty Fourteen's functions.js
new_functions.patch (1.9 KB) - added by agkozak 8 years ago.
Patch for Twenty Fourteen dropdown menus that works with tabbing (a11y)
#30575.patch (1.1 KB) - added by rehanali 2 years ago.
Added patch

Download all attachments as: .zip

Change History (19)

#1 @lancewillett
9 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release

Thanks for the report. :)

#2 @davidakennedy
8 years ago

I'm almost positive this has to do with the 300ms delay on touch in many touch devices.

See: http://www.sitepoint.com/5-ways-prevent-300ms-click-delay-mobile-devices/

Some folks are working on a path for _s that may be of use here and in other default themes once the details are ironed out. See: https://github.com/Automattic/_s/pull/900

@rdd
8 years ago

Adds the javascript to functions.js so that the dropdown menu works on tablets/touch devices

#4 @karmatosed
8 years ago

  • Keywords has-patch needs-testing added; needs-patch removed

#5 @rdd
8 years ago

I've applied the patch at http://twentyfourteen.wptestblog.nl
It works on my own iPad and in the iOS simulator, also made a screen recording of that: https://youtu.be/CWtAD69_Z5U
If someone else could test it on an android tablet, that would be nice :)

#6 @karmatosed
8 years ago

  • Owner set to davidakennedy
  • Status changed from new to assigned

#7 @agkozak
8 years ago

On an Acer Iconia W3 running Windows 10:

  • Chrome 50 - the patch works as intended.
  • Edge 25 and IE 11 - the menus drop down, but I've only got a split second to choose a Level 2 item before the Level 1 page loads. With great dexterity and planning, I can get to Level 3.
  • Firefox 46 - as with Edge and IE, I can get the menus to drop down, but the Level 1 page always loads, no matter how quick I am.

#8 @agkozak
8 years ago

Richard,

Your patch has an unintended side effect -- on my iPad, in portrait mode, the mobile menu now also requires two clicks for parent menu items. I think that the patch can be fixed if you surround it with a condition testing for the mobile menu breakpoint width -- that way the patch only applies to the dropdown menu.

#9 @davidakennedy
8 years ago

Hey @rdd,

Your patch is a solid start. Thanks for working on it! Here's some feedback:

  • It works well for the most part, and I don't see many side effects.
  • I'd probably replace the $('body') selector with $( document.body ). No real performance gain there, but it makes it consistent with the same bit of code in Twenty Sixteen. That means it may be easier to understand and maintain in the future. We won't wonder, "Hey, why is this different here and here when they do the same thing?"
  • Lastly, the side effect I noticed, as @agkozak did, is that you have to double tap in a parent menu link when the dropdowns aren't even used on smaller screen sizes. For Twenty Fourteen, that's below 783px. So I think we should do something similar to how Twenty Sixteen does it, and have the function only fire when it needs to, on larger screen sizes, and make sure it fires if a user resizes, on a resize event.

Does this help you be able to refine the patch?

Thanks again!

@agkozak
8 years ago

Patch to Twenty Fourteen's functions.js

#10 @agkozak
8 years ago

I extended Richard's patch, and it seems to be working now for me: https://core.trac.wordpress.org/attachment/ticket/30575/functions.patch

You'll note that I added a couple of lines that add and remove aria-haspopup attributes -- that seems to help with Internet Explorer. I welcome suggestions.

#11 @karmatosed
8 years ago

@davidakennedy can you give this a once over for a11y? Thanks.

@agkozak
8 years ago

Patch for Twenty Fourteen dropdown menus that works with tabbing (a11y)

#12 @agkozak
8 years ago

@karmatosed Thanks for bringing up accessibility. My first attempt inadvertently disabled tabbing through the menu with a desktop keyboard.

@davidakennedy Please see what you think of the new patch I uploaded. I just moved two lines of code back where they belonged.

#13 @davidakennedy
8 years ago

Hey @agkozak!

Thanks for the work on the patch here. Much appreciated! Here's some feedback for you:

Remove this from the comments:

* Modification of patch 30575 by Richard van Denderen
* @link https://core.trac.wordpress.org/attachment/ticket/30575/30575.patch

You'd get props for this patch along with @rdd. No need to note it in the comments. Open source is collaborative by its very nature. :)

On to more substantial patch feedback:

  • From an accessibility standpoint, it seems solid. I like the addition of the aria-haspopup, so nice work there.
  • I tested the patch on an iPad, which is the device I have, and it works well. One issue is that if you click/touch an item with a sub-menu and it opens, you cannot close it. Clicking on the body and/or outside the sub-menu won't close it and it hangs open so that's something we should refine. Twenty Sixteen does this. You can click outside of the sub-menu and it closes.
  • If you first load a page below the specified breakpoint for the mobile menu toggle, then resize the menu to a screen size above that breakpoint, the accessible focus styles (when tabbing through menus to display sub-menus) do not work. So it looks like the .focus class isn't applied.
  • The breakpoint in the CSS for the mobile menu toggle is 783px. But in the JavaScript, it's 781, so we should make that consistent.
  • It would be good to add a check at the beginning of the function to make sure the menu exist before going forward. It's possible child themes could not have a menu, and/or disable the fallback for custom menus.
  • We really need another tester to test this on some other devices once the patch is refined.

Let me know if any of this doesn't make sense. Happy to test further and help out with the patch. Thanks again!

#14 @ianbelanger
4 years ago

  • Focuses javascript added
  • Milestone set to Awaiting Review

@rehanali
2 years ago

Added patch

#15 @desrosj
12 days ago

  • Owner davidakennedy deleted

It's been 8 years since the owner has interacted with this ticket. I'm going to unassign it to encourage new contributors to take initiative to investigate.

@davidakennedy if you're still interested in this, feel free to re-assign to yourself.

For next steps, I'd like to confirm that this is still a problem. Galaxy Note 10 and Android 4.4.x is noted above. The latest versions are 20 and 14, respectively. It's likely this has been addressed already.

If it is and the current behavior is documented, then #30575.patch can be tested to see if it's a reasonable way address the problem.

Note: See TracTickets for help on using tickets.