Ticket #8706 (closed Bug: fixed)

Opened 3 years ago

Last modified 2 years ago

JAWS not switching modes in CKEditor Cell dialog

Reported by: satya Owned by: garry.yao
Priority: Normal Milestone: CKEditor 3.6.3
Component: Accessibility Version: 3.0
Keywords: IBM Firefox Cc: damo, tmonahan

Description

To reproduce the defect:

  1. Open a CKEditor sample.
  1. Insert a new table.
  1. Open the Cell properties dialog using the context menu
  1. Navigate to a Choose button in the dialog and press Enter to open the Select Color dialog.
  1. Select Color dialog opens and JAWS reads the first color option. Inspect32 confirms that focus is on the first color in colors listbox.
  1. 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.

Attachments

8706.patch (7.3 KB) - added by garry.yao 3 years ago.
8706.html (3.4 KB) - added by garry.yao 3 years ago.
8706_2.patch (11.0 KB) - added by garry.yao 3 years ago.
8706_3.patch (11.8 KB) - added by garry.yao 3 years ago.
8706_4.patch (1.5 KB) - added by garry.yao 2 years ago.

Change History

comment:1 Changed 3 years ago by j.swiderski

  • Status changed from new to confirmed
  • Version set to 3.0

Colors haven't been read from CKEditor 3.0.

Focus on first color was introduced in CKEditro 3.3.

comment:2 Changed 3 years ago by j.swiderski

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

comment:3 Changed 3 years ago by damo

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.

  1. 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.

  1. 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.

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

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

comment:4 Changed 3 years ago by garry.yao

  • Status changed from confirmed to pending

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

comment:5 Changed 3 years ago by j.swiderski

  • Keywords Firefox added
  • Status changed from pending to confirmed

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

Changed 3 years ago by garry.yao

comment:6 Changed 3 years ago by garry.yao

  • Owner set to garry.yao
  • Status changed from confirmed to review

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..."

Changed 3 years ago by garry.yao

comment:7 Changed 3 years ago by garry.yao

Added a manual tc for easy testing.

Changed 3 years ago by garry.yao

comment:8 Changed 3 years ago by 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.

comment:9 Changed 3 years ago by fredck

  • Milestone set to CKEditor 3.6.3

comment:10 Changed 3 years ago by fredck

  • Status changed from review to review_failed
  • Component changed from General to Accessibility
  • 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.

Changed 3 years ago by garry.yao

comment:11 Changed 3 years ago by garry.yao

  • Status changed from review_failed to review

comment:12 Changed 3 years ago by fredck

  • Status changed from review to review_passed

comment:13 Changed 3 years ago by garry.yao

  • Status changed from review_passed to closed
  • Resolution set to fixed

Fixed with [7429].

comment:14 Changed 3 years ago by satya

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.

comment:15 Changed 2 years ago by garry.yao

  • Status changed from closed to reopened
  • Resolution fixed deleted

Changed 2 years ago by garry.yao

comment:16 Changed 2 years ago by garry.yao

  • Status changed from reopened to review

comment:17 Changed 2 years ago by fredck

  • Status changed from review to review_passed

comment:18 Changed 2 years ago by garry.yao

  • Status changed from review_passed to closed
  • Resolution set to fixed

Fixed with [7444].

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