Opened 7 years ago

Closed 2 years ago

#8679 closed Bug (fixed)

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

Reported by: Teresa Monahan Owned by:
Priority: Normal Milestone: CKEditor 4.5.9
Component: General Version: 3.0
Keywords: IBM Cc: Damian, Satya Minnekanti

Description (last modified by Jakub Ś)

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.

Change History (9)

comment:1 Changed 7 years ago by Jakub Ś

Description: modified (diff)
Status: newconfirmed
Version: 3.6.3 (SVN - trunk)3.0

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.

comment:2 Changed 7 years ago by Jakub Ś

I have also noticed that #8523 is related.

comment:3 Changed 7 years ago by Jakub Ś

#5960 is also related.

comment:4 in reply to:  1 Changed 7 years ago by 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.

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

comment:6 Changed 7 years ago by Jakub Ś

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

comment:7 Changed 3 years ago by Anna Tomanek

Summary: Focus is not indicated clearly when navigating the color picker dialogBetter focus indication and ability to style selected color in the color picker dialog

comment:8 Changed 3 years ago by Marek Lewandowski

Milestone: CKEditor 4.5.9

comment:9 Changed 2 years ago by Marek Lewandowski

Resolution: fixed
Status: confirmedclosed

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

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