\r
panel :\r
{\r
- css : editor.skin.editor.css\r
+ css : editor.skin.editor.css,\r
+ attributes : { role : 'listbox', 'aria-label' : lang.panelTitle }\r
},\r
\r
- onBlock : function( panel, blockName )\r
+ onBlock : function( panel, block )\r
{\r
- var block = panel.addBlock( blockName );\r
block.autoSize = true;\r
block.element.addClass( 'cke_colorblock' );\r
block.element.setHtml( renderColors( panel, type ) );\r
\r
var keys = block.keys;\r
keys[ 39 ] = 'next'; // ARROW-RIGHT\r
+ keys[ 40 ] = 'next'; // ARROW-DOWN\r
keys[ 9 ] = 'next'; // TAB\r
keys[ 37 ] = 'prev'; // ARROW-LEFT\r
+ keys[ 38 ] = 'prev'; // ARROW-UP\r
keys[ CKEDITOR.SHIFT + 9 ] = 'prev'; // SHIFT + TAB\r
keys[ 32 ] = 'click'; // SPACE\r
}\r
function renderColors( panel, type )\r
{\r
var output = [],\r
- colors = config.colorButton_colors.split( ',' );\r
+ colors = config.colorButton_colors.split( ',' ),\r
+ total = colors.length + ( config.colorButton_enableMore ? 2 : 1 );\r
\r
var clickFn = CKEDITOR.tools.addFunction( function( color, type )\r
{\r
'<a class="cke_colorauto" _cke_focus=1 hidefocus=true' +\r
' title="', lang.auto, '"' +\r
' onclick="CKEDITOR.tools.callFunction(', clickFn, ',null,\'', type, '\');return false;"' +\r
- ' href="javascript:void(\'', lang.auto, '\')">' +\r
- '<table cellspacing=0 cellpadding=0 width="100%">' +\r
+ ' href="javascript:void(\'', lang.auto, '\')"' +\r
+ ' role="option" aria-posinset="1" aria-setsize="', total, '">' +\r
+ '<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' +\r
'<tr>' +\r
'<td>' +\r
'<span class="cke_colorbox" style="background-color:#000"></span>' +\r
'</tr>' +\r
'</table>' +\r
'</a>' +\r
- '<table cellspacing=0 cellpadding=0 width="100%">' );\r
+ '<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' );\r
\r
// Render the color boxes.\r
for ( var i = 0 ; i < colors.length ; i++ )\r
'<a class="cke_colorbox" _cke_focus=1 hidefocus=true' +\r
' title="', colorLabel, '"' +\r
' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'#', colorCode, '\',\'', type, '\'); return false;"' +\r
- ' href="javascript:void(\'', colorLabel, '\')">' +\r
+ ' href="javascript:void(\'', colorLabel, '\')"' +\r
+ ' role="option" aria-posinset="', ( i + 2 ), '" aria-setsize="', total, '">' +\r
'<span class="cke_colorbox" style="background-color:#', colorCode, '"></span>' +\r
'</a>' +\r
'</td>' );\r
'<a class="cke_colormore" _cke_focus=1 hidefocus=true' +\r
' title="', lang.more, '"' +\r
' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'?\',\'', type, '\');return false;"' +\r
- ' href="javascript:void(\'', lang.more, '\')">',\r
+ ' href="javascript:void(\'', lang.more, '\')"',\r
+ ' role="option" aria-posinset="', total, '" aria-setsize="', total, '">',\r
lang.more,\r
'</a>' +\r
'</td>' ); // It is later in the code.\r