JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
vanilla ckeditor-3.2
[ckeditor.git] / _source / plugins / colorbutton / plugin.js
index f35ed2c..c87d068 100644 (file)
@@ -31,20 +31,22 @@ CKEDITOR.plugins.add( 'colorbutton',
 \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
@@ -55,7 +57,8 @@ CKEDITOR.plugins.add( 'colorbutton',
                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
@@ -98,8 +101,9 @@ CKEDITOR.plugins.add( 'colorbutton',
                                '<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
@@ -110,7 +114,7 @@ CKEDITOR.plugins.add( 'colorbutton',
                                                '</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
@@ -125,7 +129,8 @@ CKEDITOR.plugins.add( 'colorbutton',
                                                '<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
@@ -141,7 +146,8 @@ CKEDITOR.plugins.add( 'colorbutton',
                                                        '<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