Ticket #4488 (closed bug: fixed)

Opened 5 years ago

Last modified 4 years ago

:focusable and :tabbable are broken with jQuery 1.3.2

Reported by: scott.gonzalez Owned by:
Priority: major Milestone: 1.8.5
Component: ui.core Version: 1.7.1
Keywords: Cc:
Blocking: Blocked by:

Description

The change to :hidden and :visible have broken the :focusable and :tabbable selectors.

Change History

comment:1 Changed 5 years ago by joern.zaefferer

I've looked at the code. The interesting part seems to be this check:

// the element and all of its ancestors must be visible
// the browser may report that the area is hidden
&& !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length;

Seems like we could just check the visibility of the element itself instead of checking ancestors. So this should do the trick:

&& $(element).is(":visible");

Fixes 7 of 17 failing tests, thats something...

comment:2 Changed 5 years ago by d3r1v3d

+1 to Joern's suggested patch - I definitely agree that checking if the element is visible makes more sense.

Concerning the 'visible, enabled elements' tests failing for the 'area with href' case, I've noticed that these <area> elements consistently have an offsetWidth and offsetHeight of 0. I believe this is because the test map doesn't have any <img usemap=""/> relationships attached to it, so all of its internal <area>s are essentially hidden. jQuery 1.3.2 checks for a positive offsetWidth or offsetHeight in its implementation of the ':visible' selector and so this is what causes that subtest to fail.

However, the <map> parent should still have a valid width/height, and the following tweak to Joern's suggest patch causes all of the 'visible, enabled elements' tests to pass 100% in Firefox 2/3:

&& ('area' == nodeName
    ? $(element).closest('map').is(':visible')
    : $(element).is(':visible'));

The problem is that the same is not true for either Chrome or IE 7. They both consistently report that the <map> and all nested <area>s have an offsetWidth/offsetHeight of 0, causing the is(':visible') check to report false every time.

comment:3 Changed 5 years ago by joern.zaefferer

So :focusable is actually used only by :tabbable, which in turned is used only by Dialog. Seems like we imagined more of a usecase where actually only one exist: focus the first element in a dialog.

Which reminds me of the code in my validation plugin, which basically just gets the first invalid input (not interesting here), then does .filter(":visible").focus();

The call is wrapped in a try-catch-swallow block for some IE-edgecases.

comment:4 Changed 5 years ago by joern.zaefferer

  • Priority changed from critical to major

comment:5 Changed 4 years ago by AzaToth

can someone please explain this bug in more detail, and where this applies? (i.e. what change?)

comment:6 Changed 4 years ago by scott.gonzalez

Mostly fixed in  3f070bd.

comment:7 Changed 4 years ago by scott.gonzalez

Area elements are fixed in  fe13fba.

comment:8 Changed 4 years ago by joern.zaefferer

What's left?

comment:9 Changed 4 years ago by scott.gonzalez

The object tests still fail in IE. I cant seem to come up with a test that passes in all browsers at the same time.

comment:10 Changed 4 years ago by scott.gonzalez

  • Status changed from new to closed
  • Resolution set to fixed

Objects fixed in  0ab54d8.

comment:11 Changed 4 years ago by scott.gonzalez

  • Milestone changed from 1.9 to 1.8.5

comment:12 Changed 4 years ago by Scott González

Core tests: Fixed object element for focusable/tabbable tests. Fixes #4488 - :focusable and :tabbable are broken with jQuery 1.3.2.

Changeset: 0ab54d87dc521b73819a3ac480f7aa94365e52e2

Note: See TracTickets for help on using tickets.