FLUID-3610: Modal dialogs really do suck

Colin Clark colinbdclark at gmail.com
Tue Apr 6 23:25:38 UTC 2010


Hi All,

We found a blocker bug today in UI Options related to keyboard navigation:

http://issues.fluidproject.org/browse/FLUID-3610

This issue cropped up when we migrated to jQuery UI 1.8. After looking into it, I've determined that this is a regression in jQuery UI. It appears that jQuery's focus trapping logic for modal Dialogs causes the Slider to forever swallow keyboard focus. I've created a simple test page that shows the issue:

https://source.fluidproject.org/svn/fluid/infusion/trunk/src/webapp/tests/escalated-tests/html/DialogAndSlider.html

I'll file a Trac issue with the jQuery UI community and email their accessibility list tomorrow morning. In the meantime, what to do?

The modal dialog in UI Options has been bugging me for awhile. It looks squashed and confusing inside the demo portal's iFrame. It's never been fully modal, due to bugs in jQuery UI. And it suffers from poor screen reader accessibility, as outlined by Everett in a recent blog post:

http://zufelt.ca/article/Can-a-modal-dialog-be-made-to-work-properly-for-screen-reader-users-on-the-web

To this end, I've created a patch that removes the Dialog from the UI Options demo altogether, replacing it with a simple slide up/slide down effect. This is not a great interaction--it's trigged by a button, and there's no real affordance for the slideability of this UI Options panel, but it does solve the immediate problem. For Infusion 1.3, we might want to consider showing UI Options as a pull-out drawer or expandable/collapsible panel within the interface. Thoughts?

Here's the patch:

http://issues.fluidproject.org/secure/attachment/11097/FLUID-3610-b.patch

So from here, I think we have a few options for resolving this:

1. Just change UI Options' Dialog to be modeless
2. Use this patch, removing the Dialog from our demo
3. Come up with a better affordance, and implement it quickly

Colin

---
Colin Clark
Technical Lead, Fluid Project
http://fluidproject.org




More information about the fluid-work mailing list