Non-tabbable elements become part of tab order in IE7

[dotherightthing]

Hi,

First up, thanks for a really useful plugin! :-)

This is working fine for me - except in IE7:

In IE7 elements that aren't natively tabbable become part of the tab order.

This is problematic for accessibility as the user has to tab through elements that aren't inputs or links, to access ones that are, and the visual focus is lost at this time, so it affects both sighted and screen reader users.

In your complex 'trapping dialog' example (http://julienw.github.com/jquery-trap-input/examples/dialog.html), this means that the some div containers and the .ui-resizable-handle elements become part of the tab order.

In my usage the markup is more complex, with more div elements wrapping inputs, plus there are label elements etc. All of these seem to become part of the tab order in IE7 when the trap input plugin is active on the jQuery UI modal.

To replicate this:

1. Open IE8
2. Navigate to http://julienw.github.com/jquery-trap-input/examples/dialog.html
3. Click the broken page icon in the browser chrome to enter Compatibility (IE7) View (you can use IE7 if you prefer but it doesn't have a Console out of the box)
4. Click your 'trapping dialog' button to launch the modal
5. Open the developer toolbar: Tools > Developer tools
6. Select the toolbar's Script tab
7. Open the toolbar's Console
8. Enter this string into the Console and hit Enter: $('*').bind('focus', function(e) { $(e.target).css('border', '1px solid red'); });
9. Tab through the modal
10. Every element that traps the focus will get a red border

This may also affect IE6, I don't have a Console I can use in that browser, but am experiencing a lot of tab presses between inputs in the same way as IE7.

Thanks, Dan

[julienw]

thanks for the report, I'll have a look.

(if, in the mean time, you have an idea to fix this, please propose a pull request :-) )

This could mean that in IE, one can call the "focus" method on any element, even if it's not focussable, which is kind of wrong...

[julienw]

Confirmed this: we can "focus" on any element in IE7 and below. Will have to find a workaround.

[julienw]

tracked down this to be a bug in jQuery; opened a bug there : http://bugs.jquery.com/ticket/11568

Will have to find a workaround though.

[dotherightthing]

Hi Julien,

Sorry for some reason I don't seem to be getting message notifications from GitHub...

Anyway, thanks for looking into it, and for logging the jQuery bug ticket :-)

I'm a bit time poor at the moment, but if I have downtime in the future I'll think about a solution.

Thanks, Dan

[julienw]

What's strange is that in http://julienw.github.com/jquery-trap-input/examples/complex.html the non-focusable element (without any attribute) is actually non-focussable, even if its tabIndex is equal to 0 (it should be -1). I tried using IE's dev tools to call .focus on this element, and it doesn't get the focus.

In the dialog example, I tried then to focus #ui-dialog-title-trapping-dialog, which is a "normal" span as well, and it gets the focus.

I guess I'll have to dive into jQuery UI's code...

[julienw]

It seems that the elements that get the focus and shouldn't are the resizable handle. Still no clue why IE accepts to focus them.

[julienw]

I think I fixed the issue.

I found that the problem was not happening with jQuery 1.7 but only with older jQuery. I tries with both jQ 1.7.2 and 1.6.2 and it works for me now with latest version. It should work in jQ 1.3.x to 1.5.x as well, I'm not sure for jQ 1.2.x, but it might.

Closing the issue for now, please tell me if it works for you and I'll make a proper release.

[dotherightthing]

Hi Julien,

Thanks for the fix! :)

I'm getting an error at line 167 ( attrHooks is undefined):

var attrHooks = $.attrHooks, tabindexAttrHook = attrHooks[tabindexKey],

It should work in jQ 1.3.x to 1.5.x as well, I'm not sure for jQ 1.2.x, but it might.

I'm using jQuery 1.5.2 (we're somewhat limited with the version as it's a Drupal install).

Looks like jQuery.attrHooks was added in v1.6 - http://blog.jquery.com/2011/05/03/jquery-16-released/

Two new hooks have been added in order to make it easier to add in special handling for specific attributes (jQuery.attrHooks) or form input values (jQuery.valHooks).

Looks like I might be out of luck with 1.5.2 then?

Thanks, Dan

[julienw]

Could you try the new version ? I was using attrHooks as a shortcut to get a function, but now I copied it inside jquery-trap-input.

[dotherightthing]

Hi Julien,

Thanks for the update.

This time I'm getting rfocusable is not defined (line 178) in getTabindexAttr(). I'm assuming that I'd get a similar error for rclickable as well, if the script used that.

Thanks,
Dan

[julienw]

sorry about that; just pushed an update, and this time I tested with jQuery 1.7.2, 1.6.2 and 1.5.2. Should be fine.

[dotherightthing]

Hi Julien,

Thanks for the fix - tested and working in:

• XP SP3 IE6
• XP SP3 IE7
• XP SP3 IE8
• XP SP3 IE9 *
• OS X 10.7.3 FF12
• OS X 10.7.3 Chrome 18.0.1025.168

Tabbing is a much more rewarding experience in IE7 now - it's a beautiful thing! :D

• In IE9, I can tab out of the modal, but I'm not sure where the focus goes from there. I can also achieve this @ http://julienw.github.com/jquery-trap-input/examples/dialog.html.

This could just be my test copy of IE9 though (VM running Windows 7 which keeps bugging me for a license). What do you get at your end?

Thanks, Dan

[julienw]

I'm opening another bug for IE9 (as I don't have a IE9 at home, it will be longer)

thanks !