Tabbing to a selectmenu doesn't work in Firefox or Safari on Mac

[trptcolin]

In an implementation we recently inherited, and also in every other selectmenu implementation I've found using <select> tags, the select-replacing elements are not included in the tab order on the latest versions of FF and Safari on Mac. Chrome works fine, and it's not the usual problem where I need to set a system-wide preference to allow focus on any element, since that's already set.

Here are a few examples where I see this behavior:

http://jsfiddle.net/fnagel/GXtpC/ http://view.jqueryui.com/selectmenu/demos/selectmenu/default.html

Interestingly, the radio-button replacements allow tabbing to focus on this example, but not the select menu replacements: http://www.broadbandmap.gov/about-provider

Any ideas whether there's a workaround, or if we're just out of luck here?

[fnagel]

Does this problem only occur on Mac? It seems to work on Windows machines. If so, I would need some more time to investigate in this as I do not own a Mac.

Please note: your second demo link is outdated.

[trptcolin]

Yes, only on Mac. Here's what I was seeing:

Javascript-replaced dropdowns:

• Tabbing doesn't work on Safari on Mac, regardless of app-specific settings.
• Tabbing takes an [obscure] app-specific setting to get working on Firefox on Mac.

Native controls:

• Tabbing takes an app-specific setting to get working on Safari on every platform.

[fnagel]

Ok, I will take a look asap. Any ideas are welcome!

[pshoeg]

I can confirm that it doesn't work in Chrome on Mac either. However, it does work in Opera.

[fnagel]

Thanks for the feedback! Any idea how to fix that? I have no clue when I have the chance to test this...

[pshoeg]

No idea at all, unfortunately :(

[pshoeg]

I found this script: http://www.456bereastreet.com/lab/custom-select/ It works on Mac browsers as well, maybe there's something usable there?

[fnagel]

This works with native selects. Wont help in our case.

[fnagel]

Any feedback on this issue?

[rmfruit]

This is an issue with the default a behavior on Mac Safari and Firefox that skips links during tab navigation. Since the drop-downs are rendered using an anchor tag they get skipped. There a setting (in Safari at least) to tell the browser to navigate to all elements on the page when you use tab, but that's not an ideal solution.

One workaround is to capture the tab press on the previous element and manually focus() the drop down. Hardly ideal if you have tons of drop-downs and dynamically ordered forms though.

[fnagel]

So this is a general issue with Apples OS when dealing with links, right? Native selects get tabindex?

Perhaps we could change from a to button elements like we did in the new, built from scratch version: #140

[rmfruit]

Yeah, native selects (and all other form elements) receive focus on tabbing so switching to a button would fix the issue. Where is the new, built from scratch version? (Sorry I'm new-sh to Git-land).

[fnagel]

Naah, thats my fault, see #140

[fnagel]

Anyone any idea how to fix this issue? Perhaps somebody could test the new selectmenu?

[fnagel]

Is this still a thing?

[glencampbell]

Going to settings > keyboard > shortcuts and turn on all controls option for full keyboard access. This then allows the likes of Firefox to tab through links, etc. Not sure whether this answers things or helps – something I came across a while ago

[jgeringer]

Found a fix for this. It's only broken on older versions of the selectmenu and is fixed in the latest one.

To fix, change this line in the select menu script... this.newelement = $('<a />', {

To this... this.newelement = $('<span />', {

Exactly what @rmfruit was saying: "This is an issue with the default a behavior on Mac Safari and Firefox that skips links during tab navigation"

So changing it from an to something else, like fixes it.

Thans for giving feedback but there is no difference in your code snippets :-D

[jgeringer]

Sorry @fnagel! Part of the code was stripped out when I pasted it in, but it's there now if you see my original post.