Lightbox Component and IE 6 & 7 Compatibility
Richard Schwerdtfeger
schwer at us.ibm.com
Mon Jul 2 17:51:33 UTC 2007
Hi Michael,
If I didn't understand your question please let me know. ... I think this
addresses you are asking:
If you make incremental changes to the page (small DOM udpates) the focus
does not move any more than a typical tabindex.
Focus only moves if the user moves focus. If the focus moves such as you
pop up a menu, move focus to it, and wish it to move back you will need to
keep track of where the focus was before the menu was popped up. I Dojo, I
believe there is page focus management built in to handle this situation.
If you reload a page you have a "new document" and focus starts at wherever
the page designates.
If you want a page reload to maintain a point of regard you might consider
using AJAX to stash this information on the server for later retrieval at
onload time.
Rich
Rich Schwerdtfeger
Distinguished Engineer, SWG Accessibility Architect/Strategist
Chair, IBM Accessibility Architecture Review Board
blog: http://www.ibm.com/developerworks/blogs/page/schwer
Michael S Elledge
<elledge at msu.edu>
To
07/02/2007 12:14 Richard
PM Schwerdtfeger/Austin/IBM at IBMUS
cc
fluid-work-bounces at fluidproject.org
, fluid-work at fluidproject.org
Subject
Re: Lightbox Component and IE 6 & 7
Compatibility
Hi Rich--
Does tabindex= -1 return the focus to its starting point? For example,
if focus is on a text field, is it possible for the focus to return
there after a return trip to the server or DOM has added new content? Or
is that better accomplished some other way?
Mike
Richard Schwerdtfeger wrote:
>
> 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
> Inactive hide details for "Jonathan Hung"
> <jonathan.hung at utoronto.ca>"Jonathan Hung" <jonathan.hung at utoronto.ca>
>
>
> *"Jonathan Hung" <jonathan.hung at utoronto.ca>*
> Sent by: fluid-work-bounces at fluidproject.org
>
> 06/20/2007 12:57 PM
>
>
>
> To
>
> fluid-work at fluidproject.org
>
> cc
>
>
> Subject
>
> Re: Lightbox Component and IE 6 & 7 Compatibility
>
>
>
>
> 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_
> <mailto: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_
> <mailto:jonathan.hung at utoronto.ca>
> University of Toronto - ATRC
> Tel: (416) 946-8312
>
>
>
>
> --
> Jonathan Hung / _jonathan.hung at utoronto.ca_
> <mailto: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
>
> ------------------------------------------------------------------------
>
> _______________________________________________
> fluid-work mailing list
> fluid-work at fluidproject.org
> http://fluidproject.org/mailman/listinfo/fluid-work
>
(See attached file: elledge.vcf)
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20070702/dcd6c394/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/20070702/dcd6c394/attachment.gif>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: pic15058.gif
Type: image/gif
Size: 1255 bytes
Desc: not available
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20070702/dcd6c394/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/20070702/dcd6c394/attachment-0002.gif>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: elledge.vcf
Type: application/octet-stream
Size: 2 bytes
Desc: not available
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20070702/dcd6c394/attachment.obj>
More information about the fluid-work
mailing list