Better focus indication and ability to style selected color in the color picker dialog

[Teresa Monahan]

Load any CKEditor sample and open the color picker dialog by clicking the 'More Colors..' option on the 'Text Color' or 'Background Color' toolbar icons for example. Use the keyboard to navigate the color table.

Problem: The focus indicator around the currently selected color is not very clear.

CKEditor relies on the browser to display visual focus, however this can be difficult to see against the different background colors. In fact the focus is not displayed at all in recent versions of FF.

We would like to be able to add our own styling to focused elements on the color picker dialog.This is already possible for the special characters dialog through the cke_light_background class. We would like a similar capability for the color picker dialog.

For example a CSS class could be added to the current selection on the color table in updateHighlight() and updateSelected() in colordialog/dialogs/colordialog.js. This class would then need to be removed when another color is selected.

As this is an accessibility concern, this is a high priority for us and we would appreciate a fix in a 3.6.x release.

[Jakub Ś]

We would like to be able to add our own styling to focused elements on the color picker dialog. This is already possible for the special characters dialog through the cke_light_background class.

Custom styling of currently selected color is a good idea, however IMO before this can added we first have to deal with #6749 as those two are related.

[Jakub Ś]

I have also noticed that #8523 is related.

[Jakub Ś]

#5960 is also related.

[Teresa Monahan]

Replying to j.swiderski:

We would like to be able to add our own styling to focused elements on the color picker dialog. This is already possible for the special characters dialog through the cke_light_background class.

Custom styling of currently selected color is a good idea, however IMO before this can added we first have to deal with #6749 as those two are related.

I disagree that #6749 needs to be resolved before this ticket. #6749 is more to do with how a selected value is persisted, not how it is styled. Whether the selected color is saved or not for the next usage, there should still be a way to style the selected color so that the user knows exactly which color is focused.

[Jakub Ś]

Applying style to current selection is different in deed to keeping focus on saved value.

I just thought that it would be better to find one solution for all of those mentioned bugs so that there wouldn't be any conflicts in the future.

IMHO ideal solution would be having two selections for last saved and current color - both styled differently.

1. If user has made some color changes - Last used color should be selected
2. If selected text has different color to the last used color then both colors should be selected/highlighted.
3. Would also be nice if both of these selections/highlights could be styled by user

This is how I see it.

[Jakub Ś]

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

[Marek Lewandowski]

Fixed with ​git:28c11e1ccf (merged to master).