Opened 11 years ago

Closed 11 years ago

#3493 closed New Feature (fixed)

Toolbar needs to work in High Contrast mode

Reported by: Damian Owned by: Frederico Caldeira Knabben
Priority: Normal Milestone: CKEditor 3.0
Component: Accessibility Version:
Keywords: IBM Confirmed Review+ Cc:

Description

One accessibility requirement is that the editor be usable in High Contrast (HC) mode by a user who does not have access to the mouse or a screen reader. When the editor is viewed in HC mode, the toolbar icons become invisible. When using keyboard only, the user cannot easily identify the functions of the toolbar items.
The ideal solution would be that the toolbar has a different rendering for HC mode. The Dojo editor could be used as a reference on how to handle this case. Should it be too complicated to do the detection of HC mode in CKEditor, it would be acceptable if the editor had a configuration parameter to set it to HC mode, by its parent application.

Attachments (5)

3493.patch (9.3 KB) - added by Martin Kou 11 years ago.
3493_Changed.patch (9.5 KB) - added by Frederico Caldeira Knabben 11 years ago.
3493_2.patch (15.8 KB) - added by Martin Kou 11 years ago.
3493_3.patch (12.7 KB) - added by Frederico Caldeira Knabben 11 years ago.
3493_4.patch (12.8 KB) - added by Frederico Caldeira Knabben 11 years ago.

Download all attachments as: .zip

Change History (18)

comment:1 Changed 11 years ago by Artur Formella

Keywords: Confirmed added
Type: BugNew Feature

The easiest way is to create a new skin.

comment:2 Changed 11 years ago by Artur Formella

Priority: HighNormal

comment:3 Changed 11 years ago by Martin Kou

Owner: set to Martin Kou
Status: newassigned

comment:4 in reply to:  1 Changed 11 years ago by Frederico Caldeira Knabben

Replying to arczi:

The easiest way is to create a new skin.

A new skin would now actually help us here. High Contrast is not something to be configured in the browser, or the web application. It's a feature provided by the operating system (check out Vista or XP help on this).

In High Contrast, CSS background colors are not rendered, so our toolbar buttons icons and dialog borders are not visible. So, what we need here is a way to detect High Contrast, and then provide a special set of CSS features to render the editor differently on such case.

Changed 11 years ago by Martin Kou

Attachment: 3493.patch added

comment:5 Changed 11 years ago by Martin Kou

Keywords: Review? added

Changed 11 years ago by Frederico Caldeira Knabben

Attachment: 3493_Changed.patch added

comment:6 Changed 11 years ago by Frederico Caldeira Knabben

Keywords: Review- added; Review? removed

There are a few issues I would like to have for this first proposal for this feature:

  • The proposed ON state for the buttons make their size change. I would avoid it to not have the toolbar dancing. I've attached a new patch that adds a new way for it that works for Firefox only for now.
  • The Color buttons have no text.
  • The combos lost their right border.
  • The dialogs have no outer border.

I think we would offer some good support for it with the above things fixed. Other possible issues could be fixed on future versions.

Changed 11 years ago by Martin Kou

Attachment: 3493_2.patch added

comment:7 Changed 11 years ago by Martin Kou

Keywords: Review? added; Review- removed
  1. Fixed toolbar jumping with ON state in IE.
  2. Added hover effect for toolbar buttons.
  3. Added text to color buttons.
  4. Fixed missing right border in combos.
  5. Fixed missing round corners in toolbar buttons in Firefox.
  6. Added outer border for dialgos.
  7. Fixed invisible close button in dialogs.

The color grid in color popups aren't converted to text in high contrast mode yet, because converting them to text would require a major layout change in the color selection panels.

comment:8 Changed 11 years ago by Frederico Caldeira Knabben

Keywords: Review- added; Review? removed
Owner: changed from Martin Kou to Frederico Caldeira Knabben
Status: assignednew

Nice job Martin!

I have some small enhancements to it. I'll attach a new patch here.

Changed 11 years ago by Frederico Caldeira Knabben

Attachment: 3493_3.patch added

comment:9 Changed 11 years ago by Frederico Caldeira Knabben

Keywords: Review? added; Review- removed
Status: newassigned

This new patch simplifies the previous one a bit:

  • Avoids adding a new js file just for that small check.
  • Makes the check beforehand, when loading the editor code.
  • Reduced the class name to "cke_hc" to save a few bytes.
  • Uses "about:blank" for the background image. In this way we avoid having an HTTP request to the spacer file. Still need to check it on HTTPS.

comment:10 Changed 11 years ago by Martin Kou

Keywords: Review- added; Review? removed

The only problem left is a security warning message in IE6 with HTTPS. Otherwise it's working great.

Changed 11 years ago by Frederico Caldeira Knabben

Attachment: 3493_4.patch added

comment:11 Changed 11 years ago by Frederico Caldeira Knabben

Keywords: Review? added; Review- removed

comment:12 Changed 11 years ago by Martin Kou

Keywords: Review+ added; Review? removed

comment:13 Changed 11 years ago by Frederico Caldeira Knabben

Resolution: fixed
Status: assignedclosed

Fixed with 3505.

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