Insert smiley dialog not keyboard accessible

[Damian]

Steps to reproduce:

1. Open nightly Ajax sample
   
2. Open Smiley dialog
   
3. Attempt to use keyboard to select a smiley.
   

Result:
It is not possible to navigate the dialog via keyboard.
Reproduced on FF3

[Tobiasz Cudnik]

Testes in FF3, IE8, IE6

[Tobiasz Cudnik]

Attached patch adds support for navigation in smiles dialog using arrows. Hitting tab moves to Cancel button. Unfortunately right now hitting Shift-Tab after that won't move focus back into smiles grid.

Another dialog which lacks of keyboard support is Insert Special Character dialog.

[Martin Kou]

This ticket is somewhat related to Garry's #2924 - but it's different.

While it is tempting to separate the hotkeys into arrow keys for selecting smileys, and tab/shift-tab for switching between the smileys and the Cancel button - the arrow keys won't work at all under JAWS. So we still have to let the user use tab/shift-tab to switch between smileys.

There's already a tab/shift-tab handler hooked by the dialog plugin at the document root, which is used for switching focus between the dialog's input widgets. That hotkey handler is triggered by DOM event bubbling. So, if we were to implement some custom focus logic for a specific dialog widget (e.g. the smileys table), we can assign a keydown handler to the widget and call preventDefault() for focus events within the widget. If the user were to press Tab at the last smiley, we can forgo the preventDefault() and let the dialog's keydown handler put the focus to the Cancel button instead. This way, we wouldn't break the dialog's built-in focus logic, while you can get the smileys to focus just like separate dialog elements to the user.

So, two changes would be needed:

1. Change the hotkeys to let the user to use Tab/Shift-Tab to switch smileys.
2. If the user presses tab at the last smiley, allow the keydown event to bubble up.
3. If the user presses shift-tab at the first smiley, allow the keydown event to bubble up.

[Martin Kou]

Oops, that's three changes :)

[Tobiasz Cudnik]

Tested in FF3, IE8 strict, IE8 quirks.

[Tobiasz Cudnik]

I've applies those 3 changes in second patch, still leaving arrow support as possible way of navigation.

[Martin Kou]

Ok, we're nearly there.

Now tab and shift-tab works in the smileys grid, what's missing is the tab focus logic between the Cancel button and the smileys grid. i.e. If I press tab or shift-tab from the Cancel button, I should be able to get back to the smileys grid.

html widgets in dialogs cannot normally be focused - that's because the dialog plugin does not know how to put the focus on an arbitrary HTML widget. You need to tell the dialog plugin how to put focus to your smileys grid in your dialog definition. Try adding a focus field to the html dialog widget's definition. Refer to the pastefromword dialog file for how to do it.

[Martin Kou]

I've discussed with Tobiasz about the focus hack in onLoad - it should be possible to reduce them to a few lines in the focus: function of the element definition.

[Tobiasz Cudnik]

Fixed with [3510].