Ticket #3042: 3042_2.patch

_source/plugins/listblock/plugin.js

@@ -29 +29 @@
                                         {
                                                 pendingHtml : [],
                                                 items : {},
+                                                // Rendering sequence of the list item ids.
+                                                itemList : [],
                                                 groups : {}
                                         };
                                 },
@@ -79 +81 @@
                                                         this._.started = 1;
                                                 }
 
-                                                this._.items[ value ] = id;
+                                                this._.itemList.push ( this._.items[ value ] = id );
 
                                                 pendingHtml.push( '<li id=cke_', id, ' class=cke_panel_listItem><a hidefocus=true href="javascript:void(\'', value, '\')" onclick="CKEDITOR.tools.callFunction(', this._.getClick(), ',\'', value, '\');">', html || value, '</a></li>' );
                                         },
-
+                                        
+                                        /**
+                                         *  Get the navigator cursor of the list items.
+                                         *  Note : This function is used for establish keyboard accessiblity through the list. 
+                                         */
+                                        getCursor : function()
+                                        {
+                                                var doc = this.element.getDocument(),
+                                                        idPrefix = 'cke_',
+                                                        self = this,
+                                                        itemList = self._.itemList,
+                                                        items = self._.items;
+                                                
+                                                var getItem = function ( itemIndex )
+                                                        {
+                                                                return doc.getById( idPrefix + itemList[ itemIndex ] );
+                                                        }, 
+                                                        getItemLink = function ( itemIndex )
+                                                        {
+                                                                return getItem( itemIndex ).getFirst().$;
+                                                        },
+                                                        getItemValue = function ( itemIndex )
+                                                        {
+                                                                for( var i in  items )
+                                                                {
+                                                                        if( items [ i ] == itemList[ itemIndex ] )
+                                                                                return i;
+                                                                }
+                                                        },
+                                                        isHiddenItem = function( itemIndex ){
+                                                                return getItem( itemIndex ).getComputedStyle( 'display' ) == 'none';
+                                                        };
+                                                
+                                                return {
+                                                        
+                                                        currentIndex : -1,
+                                                        
+                                                        forward : function() {
+                                                                this.currentIndex = this.currentIndex == itemList.length -1 ? 0 : ( this.currentIndex + 1 ) ;
+                                                                if( isHiddenItem( this.currentIndex ) )
+                                                                        this.forward();
+                                                        },
+                                                        
+                                                        back : function()       {
+                                                                this.currentIndex = this.currentIndex <= 0 ?  itemList.length -1 : ( this.currentIndex - 1 );
+                                                                if( isHiddenItem( this.currentIndex ) )
+                                                                        this.back();
+                                                        },
+                                                        
+                                                        // Set current cursor position
+                                                        setCursor : function( itemValue )
+                                                        {
+                                                                var itemId = items[ itemValue ];
+                                                                var i, l = itemList.length;
+                                                                for (i = 0; i < l; i++) {
+                                                                        if( itemList[ i ] == itemId )
+                                                                        {
+                                                                                this.currentIndex = i;
+                                                                                return;
+                                                                        }
+                                                                }
+                                                        },
+                                                        
+                                                        focusAtCursor : function()
+                                                        {
+                                                                getItemLink( this.currentIndex ).focus();
+                                                                self.mark( getItemValue( this.currentIndex ) );                                                         
+                                                        },
+                                                        
+                                                        clickAtCursor: function()
+                                                        {
+                                                                getItemLink( this.currentIndex ).onclick();
+                                                        }
+                                                };
+                                        },
+                                        
                                         startGroup : function( title )
                                         {
                                                 this._.close();
@@ -157 +234 @@
 
                                         mark : function( value )
                                         {
-                                                if ( !this.multiSelect )
-                                                        this.unmarkAll();
-
+                                                if( this._.previousMarked )
+                                                        this.unmark( this._.previousMarked );
                                                 this.element.getDocument().getById( 'cke_' + this._.items[ value ] ).addClass( 'cke_selected' );
+                                                this._.previousMarked = value;
                                         },
 
                                         unmark : function( value )

_source/plugins/richcombo/plugin.js

@@ -47 +47 @@
                 this._ =
                 {
                         panelDefinition : panelDefinition,
-                        items : {}
+                        items : {},
+                        /**
+                         * @see {@link CKEDITOR.ui.listBlock::getCursor}
+                         */
+                        listItemCursor : null,
                 };
         },
 
@@ -100 +104 @@
                                                 _.committed = 1;
                                         }
                                         
+                                        _.listItemCursor = _.list.getCursor();
+                                        
                                         var value = this.getValue();
                                         if ( value )
+                                        {
                                                 _.list.mark( value );
+                                                
+                                                // Ignore initial cursor position of multiple select combo
+                                                if ( !this.multiSelect )
+                                                        _.listItemCursor.setCursor( value );
+                                        }
                                         else
                                                 _.list.unmarkAll();
+                                                
+                                        // Register combo key processing on CKEDITOR.ui.panel.
+                                        _.panel._.panel.onKeyDown = CKEDITOR.tools.bind( this.onPanelKeyDown, this );
+                                        _.panel.showBlock( this.id, new CKEDITOR.dom.element( $element ).getFirst(), 4 );
                                         
-                                        _.panel.showBlock( this.id, new CKEDITOR.dom.element( $element ).getFirst(), 4 );
                                 },
                                 this );
                                 
@@ -297 +312 @@
                 commit : function()
                 {
                         this._.list.commit();
+                },
+                
+                /**
+                 * Key navigation logic for combo panel.
+                 * @see {@link CKEDITOR.ui.panel.onKeyDown}
+                 */
+                onPanelKeyDown : function( keystroke )
+                {
+                        var cursor = this._.listItemCursor;
+                        switch ( keystroke )
+                        {
+                                case 40 :                                       // DOWN-ARROW
+                                case 9 :                                        // TAB
+                                        cursor.forward();
+                                        cursor.focusAtCursor();
+                                        break;
+                                case 38 :                                       // UP-ARROW
+                                case CKEDITOR.SHIFT + 9 :       // SHIFT + TAB
+                                        cursor.back();
+                                        cursor.focusAtCursor();
+                                        break;
+                                case 27 :                                       // ESC
+                                        this._.panel.hide();
+                                        break;
+                                case 13 :                                       // ENTER
+                                case 32 :                                       // SPACE
+                                        cursor.clickAtCursor();
+                                        break;
+                        }
                 }
         }
 });

_source/plugins/floatpanel/plugin.js

@@ -65 +65 @@
 
                 proto :
                 {
+                        
                         addBlock : function( name, block )
                         {
                                 return this._.panel.addBlock( name, block );
@@ -120 +121 @@
                                 else
                                         element.removeStyle( 'height' );
 
-                                // Configure the IFrame blur event. Do that only once.
-                                if ( !this._.blurSet )
+                                // Configure the Panel(IFrame) events only once.
+                                if ( !this._.panel._.eventInited )
                                 {
                                         // Non IE prefer the event into a window object.
-                                        var focused = CKEDITOR.env.ie ? iframe : new CKEDITOR.dom.window( iframe.$.contentWindow );
+                                        var focused = CKEDITOR.env.ie ? iframe : new CKEDITOR.dom.window( iframe.$.contentWindow ),
+                                                panelDoc = new CKEDITOR.dom.document( iframe.$.contentWindow.document );
 
                                         focused.on( 'blur', function()
                                                 {
@@ -139 +141 @@
                                                         this.hideChild();
                                                 },
                                                 this );
-
-                                        this._.blurSet = 1;
+                                        
+                                        panelDoc.on( 'keydown', function( evt ){
+                                                // Delegate key processing to specific control types.
+                                                if( this.onKeyDown )
+                                                {
+                                                        var keystroke = evt.data.getKeystroke();
+                                                        this.onKeyDown( keystroke );
+                                                        evt.data.preventDefault();
+                                                }
+                                        }, this._.panel );
+                                
+                                        this._.panel._.eventInited = true;
                                 }
 
                                 // Set the IFrame focus, so the blur event gets fired.

_source/plugins/panel/plugin.js

@@ -177 +177 @@
                 block.show();
                 
                 return block;
-        }
+        },
+        
+        /**
+         * This's a hook function provided by various panel based controls
+         * to handle keystrokes. When a control is opening it's own block,
+         * this function is required to be registered.
+         * 
+         * @param {String} keystroke The current keystroke presentaton. 
+         */
+        onKeyDown : null
 };
 
 CKEDITOR.ui.panel.block = function( blockHolder )