Drop down menus not accessible in iOS due to change in how dropdowns are hidden

[brianshim]

I believe this change causes dropdown menus to not be accessible on iOS:
03fbbf8

If you tap on a top-level menu item on iOS, it just goes to that link instead of just showing the dropdown menu items. The result is that you can't access any dropdown menu items in iOS with this change.

The previous version worked because it used display:none and display:block to hide and show the dropdown menu. When iOS detects a change in display after a link is clicked, it does not navigate to that link until it is clicked a second time. This allows dropdown menus to to be shown and allows the user to click sub-menu items. More here:
http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/

I suggest undoing this change for iOS compatibility.

Thanks,
Brian

[davidakennedy]

@brianshim Thanks for the bug report!

I'll take a look at this in the next few days (since it was my commit), and see if I can replicate it and work on a fix.

I don't think we'd want to completely undo this as it also fixed an accessibility issue with the dropdown menus. We'll just have to make it better. 😄

[brianshim]

@davidakennedy Thanks, sounds good! :-)

[samikeijonen]

This would great! I've been wondering this for ages.

[philiparthurmoore]

This has been giving me headaches. Thank you for bringing this up Brian.

[joshmcrty]

I think this article does a nice job addressing the options for using display: none vs other CSS solutions for accessibility when hiding content: http://simplyaccessible.com/article/better-for-accessibility/

If/when #540 is merged, could we go back to using display: none?

[davidakennedy]

@joshmcrty Yeah, I think that's a good call. When I submitted the original PR for this, we didn't have any keyboard support, so there was no way for screen reader users or keyboard users to access sub menus at all. With #540 in place, we should be good to go: simple dropdown code plus keyboard and touch support.

I can work on this.

Also: I brought this to the WordPress Accessibility Team for its thoughts, and team members pointed out this example, which has a lot of the same principles as the Simply Accessible examples: http://adobe-accessibility.github.io/Accessible-Mega-Menu/

[obenland]

@davidakennedy Any news here?

[chrisdc]

As a point of interest it looks like Microsoft have implemented similar hover emulation, only based on the presence of aria-haspopup rather than changes to the dom. I also found a recent comment suggesting this behaviour might be added to Chrome for Android at some point, but I don't believe it's there yet.