JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
vanilla ckeditor-3.2.2
[ckeditor.git] / _source / plugins / smiley / dialogs / smiley.js
index 5127be2..e13439b 100644 (file)
@@ -1,11 +1,12 @@
 /*\r
-Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.\r
+Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.\r
 For licensing, see LICENSE.html or http://ckeditor.com/license\r
 */\r
 \r
 CKEDITOR.dialog.add( 'smiley', function( editor )\r
 {\r
        var config = editor.config,\r
+               lang = editor.lang.smiley,\r
                images = config.smiley_images,\r
                columns = 8,\r
                i;\r
@@ -44,6 +45,7 @@ CKEDITOR.dialog.add( 'smiley', function( editor )
                editor.insertElement( img );\r
 \r
                dialog.hide();\r
+               evt.data.preventDefault();\r
        };\r
 \r
        var onKeydown = CKEDITOR.tools.addFunction( function( ev, element )\r
@@ -53,28 +55,9 @@ CKEDITOR.dialog.add( 'smiley', function( editor )
                var relative, nodeToMove;\r
 \r
                var keystroke = ev.getKeystroke();\r
+               var rtl = editor.lang.dir == 'rtl';\r
                switch ( keystroke )\r
                {\r
-                       // RIGHT-ARROW\r
-                       case 39 :\r
-                               // relative is TD\r
-                               if ( ( relative = element.getParent().getNext() ) )\r
-                               {\r
-                                       nodeToMove = relative.getChild( 0 );\r
-                                       nodeToMove.focus();\r
-                               }\r
-                               ev.preventDefault();\r
-                               break;\r
-                       // LEFT-ARROW\r
-                       case 37 :\r
-                               // relative is TD\r
-                               if ( ( relative = element.getParent().getPrevious() ) )\r
-                               {\r
-                                       nodeToMove = relative.getChild( 0 );\r
-                                       nodeToMove.focus();\r
-                               }\r
-                               ev.preventDefault();\r
-                               break;\r
                        // UP-ARROW\r
                        case 38 :\r
                                // relative is TR\r
@@ -102,6 +85,9 @@ CKEDITOR.dialog.add( 'smiley', function( editor )
                                onClick( { data: ev } );\r
                                ev.preventDefault();\r
                                break;\r
+\r
+                       // RIGHT-ARROW\r
+                       case rtl ? 37 : 39 :\r
                        // TAB\r
                        case 9 :\r
                                // relative is TD\r
@@ -120,6 +106,9 @@ CKEDITOR.dialog.add( 'smiley', function( editor )
                                        ev.preventDefault(true);\r
                                }\r
                                break;\r
+\r
+                       // LEFT-ARROW\r
+                       case rtl ? 39 : 37 :\r
                        // SHIFT + TAB\r
                        case CKEDITOR.SHIFT + 9 :\r
                                // relative is TD\r
@@ -144,27 +133,37 @@ CKEDITOR.dialog.add( 'smiley', function( editor )
        });\r
 \r
        // Build the HTML for the smiley images table.\r
+       var labelId = 'smiley_emtions_label' + CKEDITOR.tools.getNextNumber();\r
        var html =\r
        [\r
-               '<table cellspacing="2" cellpadding="2"',\r
+               '<div>' +\r
+               '<span id="' + labelId + '" class="cke_voice_label">' + lang.options +'</span>',\r
+               '<table role="listbox" aria-labelledby="' + labelId + '" style="width:100%;height:100%" cellspacing="2" cellpadding="2"',\r
                CKEDITOR.env.ie && CKEDITOR.env.quirks ? ' style="position:absolute;"' : '',\r
                '><tbody>'\r
        ];\r
 \r
-       for ( i = 0 ; i < images.length ; i++ )\r
+       var size = images.length;\r
+       for ( i = 0 ; i < size ; i++ )\r
        {\r
                if ( i % columns === 0 )\r
                        html.push( '<tr>' );\r
 \r
+               var smileyLabelId = 'cke_smile_label_' + i + '_' + CKEDITOR.tools.getNextNumber();\r
                html.push(\r
                        '<td class="cke_dark_background cke_hand cke_centered" style="vertical-align: middle;">' +\r
-                               '<a href="javascript:void(0)" class="cke_smile" tabindex="-1" onkeydown="CKEDITOR.tools.callFunction( ', onKeydown, ', event, this );">',\r
+                               '<a href="javascript:void(0)" role="option"',\r
+                                       ' aria-posinset="' + ( i +1 ) + '"',\r
+                                       ' aria-setsize="' + size + '"',\r
+                                       ' aria-labelledby="' + smileyLabelId + '"',\r
+                                       ' class="cke_smile" tabindex="-1" onkeydown="CKEDITOR.tools.callFunction( ', onKeydown, ', event, this );">',\r
                                        '<img class="hand" title="', config.smiley_descriptions[i], '"' +\r
                                                ' cke_src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '" alt="', config.smiley_descriptions[i], '"',\r
                                                ' src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '"',\r
                                                // IE BUG: Below is a workaround to an IE image loading bug to ensure the image sizes are correct.\r
                                                ( CKEDITOR.env.ie ? ' onload="this.setAttribute(\'width\', 2); this.removeAttribute(\'width\');" ' : '' ),\r
                                        '>' +\r
+                                       '<span id="' + smileyLabelId + '" class="cke_voice_label">' +config.smiley_descriptions[ i ]  + '</span>' +\r
                                '</a>',\r
                        '</td>' );\r
 \r
@@ -179,7 +178,7 @@ CKEDITOR.dialog.add( 'smiley', function( editor )
                html.push( '</tr>' );\r
        }\r
 \r
-       html.push( '</tbody></table>' );\r
+       html.push( '</tbody></table></div>' );\r
 \r
        var smileySelector =\r
        {\r
@@ -191,11 +190,11 @@ CKEDITOR.dialog.add( 'smiley', function( editor )
                },\r
                focus : function()\r
                {\r
-                       var firstSmile = this.getElement().getChild( [0, 0, 0, 0] );\r
+                       var firstSmile = this.getElement().getElementsByTag( 'a' ).getItem( 0 );\r
                        firstSmile.focus();\r
                },\r
                onClick : onClick,\r
-               style : 'width: 100%; height: 100%; border-collapse: separate;'\r
+               style : 'width: 100%; border-collapse: separate;'\r
        };\r
 \r
        return {\r