FLUID-3590: Tab behavior on reorderable elements is sometimes inconsistent

Description

Tabbing on a page with reorderable elements sometimes has inconsistent behavior. Depending on the combination of the integration and the platform, it may do one of at least the following:

• tabs forward through everything, including the individual reorderable elements, until the end of the list where it gets stuck; additionally, shift-tab will not go through the individual reorderable elements (just one element out of the group)
• tabs forward through everything, including the individual reorderable elements, until the end of the list, but through subsequent tabs will only go through one element out of the group of reorderable elements
• tabs forward through everything, but not the individual reorderable elements (just one element out of the group of reorderable elements), but shift-tabs will go through each individual reorderable element

To replicate, using Safari 4/OS X 10.5:

1. Go to http://build.fluidproject.org/infusion/demos/reorderer/listReorderer/html/listReorderer.html
2. Tab forward till you reach the reorderer.
3. Try tabbing beyond the reorderer (it doesn't work). Try shift-tabbing to go into reverse (it will work).

To replicate, using Safari 4/OS X 10.5:
1. Go to http://build.fluidproject.org/infusion/demos/reorderer/layoutReorderer/demo.html
2. Tab forward till you reach the reorderer.
3. Keep tabbing forward (it will tab through the individual elements).
4. Keep tabbing forward more until you cycle through again (it won't go through the individual elements anymore).
5. Shift-tab to go into reverse (it will go through the individual elements).

To replicate, using Safari 4/OS X 10.5:
1. Go to http://build.fluidproject.org/infusion/demos/reorderer/imageReorderer/demo.html
2. Tab forward till you reach the reorderer (it doesn't work).
3. Keep tabbing forward (it will tab through the individual elements).
4. Try tabbing beyond the reorderer (it won't work). Try shift-tabbing to go into reverse (it will work, but only goes through one element, not all individual elements)

Environments

Safari 4 (OS X 10.5)
FF 3.6 (Win XP, Mac OS 10.6)

Attachments

• debugFocus.patch
• FLUID-3590.patch
• fluid-3590-keyboard-a11y.patch
• gridReorderer.patch

Comments

• Justin Obara commented 2010-04-07T12:14:31.000-0400

  UPDATED Results based on tests of Infusion 1.1.2 and the current trunk version.

  Safari 4 (Mac OS 10.6)
  ======================

  Grid Reorderer:

  1.1.2 - tab (and option-tab) get stuck at first element. Shift-tab (and options-shift-tab) works

  current - same as 1.1.2

  Image Reorderer:

  1.1.2 - same as grid reorderer except option-tab will put focus on each of the images on the first time through.

  current - same as 1.1.2

  Layout Reorderer:

  1.1.2 - same as Image Reorderer except using tab has the same focusing issues as option-tab and shift-tab (and option-shift-tab) always cycles through all of the elements.

  current - same as 1.1.2

  List Reorderer:

  1.1.2 - same as Grid Reorderer

  current - same as 1.1.2

  FF 3.5 (Win XP)
  ================

  Grid Reorderer:

  1.1.2 - works

  current - works

  Image Reorderer:

  1.1.2 - works

  current - works

  Layout Reorderer:

  1.1.2 - tab and shift-tab put focus on each element

  current - same as 1.1.2

  List Reorderer:

  1.1.2 - works

  current - works

  IE 7 (Win XP)
  ================

  Grid Reorderer:

  1.1.2 - works

  current - works

  Image Reorderer:

  1.1.2 - works

  current - works

  Layout Reorderer:

  1.1.2 - tab and shift-tab put focus on each element

  current - same as 1.1.2

  List Reorderer:

  1.1.2 - works

  current - works

  FF 3.6 (Win XP)
  ================

  Grid Reorderer:

  1.1.2 - stops on first element

  current - can tab off of first element, but pressing tab again returns you to the first element. Holding down tab, will flicker focus on and off of the first element

  Image Reorderer:

  1.1.2 - same as Grid Reorderer

  current - same as Grid Reorderer

  Layout Reorderer:

  1.1.2 - tab will put focus on each element the first time through and then work properly after that. shift-tab puts focus on each element all the time

  current - same as 1.1.2

  List Reorderer:

  1.1.2 - same as Grid Reorderer

  current - same as Grid Reorderer

  IE 8 (Win XP)
  ================

  Grid Reorderer:

  1.1.2 - works

  current - works

  Image Reorderer:

  1.1.2 - works

  current - works

  Layout Reorderer:

  1.1.2 - tab will put focus on each element the first time through and then work properly after that. shift-tab puts focus on each element all the time

  current - same as 1.1.2

  List Reorderer:

  1.1.2 - works

  current - works

• Antranig Basman commented 2010-04-07T16:54:36.000-0400

  Patch to correct debugFocus.js for use with jQuery 1.4.x (and perhaps some previous versions)

• Antranig Basman commented 2010-04-07T16:56:20.000-0400

  Patch for gridReorderer.html which includes debugging utilities to show progress of focus. Remove "tabindex = 1" from the markup to see a slightly different effect also.

• Antranig Basman commented 2010-04-08T12:15:34.000-0400

  This patch appears to resolve the issue on Firefox 3.6 and does not break on IE6. Uploading for testing on other browsers

• Antranig Basman commented 2010-04-08T16:43:03.000-0400

  Patch to keyboard-a11y as well as Reorderer, to demonstrate fix to issue in addition to "mouse dropping cleaning" using explicit blur

• Colin Clark commented 2010-04-09T16:18:29.000-0400

  To translate Antranig, we've updated the keyboard-a11y plugin to use the Roaming Tabindex Technique for handling tab focus. Before focusing a new arrow-keyable element, we change its tabindex from -1 to 0. On blur, we change it back to -1, with an additional workaround of manually calling blur() when we programmatically shift focus to a new element.

• Colin Clark commented 2010-04-09T16:19:28.000-0400

  I've committed Antranig's wicked, wicked patch at r9819. Justin and I have tested fairly extensively, but I'd like another quick code review from Michelle just in case I missed anything while linting, etc.

• Colin Clark commented 2010-04-09T16:19:42.000-0400

  Antranig's patch committed at r9819

• Colin Clark commented 2010-04-09T16:21:20.000-0400

  colinclark: Okay dudes, everyone celebrate!
  [4:19pm] colinclark: http://issues.fluidproject.org/browse/FLUID-3590
  [4:19pm] colinclark: The last blocker is fixed!
  [4:20pm] colinclark: michelled will do a triple-check of the code, since removed a few bits of cruft from the Reorderer
  [4:20pm] jessm: yay
  [4:20pm] colinclark: And we're good to test the Reorderer
  [4:20pm] athena: congrats!
  [4:20pm] colinclark: Huge props to our favourite "volunteer," Bosmon, for fixing this one so fast
  [4:20pm] jessm:
  [4:20pm]

• Colin Clark commented 2010-04-09T16:23:13.000-0400

  More information about the Roaming Tabindex Techinque, in case it's useful in the future:

  http://www.yuiblog.com/blog/2009/02/23/managing-focus/