Bug 9460 – Text Input Element: Detection of focus or setting of focus broken

• Status: NEW
• Component: WebCore Misc.

[Christopher M. Balz]

Note: This bug is either in HTML DOM, JavaScriptGlue (is this the DOM binding?), or both.

Safari is not strong enough to support custom JavaScript modal dialogs.  The modal dialog on the screen is just a 'div' element with invisible text input boxes at the start and end of the tabbing order.  On stronger web browsers, such as IE 6 and Firefox, they function to keep the user from tabbing out of the modal dialog.  

This is key to modal dialog functionality in any user interface.  One major benefit of this functionality is that the user can loop through the tabbable elements in the dialog simply by tabbing (i.e., get to the beginning tabbable element by tabbing past the end element).  Additionally, this is important for accessibility by those with physical disabilities.  

In the source code, there is a method in the "Component" class called "captureFocus" that traps a DOM focus event on one of these invisible user input elements ("input type='text'") and resets the focus such that the user cannot tab out of the dialog.  This is not working on Safari, although the functionality is w3c compliant and works on IE 6 and Firefox.  There is something broken in Safari's JavaScript or DOM functionality that is causing this bug.

To get access to Vox, where you may reproduce this bug, simply send me a desired log-in (i.e., "webkit-tester") and corresponding e-mail address at [e-mail].  Then I will give you a starter account on Vox, with which you may reproduce this bug at your convenience.  

This product, Vox, is publically available but access to some functionality is still on a somewhat limited basis.  However, more users will be on Vox in the near future.  Please fix this important bug.

[Christopher M. Balz]

Note: I have also reported this bug to Apple via the built-in Safari bug reporter, using the same title.

[David Kilzer (:ddkilzer)]

(In reply to comment #1)
> Note: I have also reported this bug to Apple via the built-in Safari bug
> reporter, using the same title.

A better place to report the bug is via "Radar" using https://bugreport.apple.com/.  If you don't have an Apple Developer Connection (ADC) membership, you can sign up for a 100% free "online" ADC membership so that you can log into this web site to report the bug.

If you refile this issue there, please reference this Bugzilla bug URL in it, and reference the "Radar" bug number and add the "InRadar" keyword here.  Thanks!

[Mark Rowe (bdash)]

Christopher, a standalone HTML page demonstrating this bug would make it a lot easier to reproduce, test, and fix this issue.  I would appreciate if you could take the time to create a simple standalone example of the problem. 

[David Kilzer (:ddkilzer)]

Christopher, this bug should be retested after r18610 landed.  (Download a WebKit nightly build from http://nightly.webkit.org/ with a revision number of r18610 or higher to test.)

See also Bug 7138.

[Christopher M. Balz]

* New test case, with clear, totally commented source code, per request above: Please see this test case: https://us.etrade.com/javascript/et1/dev_tools/test/harness/modal_dialog/index-developers.html

* Complete, fresh re-cap with new test-case, below.

Updates on this Bug
-------------------

  * As of this date, the issue is still not fixed either in WebKit Version 4.0.2 (4530.19, r46367) nor in the Apple Safari 4.0.2.

  * I have tried filing the bug at https://bugreport.apple.com/, with no luck ( I have an Online Apple Dev Account, but the system throws an error when I log in).

  * I have also now filed a bug on the same issue by using the "Report Bugs to Apple . . . " menu option on the Safari "Safari" web browser menu.


Complete Re-Summary ( "Fine in 09" )
------------------------------------

What should happen: 

  The 'esc' key should cause a modal dialog window to close.

What happens: 

  The 'esc' key has no effect.


How to reproduce: 

  a) Visit this page ( https://us.etrade.com/javascript/et1/dev_tools/test/harness/modal_dialog/index-developers.html ).  

  b) Click on the button 'Click Here to Show Modal Dialog".

  c) Press the 'esc' key

Other Reference Browsers: The 'esc' key works properly on Firefox, Internet Explorer 6 through 8, and Opera.  The bug is in queue for Chrome.  

Importance: This bug affects functionality in production on etrade.com.

[Christopher M. Balz]

This issue is in Safari 4, but the dropdown box does not have that option.  So I put it at Safari 528+.  The issue is also in the WebKit nightly, per my comment above.

[Christopher M. Balz]

I have summarized the 'esc' issue above, but it may be a different issue than fixing the tabbing issue originally raised.  I will file a different bug on the 'esc' issue.

I will also re-summarize for the tabbing issue originally raised:

What should happen: 

  The 'tab' key (when pressed again and again) should cycle (in a loop) through the visible form elements in the modal dialog.

What happens: 

  The 'tab' key, when pressed after focusing on the last visible form element in the modal dialog, moves the focus up to the Web browser back-button.  Then eventually (after a few presses) it returns focus to the last visible form element in the modal dialog.  But it does not ever cycle back to the first form element in the modal dialog.

How to reproduce: 

  a) Visit this page ( https://us.etrade.com:/javascript/et1/dev_tools/test/harness/modal_dialog/index-developers.html ).  

  b) Click on the button 'Click Here to Show Modal Dialog".

  c) Keep pressing the 'tab' key until the focus is on the modal dialog button, "Click Here to Show Modal Dialog 2".  Press the tab key again.



Importance: This bug affects functionality in production on etrade.com.

[Christopher M. Balz]

Note: This functionality (the tabbing control) works properly on Firefox, Internet Explorer 6 through 8, and Opera.

[Christopher M. Balz]

(In reply to comment #7)
> I have summarized the 'esc' issue above, but it may be a different issue than
> fixing the tabbing issue originally raised.  I will file a different bug on the
> 'esc' issue.
> 
> I will also re-summarize for the tabbing issue originally raised:
> 
> What should happen: 
> 
>   The 'tab' key (when pressed again and again) should cycle (in a loop) through
> the visible form elements in the modal dialog.
> 
> What happens: 
> 
>   The 'tab' key, when pressed after focusing on the last visible form element
> in the modal dialog, moves the focus up to the Web browser back-button.  Then
> eventually (after a few presses) it returns focus to the last visible form
> element in the modal dialog.  But it does not ever cycle back to the first form
> element in the modal dialog.
> 
> How to reproduce: 
> 
>   a) Visit this page (
> https://us.etrade.com:/javascript/et1/dev_tools/test/harness/modal_dialog/index-developers.html
> ).  
> 
>   b) Click on the button 'Click Here to Show Modal Dialog".
> 
>   c) Keep pressing the 'tab' key until the focus is on the modal dialog button,
> "Click Here to Show Modal Dialog 2".  Press the tab key again.
> 
> 
> 
> Importance: This bug affects functionality in production on etrade.com.

For the 'esc' bug, see https://bugs.webkit.org/show_bug.cgi?id=22763

[Alexey Proskuryakov]

So to summarize, the issue tracked here is that tabbing doesn't cycle through all the inputs in the "dialog", is that correct?

[Christopher M. Balz]

That is correct, since no matter on what input the focus is inside the dialog, holding down the tab key should cause the focus to cycle through all the inputs.