refinerycms-ckeditor 0.1.4 → 0.2.0

data/app/assets/javascripts/ckeditor/_source/plugins/a11yhelp/lang/zh-cn.js

@@ -0,0 +1,89 @@
+/*
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+*/
+
+CKEDITOR.plugins.setLang( 'a11yhelp', 'zh-cn',
+{
+	accessibilityHelp :
+	{
+		title : '辅助说明',
+		contents : '帮助内容。要关闭此对话框请按 ESC 键。',
+		legend :
+		[
+			{
+				name : '常规',
+				items :
+						[
+							{
+								name : '编辑器工具栏',
+								legend:
+									'按 ${toolbarFocus} 以导航到工具栏，使用 TAB 键或 SHIFT+TAB 组合键以选择工具栏组，使用左右箭头键以选择按钮，按空格键或回车键以应用选中的按钮。'
+							},
+
+							{
+								name : '编辑器对话框',
+								legend :
+									'在对话框内，TAB键移动到下一个字段，SHIFT + TAB 移动到上一个字段，ENTER键提交对话框，ESC键取消对话框。对于有多标签的对话框，用ALT + F10来移到标签列表。然后用TAB键或者向右箭头来移动到下一个标签；SHIFT + TAB或者向左箭头移动到上一个标签。用SPACE或者ENTER选择标签。'
+							},
+
+							{
+								name : '编辑器上下文菜单',
+								legend :
+									'用 ${contextMenu}或者 应用程序键 打开上下文菜单。然后用TAB键或者向下箭头来移动到下一个菜单项；SHIFT + TAB或者向上箭头移动到上一个菜单项。用SPACE或者ENTER选择菜单项。用SPACE，ENTER或者向右箭头打开子菜单。返回菜单用ESC键或者向左箭头。用ESC关闭上下文菜单。'
+							},
+
+							{
+								name : '编辑器列表框',
+								legend :
+									'在列表框中，移到下一列表项用TAB键或者向下箭头。移到上一列表项用SHIFT + TAB或者向上箭头，用SPACE或者ENTER选择列表项。用ESC收起列表框。'
+							},
+
+							{
+								name : '编辑器元素路径栏',
+								legend :
+									'按 ${elementsPathFocus} 以导航到元素路径栏，使用 TAB 键或右箭头键选择下一个元素，使用 SHIFT+TAB 组合键或左箭头键选择上一个元素，按空格键或回车键以选定编辑器里的元素。'
+							}
+						]
+			},
+			{
+				name : '命令',
+				items :
+						[
+							{
+								name : ' 撤消命令',
+								legend : '按 ${undo}'
+							},
+							{
+								name : ' 重做命令',
+								legend : '按 ${redo}'
+							},
+							{
+								name : ' 加粗命令',
+								legend : '按 ${bold}'
+							},
+							{
+								name : ' 倾斜命令',
+								legend : '按 ${italic}'
+							},
+							{
+								name : ' 下划线命令',
+								legend : '按 ${underline}'
+							},
+							{
+								name : ' 链接命令',
+								legend : '按 ${link}'
+							},
+							{
+								name : ' 工具栏折叠命令',
+								legend : '按 ${toolbarCollapse}'
+							},
+							{
+								name : ' 无障碍设计说明',
+								legend : '按 ${a11yHelp}'
+							}
+						]
+			}
+		]
+	}
+});

data/app/assets/javascripts/ckeditor/_source/plugins/a11yhelp/plugin.js

@@ -1,5 +1,5 @@
 /*
-Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 
@@ -16,7 +16,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
 	CKEDITOR.plugins.add( pluginName,
 	{
 		// List of available localizations.
-		availableLangs : { en:1, he:1 },
+		availableLangs : { cs:1, cy:1, da:1, de:1, el:1, en:1, eo:1, fa:1, fi:1, fr:1, gu:1, he:1, it:1, mk:1, nb:1, nl:1, no:1, tr:1, ug:1, vi:1, 'zh-cn':1 },
 
 		init : function( editor )
 		{

data/app/assets/javascripts/ckeditor/_source/plugins/about/dialogs/about.js

@@ -1,5 +1,5 @@
 /*
-Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 

data/app/assets/javascripts/ckeditor/_source/plugins/about/plugin.js

@@ -1,5 +1,5 @@
 /*
-Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 

data/app/assets/javascripts/ckeditor/_source/plugins/adobeair/plugin.js

@@ -1,5 +1,5 @@
 /*
-Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 

data/app/assets/javascripts/ckeditor/_source/plugins/ajax/plugin.js

@@ -1,5 +1,5 @@
 /*
-Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 

data/app/assets/javascripts/ckeditor/_source/plugins/autogrow/plugin.js

@@ -1,5 +1,5 @@
 /*
-Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 
@@ -67,7 +67,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
 		{
 			editor.addCommand( 'autogrow', { exec : resizeEditor, modes : { wysiwyg:1 }, readOnly: 1, canUndo: false, editorFocus: false } );
 
-			var eventsList = { contentDom:1, key:1, selectionChange:1, insertElement:1 };
+			var eventsList = { contentDom:1, key:1, selectionChange:1, insertElement:1, mode:1 };
 			editor.config.autoGrow_onStartup && ( eventsList[ 'instanceReady' ] = 1 );
 			for ( var eventName in eventsList )
 			{

data/app/assets/javascripts/ckeditor/_source/plugins/basicstyles/plugin.js

@@ -1,5 +1,5 @@
 /*
-Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 

data/app/assets/javascripts/ckeditor/_source/plugins/bbcode/plugin.js

@@ -1,5 +1,5 @@
 /*
-Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 

data/app/assets/javascripts/ckeditor/_source/plugins/bidi/plugin.js

@@ -1,5 +1,5 @@
 /*
-Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 

data/app/assets/javascripts/ckeditor/_source/plugins/blockquote/plugin.js

@@ -1,5 +1,5 @@
 /*
-Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 

data/app/assets/javascripts/ckeditor/_source/plugins/button/plugin.js

@@ -1,5 +1,5 @@
 /*
-Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 

data/app/assets/javascripts/ckeditor/_source/plugins/clipboard/dialogs/paste.js

@@ -1,5 +1,5 @@
 /*
-Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 
@@ -45,7 +45,7 @@ CKEDITOR.dialog.add( 'paste', function( editor )
 
 				case 9 :
 				case CKEDITOR.SHIFT + 9 :
-					this.changeFocus( true );
+					this.changeFocus( 1 );
 					processed = 1;
 			}
 

data/app/assets/javascripts/ckeditor/_source/plugins/clipboard/plugin.js

@@ -1,5 +1,5 @@
 /*
-Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 
@@ -16,10 +16,10 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
 		var doc = editor.document,
 			body = doc.getBody();
 
-		var enabled = 0;
+		var enabled = false;
 		var onExec = function()
 		{
-			enabled = 1;
+			enabled = true;
 		};
 
 		// The following seems to be the only reliable way to detect that
@@ -135,11 +135,8 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
 
 				var body = this.document.getBody();
 
-				// Simulate 'beforepaste' event for all none-IEs.
-				if ( !CKEDITOR.env.ie && body.fire( 'beforepaste' ) )
-					event.cancel();
 				// Simulate 'paste' event for Opera/Firefox2.
-				else if ( CKEDITOR.env.opera
+				if ( CKEDITOR.env.opera
 						 || CKEDITOR.env.gecko && CKEDITOR.env.version < 10900 )
 					body.fire( 'paste' );
 				return;
@@ -226,8 +223,9 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
 		// Wait a while and grab the pasted contents
 		window.setTimeout( function()
 		{
-			mode == 'text' && CKEDITOR.env.gecko && editor.focusGrabber.focus();
-			pastebin.remove();
+			// Restore properly the document focus. (#5684, #8849)
+			editor.document.getBody().focus();
+
 			editor.removeListener( 'selectionChange', cancel );
 
 			// Grab the HTML contents.
@@ -240,7 +238,9 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
 						 && ( bogusSpan.is && bogusSpan.hasClass( 'Apple-style-span' ) ) ?
 							bogusSpan : pastebin );
 
+			// IE7: selection must go before removing paste. (#8691)
 			sel.selectBookmarks( bms );
+			pastebin.remove();
 			callback( pastebin[ 'get' + ( mode == 'text' ? 'Value' : 'Html' ) ]() );
 		}, 0 );
 	}
@@ -375,11 +375,18 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
 				editor.on( 'contentDom', function()
 				{
 					var body = editor.document.getBody();
-					body.on( CKEDITOR.env.webkit ? 'paste' : 'beforepaste', function( evt )
+
+					// Intercept the paste before it actually takes place.
+					body.on( !CKEDITOR.env.ie ? 'paste' : 'beforepaste', function( evt )
 						{
 							if ( depressBeforeEvent )
 								return;
 
+							// Dismiss the (wrong) 'beforepaste' event fired on toolbar menu open.
+							var domEvent = evt.data && evt.data.$;
+							if ( CKEDITOR.env.ie && domEvent && !domEvent.ctrlKey )
+								return;
+
 							// Fire 'beforePaste' event so clipboard flavor get customized
 							// by other plugins.
 							var eventData =  { mode : 'html' };
@@ -398,12 +405,31 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
 							} );
 						});
 
-					// Dismiss the (wrong) 'beforepaste' event fired on context menu open. (#7953)
-					body.on( 'contextmenu', function()
+					if ( CKEDITOR.env.ie )
 					{
-						depressBeforeEvent = 1;
-						setTimeout( function() { depressBeforeEvent = 0; }, 10 );
-					});
+						// Dismiss the (wrong) 'beforepaste' event fired on context menu open. (#7953)
+						body.on( 'contextmenu', function()
+						{
+							depressBeforeEvent = 1;
+							// Important: The following timeout will be called only after menu closed.
+							setTimeout( function() { depressBeforeEvent = 0; }, 0 );
+						} );
+
+						// Handle IE's late coming "paste" event when pasting from
+						// browser toolbar/context menu.
+						body.on( 'paste', function( evt )
+						{
+							if ( !editor.document.getById( 'cke_pastebin' ) )
+							{
+								// Prevent native paste.
+								evt.data.preventDefault();
+
+								depressBeforeEvent = 0;
+								// Resort to the paste command.
+								pasteCmd.exec( editor );
+							}
+						} );
+					}
 
 					body.on( 'beforecut', function() { !depressBeforeEvent && fixCut( editor ); } );
 

data/app/assets/javascripts/ckeditor/_source/plugins/colorbutton/plugin.js

@@ -1,5 +1,5 @@
 /*
-Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 
@@ -93,8 +93,7 @@ CKEDITOR.plugins.add( 'colorbutton',
 		function renderColors( panel, type, colorBoxId )
 		{
 			var output = [],
-				colors = config.colorButton_colors.split( ',' ),
-				total = colors.length + ( config.colorButton_enableMore ? 2 : 1 );
+				colors = config.colorButton_colors.split( ',' );
 
 			var clickFn = CKEDITOR.tools.addFunction( function( color, type )
 				{
@@ -157,7 +156,7 @@ CKEDITOR.plugins.add( 'colorbutton',
 					' title="', lang.auto, '"' +
 					' onclick="CKEDITOR.tools.callFunction(', clickFn, ',null,\'', type, '\');return false;"' +
 					' href="javascript:void(\'', lang.auto, '\')"' +
-					' role="option" aria-posinset="1" aria-setsize="', total, '">' +
+					' role="option">' +
 					'<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' +
 						'<tr>' +
 							'<td>' +
@@ -194,7 +193,7 @@ CKEDITOR.plugins.add( 'colorbutton',
 							' title="', colorLabel, '"' +
 							' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'', colorName, '\',\'', type, '\'); return false;"' +
 							' href="javascript:void(\'', colorLabel, '\')"' +
-							' role="option" aria-posinset="', ( i + 2 ), '" aria-setsize="', total, '">' +
+							' role="option">' +
 							'<span class="cke_colorbox" style="background-color:#', colorCode, '"></span>' +
 						'</a>' +
 					'</td>' );
@@ -211,7 +210,7 @@ CKEDITOR.plugins.add( 'colorbutton',
 								' title="', lang.more, '"' +
 								' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'?\',\'', type, '\');return false;"' +
 								' href="javascript:void(\'', lang.more, '\')"',
-								' role="option" aria-posinset="', total, '" aria-setsize="', total, '">',
+								' role="option">',
 								lang.more,
 							'</a>' +
 						'</td>' );	// tr is later in the code.

data/app/assets/javascripts/ckeditor/_source/plugins/colordialog/dialogs/colordialog.js

@@ -1,5 +1,5 @@
 /*
-Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 
@@ -8,7 +8,6 @@ CKEDITOR.dialog.add( 'colordialog', function( editor )
 		// Define some shorthands.
 		var $el = CKEDITOR.dom.element,
 			$doc = CKEDITOR.document,
-			$tools = CKEDITOR.tools,
 			lang = editor.lang.colordialog;
 
 		// Reference the dialog.
@@ -20,34 +19,66 @@ CKEDITOR.dialog.add( 'colordialog', function( editor )
 			html : ' '
 		};
 
+		var selected;
+
 		function clearSelected()
 		{
 			$doc.getById( selHiColorId ).removeStyle( 'background-color' );
 			dialog.getContentElement( 'picker', 'selectedColor' ).setValue( '' );
+			selected && selected.removeAttribute( 'aria-selected' );
+			selected = null;
 		}
 
 		function updateSelected( evt )
 		{
-			if ( ! ( evt instanceof CKEDITOR.dom.event ) )
-				evt = new CKEDITOR.dom.event( evt );
-
-			var target = evt.getTarget(),
+			var target = evt.data.getTarget(),
 				color;
 
-			if ( target.getName() == 'a' && ( color = target.getChild( 0 ).getHtml() ) )
+			if ( target.getName() == 'td' &&
+				 ( color = target.getChild( 0 ).getHtml() ) )
+			{
+				selected = target;
+				selected.setAttribute( 'aria-selected', true );
 				dialog.getContentElement( 'picker', 'selectedColor' ).setValue( color );
+			}
+		}
+
+		// Basing black-white decision off of luma scheme using the Rec. 709 version
+		function whiteOrBlack( color )
+		{
+			color = color.replace( /^#/, '' );
+			for ( var i = 0, rgb = []; i <= 2; i++ )
+				rgb[i] = parseInt( color.substr( i * 2, 2 ), 16 );
+			var luma = (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]);
+			return '#' + ( luma >= 165 ? '000' : 'fff' );
 		}
 
+		// Distinguish focused and hover states.
+		var focused, hovered;
+
+		// Apply highlight style.
 		function updateHighlight( event )
 		{
-			if ( ! ( event instanceof CKEDITOR.dom.event ) )
-				event = event.data;
+			// Convert to event.
+			!event.name && ( event = new CKEDITOR.event( event ) );
 
-			var target = event.getTarget(),
-					color;
+			var isFocus = !(/mouse/).test( event.name ),
+				target = event.data.getTarget(),
+				color;
 
-			if ( target.getName() == 'a' && ( color = target.getChild( 0 ).getHtml() ) )
+			if ( target.getName() == 'td' && ( color = target.getChild( 0 ).getHtml() ) )
 			{
+				removeHighlight( event );
+
+				isFocus ? focused = target : hovered = target;
+
+				// Apply outline style to show focus.
+				if ( isFocus )
+				{
+					target.setStyle( 'border-color', whiteOrBlack( color ) );
+					target.setStyle( 'border-style', 'dotted' );
+				}
+
 				$doc.getById( hicolorId ).setStyle( 'background-color', color );
 				$doc.getById( hicolorTextId ).setHtml( color );
 			}
@@ -55,22 +86,41 @@ CKEDITOR.dialog.add( 'colordialog', function( editor )
 
 		function clearHighlight()
 		{
+			var color = focused.getChild( 0 ).getHtml();
+			focused.setStyle( 'border-color', color );
+			focused.setStyle( 'border-style', 'solid' );
 			$doc.getById( hicolorId ).removeStyle( 'background-color' );
 			$doc.getById( hicolorTextId ).setHtml( '&nbsp;' );
+			focused = null;
 		}
 
-		var onMouseout = $tools.addFunction( clearHighlight ),
-			onClick = updateSelected,
-			onClickHandler = CKEDITOR.tools.addFunction( onClick ),
-			onFocus = updateHighlight,
-			onBlur = clearHighlight;
+		// Remove previously focused style.
+		function removeHighlight( event )
+		{
+			var isFocus = !(/mouse/).test( event.name ),
+				target = isFocus && focused;
+
+			if ( target )
+			{
+				var color = target.getChild( 0 ).getHtml();
+				target.setStyle( 'border-color', color );
+				target.setStyle( 'border-style', 'solid' );
+			}
+
+			if ( ! ( focused || hovered ) )
+			{
+				$doc.getById( hicolorId ).removeStyle( 'background-color' );
+				$doc.getById( hicolorTextId ).setHtml( '&nbsp;' );
+			}
+		}
 
-		var onKeydownHandler = CKEDITOR.tools.addFunction( function( ev )
+		function onKeyStrokes( evt )
 		{
-			ev = new CKEDITOR.dom.event( ev );
-			var element = ev.getTarget();
+			var domEvt = evt.data;
+
+			var element = domEvt.getTarget();
 			var relative, nodeToMove;
-			var keystroke = ev.getKeystroke(),
+			var keystroke = domEvt.getKeystroke(),
 				rtl = editor.lang.dir == 'rtl';
 
 			switch ( keystroke )
@@ -78,100 +128,93 @@ CKEDITOR.dialog.add( 'colordialog', function( editor )
 				// UP-ARROW
 				case 38 :
 					// relative is TR
-					if ( ( relative = element.getParent().getParent().getPrevious() ) )
+					if ( ( relative = element.getParent().getPrevious() ) )
 					{
-						nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] );
+						nodeToMove = relative.getChild( [ element.getIndex() ] );
 						nodeToMove.focus();
-						onBlur( ev, element );
-						onFocus( ev, nodeToMove );
 					}
-					ev.preventDefault();
+					domEvt.preventDefault();
 					break;
 				// DOWN-ARROW
 				case 40 :
 					// relative is TR
-					if ( ( relative = element.getParent().getParent().getNext() ) )
+					if ( ( relative = element.getParent().getNext() ) )
 					{
-						nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] );
+						nodeToMove = relative.getChild( [ element.getIndex() ] );
 						if ( nodeToMove && nodeToMove.type == 1 )
 						{
 							nodeToMove.focus();
-							onBlur( ev, element );
-							onFocus( ev, nodeToMove );
 						}
 					}
-					ev.preventDefault();
+					domEvt.preventDefault();
 					break;
+
 				// SPACE
-				// ENTER is already handled as onClick
+				// ENTER
 				case 32 :
-					onClick( ev );
-					ev.preventDefault();
+				case 13 :
+					updateSelected( evt );
+					domEvt.preventDefault();
 					break;
 
 				// RIGHT-ARROW
 				case rtl ? 37 : 39 :
 					// relative is TD
-					if ( ( relative = element.getParent().getNext() ) )
+					if ( ( nodeToMove = element.getNext() ) )
 					{
-						nodeToMove = relative.getChild( 0 );
 						if ( nodeToMove.type == 1 )
 						{
 							nodeToMove.focus();
-							onBlur( ev, element );
-							onFocus( ev, nodeToMove );
-							ev.preventDefault( true );
+							domEvt.preventDefault( true );
 						}
-						else
-							onBlur( null, element );
 					}
 					// relative is TR
-					else if ( ( relative = element.getParent().getParent().getNext() ) )
+					else if ( ( relative = element.getParent().getNext() ) )
 					{
-						nodeToMove = relative.getChild( [ 0, 0 ] );
+						nodeToMove = relative.getChild( [ 0 ] );
 						if ( nodeToMove && nodeToMove.type == 1 )
 						{
 							nodeToMove.focus();
-							onBlur( ev, element );
-							onFocus( ev, nodeToMove );
-							ev.preventDefault( true );
+							domEvt.preventDefault( true );
 						}
-						else
-							onBlur( null, element );
 					}
 					break;
 
 				// LEFT-ARROW
 				case rtl ? 39 : 37 :
 					// relative is TD
-					if ( ( relative = element.getParent().getPrevious() ) )
+					if ( ( nodeToMove = element.getPrevious() ) )
 					{
-						nodeToMove = relative.getChild( 0 );
 						nodeToMove.focus();
-						onBlur( ev, element );
-						onFocus( ev, nodeToMove );
-						ev.preventDefault( true );
+						domEvt.preventDefault( true );
 					}
 					// relative is TR
-					else if ( ( relative = element.getParent().getParent().getPrevious() ) )
+					else if ( ( relative = element.getParent().getPrevious() ) )
 					{
-						nodeToMove = relative.getLast().getChild( 0 );
+						nodeToMove = relative.getLast();
 						nodeToMove.focus();
-						onBlur( ev, element );
-						onFocus( ev, nodeToMove );
-						ev.preventDefault( true );
+						domEvt.preventDefault( true );
 					}
-					else
-						onBlur( null, element );
 					break;
 				default :
 					// Do not stop not handled events.
 					return;
 			}
-		});
+		}
 
 		function createColorTable()
 		{
+			table = CKEDITOR.dom.element.createFromHtml
+			(
+				'<table tabIndex="-1" aria-label="' + lang.options + '"' +
+				' role="grid" style="border-collapse:separate;" cellspacing="0">' +
+				'<caption class="cke_voice_label">' + lang.options + '</caption>' +
+				'<tbody role="presentation"></tbody></table>'
+			);
+
+			table.on( 'mouseover', updateHighlight );
+			table.on( 'mouseout', removeHighlight );
+
 			// Create the base colors array.
 			var aColors = [ '00', '33', '66', '99', 'cc', 'ff' ];
 
@@ -180,13 +223,14 @@ CKEDITOR.dialog.add( 'colordialog', function( editor )
 			{
 				for ( var i = rangeA ; i < rangeA + 3 ; i++ )
 				{
-					var row = table.$.insertRow( -1 );
+					var row = new $el( table.$.insertRow( -1 ) );
+					row.setAttribute( 'role', 'row' );
 
 					for ( var j = rangeB ; j < rangeB + 3 ; j++ )
 					{
 						for ( var n = 0 ; n < 6 ; n++ )
 						{
-							appendColorCell( row, '#' + aColors[j] + aColors[n] + aColors[i] );
+							appendColorCell( row.$, '#' + aColors[j] + aColors[n] + aColors[i] );
 						}
 					}
 				}
@@ -197,20 +241,23 @@ CKEDITOR.dialog.add( 'colordialog', function( editor )
 			{
 				var cell = new $el( targetRow.insertCell( -1 ) );
 				cell.setAttribute( 'class', 'ColorCell' );
+				cell.setAttribute( 'tabIndex', -1 );
+				cell.setAttribute( 'role', 'gridcell' );
+
+				cell.on( 'keydown', onKeyStrokes );
+				cell.on( 'click', updateSelected );
+				cell.on( 'focus', updateHighlight );
+				cell.on( 'blur', removeHighlight );
+
 				cell.setStyle( 'background-color', color );
+				cell.setStyle( 'border', '1px solid ' + color );
 
-				cell.setStyle( 'width', '15px' );
-				cell.setStyle( 'height', '15px' );
-
-				var index = cell.$.cellIndex + 1 + 18 * targetRow.rowIndex;
-				cell.append( CKEDITOR.dom.element.createFromHtml(
-						'<a href="javascript: void(0);" role="option"' +
-						' aria-posinset="' + index + '"' +
-						' aria-setsize="' + 13 * 18 + '"' +
-						' style="cursor: pointer;display:block;width:100%;height:100% " title="'+ CKEDITOR.tools.htmlEncode( color )+ '"' +
-						' onkeydown="CKEDITOR.tools.callFunction( ' + onKeydownHandler + ', event, this )"' +
-						' onclick="CKEDITOR.tools.callFunction(' + onClickHandler + ', event, this ); return false;"' +
-						' tabindex="-1"><span class="cke_voice_label">' + color + '</span>&nbsp;</a>', CKEDITOR.document ) );
+				cell.setStyle( 'width', '14px' );
+				cell.setStyle( 'height', '14px' );
+
+				var colorLabel = numbering( 'color_table_cell' );
+				cell.setAttribute( 'aria-labelledby',colorLabel );
+				cell.append( CKEDITOR.dom.element.createFromHtml( '<span id="' + colorLabel + '" class="cke_voice_label">' + color + '</span>', CKEDITOR.document ) );
 			}
 
 			appendColorRow( 0, 0 );
@@ -219,25 +266,22 @@ CKEDITOR.dialog.add( 'colordialog', function( editor )
 			appendColorRow( 3, 3 );
 
 			// Create the last row.
-			var oRow = table.$.insertRow(-1) ;
+			var oRow = new $el( table.$.insertRow( -1 ) ) ;
+			oRow.setAttribute( 'role', 'row' );
 
 			// Create the gray scale colors cells.
 			for ( var n = 0 ; n < 6 ; n++ )
 			{
-				appendColorCell( oRow, '#' + aColors[n] + aColors[n] + aColors[n] ) ;
+				appendColorCell( oRow.$, '#' + aColors[n] + aColors[n] + aColors[n] ) ;
 			}
 
 			// Fill the row with black cells.
 			for ( var i = 0 ; i < 12 ; i++ )
 			{
-				appendColorCell( oRow, '#000000' ) ;
+				appendColorCell( oRow.$, '#000000' ) ;
 			}
 		}
 
-		var table = new $el( 'table' );
-		createColorTable();
-		var html = table.getHtml();
-
 		var numbering = function( id )
 			{
 				return CKEDITOR.tools.getNextId() + '_' + id;
@@ -245,7 +289,9 @@ CKEDITOR.dialog.add( 'colordialog', function( editor )
 			hicolorId = numbering( 'hicolor' ),
 			hicolorTextId = numbering( 'hicolortext' ),
 			selHiColorId = numbering( 'selhicolor' ),
-			tableLabelId = numbering( 'color_table_label' );
+			table;
+
+		createColorTable();
 
 		return {
 			title : lang.title,
@@ -256,6 +302,11 @@ CKEDITOR.dialog.add( 'colordialog', function( editor )
 				// Update reference.
 				dialog = this;
 			},
+			onHide : function()
+			{
+				clearSelected();
+				clearHighlight();
+			},
 			contents : [
 				{
 					id : 'picker',
@@ -271,20 +322,16 @@ CKEDITOR.dialog.add( 'colordialog', function( editor )
 							[
 								{
 									type : 'html',
-									html :	'<table role="listbox" aria-labelledby="' + tableLabelId + '" onmouseout="CKEDITOR.tools.callFunction( ' + onMouseout + ' );">' +
-											( !CKEDITOR.env.webkit ? html : '' ) +
-										'</table><span id="' + tableLabelId + '" class="cke_voice_label">' + lang.options +'</span>',
+									html :	'<div></div>',
 									onLoad : function()
 									{
-										var table = CKEDITOR.document.getById( this.domId );
-										table.on( 'mouseover', updateHighlight );
-										// In WebKit, the table content must be inserted after this event call (#6150)
-										CKEDITOR.env.webkit && table.setHtml( html );
+										CKEDITOR.document.getById( this.domId ).append( table );
 									},
-									focus: function()
+									focus : function()
 									{
-										var firstColor = this.getElement().getElementsByTag( 'a' ).getItem( 0 );
-										firstColor.focus();
+										// Restore the previously focused cell,
+										// otherwise put the initial focus on the first table cell.
+										( focused || this.getElement().getElementsByTag( 'td' ).getItem( 0 ) ).focus();
 									}
 								},
 								spacer,