FLUID-3610: UI Options: when navigating with the keyboard, you can't tab out of the slider.

Description

UI Options: when navigating with the keyboard, you can't tab out of the slider.

Steps to reproduce:

1. Open up the UI Options demo at http://build.fluidproject.org/infusion/demos/uiOptions/demo.html
2. Click the "Edit Appearance" button
3. Tab four times to get focus on the first jQuery UI Slider ("Maximum text size")
4. Try to move focus off the slider using Tab or Shift-Tab. Neither work.

This issue affects all non-mouse users of UI Options, and so qualifies as a blocker.

Environments

Chrome 4, FF 3.6, FF 3, IE 8, IE 7, IE 6 (Win XP)
FF 3.6, IE 8 (Win 7)
Safari 4 (Mac OS 10.5)
FF 3.6, Safari 4 (Mac OS 10.6)

Attachments

• FLUID-3610.patch
• FLUID-3610-b.patch
• FLUID-3610-c.patch

Comments

• Colin Clark commented 2010-04-06T18:49:40.000-0400

  I've traced this issue back to a bug in jQuery UI when a Slider widget is used inside a modal Dialog widget (i.e. with the modal: true option set). Ordinary links and buttons seem to be focusable as usual, but the Slider will forever steal keyboard focus and refuse to give it up.

• Colin Clark commented 2010-04-06T18:53:43.000-0400

  I've created a simple test that shows this problem, located here:

  https://source.fluidproject.org/svn/scratchpad/jquery-ui-dialog-and-slider/DialogAndSlider.html

  I will escalate the issue to the jQuery UI community. In the meantime, We'll have to change the UI Options demo to use either a non-modal dialog box or remove the dialog altogether.

• Colin Clark commented 2010-04-06T19:04:12.000-0400

  Here's a patch that removes the jQuery UI Dialog widget altogether and replaces it with a simple slide up and down effect. I'm not convinced this is particularly well-designed--I think perhaps a sliding drawer with a real affordance for opening/closing it might be better.

  The good news is that removing the dialog avoids a number of long-standing issues stemming from modality and the difficulty (impossibility?) of correctly trapping focus and making a screen-reader accessible experience.

• Colin Clark commented 2010-04-06T19:05:08.000-0400

  Justin, can you review this patch and talk to James to see if it suits our standard of quality. If not, perhaps he can suggest something simple for this release, and then we can revisit this demo for Infusion 1.3.

• Colin Clark commented 2010-04-06T19:07:00.000-0400

  James, can you take a look at this patch and give us your designerly opinion? It's not ideal, but perhaps it could get us through this release. Alternatively, we could put the dialog back in but make it non-modal, or come up with our own novel interaction. This demo is awfully raw to begin with, so we may want to replace it for the Infusion 1.3 release.

• Colin Clark commented 2010-04-06T19:22:46.000-0400

  Here's a slightly improved patch with the panel sliding out at the bottom of the page, below the "Edit Appearance" button. This should make it easier to navigate to with the keyboard, and more discoverable for screen reader users.

• Colin Clark commented 2010-04-07T11:54:54.000-0400

  Yura is working on a patch for this issue in the Sakai 3 integration demo of UI Options.

  Yura, when you're done and have attached your patch to this issue, assign it to Michelle and she'll review and commit.

• y z commented 2010-04-07T13:48:16.000-0400

  This patch updates the component demo and integration demo with a new ui options handling style (from modal dialog to simple slideup/down element)

• Michelle D'Souza commented 2010-04-09T16:20:10.000-0400

  Reviewed and committed.