iOS: Selects don't work with Voiceover

[betabong]

This is IMHO quite a critical bug considering the amount of websites using this library:

With Fastclick activated, people using VoiceOver on iOS are not able to open a select box (popover) anymore.

Example: http://cdpn.io/blGmH Pen: http://codepen.io/betabong/pen/blGmH/

There are scenarios though that work:

• When using the form navigation (above the keyboard < and >)
• When another form element has focus (keyboard is open) and then selecting the popover button

[matthew-andrews]

Yes this would be a very serious bug although I am currently not able to reproduce it.

I'm using iOS 7.1.

Steps taken:

• Tap the select button (VoiceOver says "First popup button double tap to activate the picker")
• Double tap and the picker opens.

Also as you said using form navigation works fine.

Do I need to do any other steps or do I need a device at a different version?

[matthew-andrews]

I was unable to reproduce this bug so tentatively closing...

[betabong]

Mathew, sorry, but I can reproduce this at a 100% with all my iOS devices (7 and 7.1).

• Activate VoiceOver
• Open the page
• Swipe navigate to the select element
• Activate by double "clicking"

The select won't open!

I've noticed two scenarios when it would open:

a) open the input and then navigate to the select by keyboard navigation (as already mentioned) b) open the text input first, then navigate to the select and double click.

If you still can't reproduce, I'll make you a video, ok?

[matthew-andrews]

A video would be really helpful, thanks :)

[betabong]

Here you go: http://cl.ly/2S2n150n3804

[matthew-andrews]

Very strange - now I can reproduce it reliably.

I've looked at this and chatted to @rowanbeentje and we think that as this is a browser bug (calling .focus() on <select>s on touch events don't work when accessibility mode is on) and (unfortunately) the only fix we're going to be able to do is disable fast focusing on iOS devices.

I've made a reduced test case here: http://jsbin.com/zeqof/1/edit.

[matthew-andrews]

I've got a potential fix in a branch - would you mind checking it? - https://github.com/ftlabs/fastclick/pull/235/files.

Thanks!

[laurentgoudet]

This fix is breaking the select inputs on iOS7 (tested on both iPhone 5 & 5s) for "quick" tap (faster than the 100ms threshold) when the position of the select element on the screen is moved up because the dropdown pops up at the bottom of the screen. If the touchend is not preventDefault(), the element under the initial position of the element (if any) will get the focus, closing the select dropdown.

If there are no focusable element under to initial on-screen position of the select input it will work fine, as well as if the select input in near the top of the screen and does not move when the dropdown pops up.

The only fixes I found are:

• Reverting this commit, but no more VoiceOver. Apple should fix it anyway.
• Exclude selects from fastclick, but then it's super slow

Safari on iOS is seriously broken. It's like there are making everything they can to prevent great web experiences & push people to native apps.

[madscientistmark]

reviewing...

[asselin]

Just submitted a pull request to fix this issue.

[ewout1]

I can confirm that this voiceover fix in fastclick still causes the select fields to be buggy on iphone ios8. We almost removed fastclick for it until we found this threat.