JAWS not switching modes in CKEditor Cell dialog

[Satya Minnekanti]

To reproduce the defect:

1. Open a CKEditor sample.

2. Insert a new table.

3. Open the Cell properties dialog using the context menu

4. Navigate to a Choose button in the dialog and press Enter to open the Select Color dialog.

5. Select Color dialog opens and JAWS reads the first color option. Inspect32 confirms that focus is on the first color in colors listbox.

6. Use Right Arrow key.

Expected Result: JAWS should read the next color in the list. Actual Result: JAWS reading the Cancel button name.

There are two issues here

First Issue: JAWS doesn't switch to forms mode correctly to allow navigating the color picker list box with arrow keys.

Second Issue: Odd jump to the Cancel button bypassing the input field on the dialog.

[Jakub Ś]

Colors haven't been read from CKEditor 3.0.

Focus on first color was introduced in CKEditro 3.3.

[Jakub Ś]

Other tickets that fall under Select "Color Dialog Problems / Enchancements":
#8701, #8698, #8519, #8679, #8523, #8218, #5960, #4994.

[Damian]

Response from FS:

The color picker control is currently implemented as a table with role="listbox". Under that table is a tbody element containing tr elements with each tr containing td elements. Finally, each td contains a link with role="option". There appear to be several issues with this control.

1. According to the authoring guide ​http://www.w3.org/TR/wai-aria-practices/

in section 10, a list box is supposed to have list items as its children with no other elements in between.

2. Probably as a result of point 1 above, Firefox does not apply the focusable

state to the table element with role="listbox" and JAWS does not identify this as a listbox control.

3. Probably most importantly, this control acts like a grid. That is

left/right arrows move the user left and right along rows and up/down arrows move the user from row to row.

How to fix. There are a couple possibilities on the best way to fix this.

1. Make the color picker a grid control with gridcells for the individual

table cells.

2. modify the listbox so the direct descendants are list items.

Either of these solutions should let the control work correctly with JAWS

[Garry Yao]

This issue WFM with JAWS13 in both IE and FF, can someone confirm it?

[Jakub Ś]

I was bale to reproduce it in Firefox 11, Chrome 17 on Windows XP and JAWS 13.0.718

Strange that it was not found when testing #8701

[Garry Yao]

I did some further testing, it's a random reproduced issue (for the key navigation part) while it's true that "listbox" is not well recognized here, the idea of making it as a "grid" looks like a better choice here, we had the "listbox" option before since at that time the navigation is one way only, later it was later changed to two dimension.

In testing JAWS doesn't work well for marking the "link" as the grid cell, so the impl has to drop the focus directly on a table cell for that, this should be enough to make JAWS speaks:

"Select Color Dialog, Color Options dialog, #660066..."

[Garry Yao]

Added a manual tc for easy testing.

[Garry Yao]

New patch addresses the following found issues:

1. JAWS on Firefox doesn't speaks out cell color (missing aria-label);
2. JAWS doesn't always announce table name (caption helps);
3. Restore last focused color cell on revisit;
4. Distinguish outline (focus) and hover states;
5. Fix focus/blur event on old IEs.
6. Add "aria-selected" to color cell when choose.

[Frederico Caldeira Knabben]

• There should be no cell highlighted when the dialog opens. That looks strange for non-keyboard users. Cells start to get highlighted as soon as the arrows get activated, having the first cell highlighted on first key-press (similar to toolbar combos).

• There is a bit of confusion if you start moving the mouse over the cells, after having done it with keyboard. You see two highlight boxes, one for the keyboard and one for the mouse. We should not have it for the mouse, which should not interfere on the keyboard highlight, unless a mouse click takes place.

• It is not possible to select a color with mouse click.

[Garry Yao]

Fixed with [7429].

[Satya Minnekanti]

It's not properly fixed. Jaws just reading as Color Options table when we open Select Color dialog, & when user uses Arrow keys nothing happens,JAWS just reads as Blank or space. But after using arrow keys if you press Tab Focus going to a color in the table and user can use arrow keys after it.

Expected Result: when Select Color dialog opens focus should go to first color option in the table and JAWS should read that option, and user should be able to use arrow keys to navigate between different Colors.

Please re-open this ticket.

[Garry Yao]

Fixed with [7444].