Lightbox Component and IE 6 & 7 Compatibility

Wed Jun 20 18:18:49 UTC 2007

Hi Johnathan,

1. That is not true. You need to set the tabindex=-1 or 0 depending on your
application. You don't want to use anchors as this places things on the
taborder.

See http://www.w3.org/wai/pf/roadmap for the tabindex definitons.

The Dojo toolkit is using tabindex extensively as described above.

So when you set tabindex="-1" you can use JavaScript to set the focus on
the element and it will not appear in the tab order. If you set it to "0"
it will appear in the taborder in the document order it resides.

This works in IE 6, 7, FF >= 1.5, and Opera 9.

Rich

Rich Schwerdtfeger
Distinguished Engineer, SWG Accessibility Architect/Strategist
Chair, IBM Accessibility Architecture Review  Board
blog: http://www.ibm.com/developerworks/blogs/page/schwer

             "Jonathan Hung"                                               
             <jonathan.hung at ut                                             
             oronto.ca>                                                 To 
             Sent by:                  fluid-work at fluidproject.org         
             fluid-work-bounce                                          cc 
             s at fluidproject.or                                             
             g                                                     Subject 
                                       Re: Lightbox Component and IE 6 & 7 
                                       Compatibility                       
             06/20/2007 12:57                                              
             PM                                                            

Hello everyone,

We've continued our investigation into IE compatibility with the Lightbox
component focusing on some of the problem areas we experienced earlier:

1. DIV focus doesn't work on IE
2. JSUnit 2.2a may not be compatible with Dojo

#1 Div Focus:,

IE 6 & 7 follows the DOM 1.0 and 2.0 spec in that it will not focus any
element that is not a form element (checkbox, radio button etc.) or an
anchor. With this in mind, we changed the Lightbox Javascript to put focus
on the anchor inside the first thumbnail by using tabindex. This required
dynamically changing the tabindex each time the user moved around the
Lightbox so that onblur returning to the Lightbox would maintain what was
last selected.

However dynamically changing the tabindex via Javascript would create
unexpected tabbing orders if the user first focuses on another component on
the UI. Also Firefox created some strange behaviour by not styling
components properly after we modified tab index.

All of this experimentation stems from the fact that IE does not allow
focusing of DIVs (as per DOM spec). In a quick experiment, we tried the
MochiKit Javascript Toolkit and it appears that MochiKit's event handling
captures DIV focus event, even if the Browser does not. So it's a
possibility that we can use MochiKit instead.

We will continue investigating Dojo's event handling to see if it is
capable of capturing DIV focus events in a browser independent manner.

!! None of this code has been committed to SVN since it was all
experimental and the tests did not pass.

#2 JSUnit 2.2a may not be compatible with Dojo

JSUnit 2.2a now works with Dojo in IE. This is no longer an issue.

Feel free to post questions/comments to this thread!

- Jonathan.

On 13/06/07, Jonathan Hung <jonathan.hung at utoronto.ca> wrote:.
  During some recent testing, we have discovered that the Lightbox
  component is not completely functional in Internet Explorer. From a User
  Experience perspective the component is buggy in IE, though in certain
  circumstances it can work the way we expect,

  The following are the issues we've encountered in the past week:

  1. DIV focus
  Currently in Firefox 2+, when you tab to the Lightbox component the first
  thumbnail would become selected to indicate that the user can perform
  actions on the thumbnails. However in IE 6 & 7 focusing on that DIV is
  inconsistent and therefore causing the resulting arrow and CTRL key
  actions to not work.

  If you're interested in more detail and how to get the component to work
  in IE before we get a fix in place, please let me know. This is a UX
  problem in IE and we are currently investigating solutions.

  2. JSUnit tests do not run in IE 6 & 7 if Javascript test code is located
  in a seperate file.
  Currently the Lightbox unit test is separated into two files:
  LightboxTests.html and LightboxTests.js. With all the test Javascript
  code in the LightboxTests.js file, JSUnit will not execute the tests in
  Internet Explorer 6 & 7.

  One way to overcome this is to copy the contents of LightboxTests.js into
  LightboxTests.html. There may be another solution, but more research is
  required. Ideally we would like to have our test Javascripts residing in
  a separate file for maintainability and separation of function.

  3. JSUnit 2.2a may be incompatible with Dojo
  During our testing, we discovered that JSUnit 2.2 Alpha (latest
  downloadable release) is not compatible with IE 7. Attempting to run the
  tests will yield "dijit is undefined" or "fluid is undefined" errors.
  JSUnit 2.1 (the last stable release) appears to work as expected with
  IE7. A solution would be to use version JSUnit 2.1 instead of JSUnit 2.2
  for our testing.

  4. Lightbox component will only work for IE 7 if served from Tomcat
  IE 7's security features prevent our component from being loaded directly
  from the hard drive. Therefore the component needs to be deployed into
  Tomcat and served up. The obvious disadvantage to this is that IE 7
  testing will require users to have Tomcat installed. Luckily if you are
  testing just the component, you don't need to have any Sakai running
  which can speed things up considerably.

  With this in mind, if you are planning on demoing the component, try to
  use Firefox 2.0+ if possible. If using IE 6 or 7 is absolutely critical,
  please let me know and I'll walk you through the process to get it
  working.

  We are currently doing research and testing various solutions. Getting
  Lightbox working in IE is very important (goes without saying) so we hope
  to get the most critical issues resolved soon.

  Questions? Comments? Need more detail? Let us know!

  Take care,

  - Jonathan.

  --
  Jonathan Hung / jonathan.hung at utoronto.ca
  University of Toronto - ATRC
  Tel: (416) 946-8312

--
Jonathan Hung / jonathan.hung at utoronto.ca
University of Toronto - ATRC
Tel: (416) 946-8312 _______________________________________________
fluid-work mailing list
fluid-work at fluidproject.org
http://fluidproject.org/mailman/listinfo/fluid-work
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20070620/c9bd5b96/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: graycol.gif
Type: image/gif
Size: 105 bytes
Desc: not available
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20070620/c9bd5b96/attachment.gif>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: pic30281.gif
Type: image/gif
Size: 1255 bytes
Desc: not available
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20070620/c9bd5b96/attachment-0001.gif>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: ecblank.gif
Type: image/gif
Size: 45 bytes
Desc: not available
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20070620/c9bd5b96/attachment-0002.gif>