Non-tabbable elements become part of tab order in IE7 #3

Closed
dotherightthing opened this Issue Mar 28, 2012 · 13 comments

Projects

None yet

2 participants

@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
Owner
julienw commented Mar 28, 2012

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
Owner
julienw commented Apr 7, 2012

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

@julienw
Owner
julienw commented Apr 8, 2012

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
Owner
julienw commented Apr 24, 2012

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
Owner
julienw commented Apr 24, 2012

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 julienw added a commit that referenced this issue May 8, 2012
@julienw should fix issue #3 in IE6/7 for jQuery 1.6 and below: we use in Sizz…
…le the hook used in jQuery's attr
22fc632
@julienw
Owner
julienw commented May 8, 2012

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.

@julienw julienw closed this May 8, 2012
@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 julienw added a commit that referenced this issue May 10, 2012
@julienw should fix issue #3 for jQuery < 1.6 f75b909
@julienw
Owner
julienw commented May 10, 2012

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
Owner
julienw commented May 10, 2012

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

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
Owner
julienw commented May 11, 2012

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

thanks !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment