Opened 10 years ago

Closed 10 years ago

#3492 closed Bug (fixed)

Insert smiley dialog not keyboard accessible

Reported by: Damian Owned by: Tobiasz Cudnik
Priority: Normal Milestone: CKEditor 3.0
Component: Accessibility Version:
Keywords: IBM Confirmed Review+ Cc:

Description

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

Attachments (4)

3492.patch (5.4 KB) - added by Tobiasz Cudnik 10 years ago.
Testes in FF3, IE8, IE6
3492_2.patch (6.2 KB) - added by Tobiasz Cudnik 10 years ago.
Tested in FF3, IE8 strict, IE8 quirks.
3492_3.patch (7.4 KB) - added by Tobiasz Cudnik 10 years ago.
3492_4.patch (6.6 KB) - added by Tobiasz Cudnik 10 years ago.

Download all attachments as: .zip

Change History (18)

comment:1 Changed 10 years ago by Artur Formella

Keywords: Confirmed added

comment:2 Changed 10 years ago by Garry Yao

Owner: set to Garry Yao
Status: newassigned

comment:3 Changed 10 years ago by Tobiasz Cudnik

Owner: changed from Garry Yao to Tobiasz Cudnik
Status: assignednew

comment:4 Changed 10 years ago by Tobiasz Cudnik

Status: newassigned

Changed 10 years ago by Tobiasz Cudnik

Attachment: 3492.patch added

Testes in FF3, IE8, IE6

comment:5 Changed 10 years ago by Tobiasz Cudnik

Keywords: Review? added

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.

comment:6 Changed 10 years ago by Martin Kou

Keywords: Review- added; Review? removed

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.

comment:7 Changed 10 years ago by Martin Kou

Oops, that's three changes :)

Changed 10 years ago by Tobiasz Cudnik

Attachment: 3492_2.patch added

Tested in FF3, IE8 strict, IE8 quirks.

comment:8 Changed 10 years ago by Tobiasz Cudnik

Keywords: Review? added; Review- removed

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

comment:9 Changed 10 years ago by Martin Kou

Keywords: Review- added; Review? removed

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.

Changed 10 years ago by Tobiasz Cudnik

Attachment: 3492_3.patch added

comment:10 Changed 10 years ago by Tobiasz Cudnik

Keywords: Review? added; Review- removed

comment:11 Changed 10 years ago by Martin Kou

Keywords: Review- added; Review? removed

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.

Changed 10 years ago by Tobiasz Cudnik

Attachment: 3492_4.patch added

comment:12 Changed 10 years ago by Tobiasz Cudnik

Keywords: Review? added; Review- removed

comment:13 Changed 10 years ago by Martin Kou

Keywords: Review+ added; Review? removed

comment:14 Changed 10 years ago by Tobiasz Cudnik

Resolution: fixed
Status: assignedclosed

Fixed with [3510].

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy