Changeset 4902

Timestamp:

01/08/10 10:22:40 (3 years ago)

Author:

garry.yao

Message:

Enhance richo combo ARIA supports in following aspects:

1. Labeling combo list;
2. Adding multiple-select property to styles combo;

Location:

CKEditor/branches/features/aria/_source

Files:

• lang/en.js (modified) (1 diff)
• plugins/floatpanel/plugin.js (modified) (1 diff)
• plugins/font/plugin.js (modified) (1 diff)
• plugins/format/plugin.js (modified) (1 diff)
• plugins/listblock/plugin.js (modified) (1 diff)
• plugins/panel/plugin.js (modified) (2 diffs)
• plugins/richcombo/plugin.js (modified) (2 diffs)
• plugins/stylescombo/plugin.js (modified) (1 diff)

CKEditor/branches/features/aria/_source/lang/en.js

@@ -531 +531 @@
         {
                 label : 'Styles',
+                panelTitle : 'Formatting Styles',
                 panelVoiceLabel : 'Select a style',
                 panelTitle1 : 'Block Styles',

CKEditor/branches/features/aria/_source/plugins/floatpanel/plugin.js

@@ -238 +238 @@
                                                                 } );
 
+                                                        // Set the panel frame focus, so the blur event gets fired.
+                                                        block.element.focus();
+                                                        // We need this get fired manually because of unfired focus() function.
+                                                        this.allowBlur( true );
+
                                                 } , this );
 
                                                 panel.isLoaded ? panelLoad() : panel.onLoad = panelLoad;
 
-                                                // Set the panel frame focus, so the blur event gets fired.
-                                                CKEDITOR.tools.setTimeout( function()
-                                                        {
-                                                                if ( definition.voiceLabel )
-                                                                {
-                                                                        if ( CKEDITOR.env.gecko )
-                                                                        {
-                                                                                var container = iframe.getParent();
-                                                                                container.setAttribute( 'role', 'region' );
-                                                                                container.setAttribute( 'title', definition.voiceLabel );
-                                                                                iframe.setAttribute( 'role', 'region' );
-                                                                                iframe.setAttribute( 'title', ' ' );
-                                                                        }
-                                                                }
-
-                                                                block.element.focus();
-                                                                // We need this get fired manually because of unfired focus() function.
-                                                                this.allowBlur( true );
-
-                                                        }, 0, this);
                                         }, 0, this);
                                 this.visible = 1;

CKEditor/branches/features/aria/_source/plugins/font/plugin.js

@@ -31 +31 @@
                                 label : lang.label,
                                 title : lang.panelTitle,
-                                voiceLabel : lang.voiceLabel,
                                 className : 'cke_' + ( styleType == 'size' ? 'fontSize' : 'font' ),
-                                multiSelect : false,
-
                                 panel :
                                 {
                                         css : editor.skin.editor.css.concat( config.contentsCss ),
-                                        voiceLabel : lang.panelVoiceLabel
+                                        multiSelect : false,
+                                        aria : { 'aria-label' : lang.panelTitle, 'aria-describedby' : lang.panelVoiceLabel }
                                 },
 

CKEditor/branches/features/aria/_source/plugins/format/plugin.js

@@ -28 +28 @@
                                 label : lang.label,
                                 title : lang.panelTitle,
-                                voiceLabel : lang.voiceLabel,
                                 className : 'cke_format',
-                                multiSelect : false,
-
                                 panel :
                                 {
                                         css : editor.skin.editor.css.concat( config.contentsCss ),
-                                        voiceLabel : lang.panelVoiceLabel
+                                        multiSelect : false,
+                                        aria : { 'aria-label' : lang.panelTitle, 'aria-describedby' : lang.panelVoiceLabel }
                                 },
 

CKEditor/branches/features/aria/_source/plugins/listblock/plugin.js

@@ -19 +19 @@
                                 base : CKEDITOR.ui.panel.block,
 
-                                $ : function( blockHolder, multiSelect )
+                                $ : function( blockHolder, blockDefinition )
                                 {
+                                        blockDefinition = blockDefinition || {};
+
+                                        var aria = blockDefinition.aria || ( blockDefinition.aria = {} );
+                                        ( this.multiSelect = !!blockDefinition.multiSelect ) &&
+                                                ( aria[ 'aria-multiselectable' ] = true );
+                                        // Provide default role of 'listbox'.
+                                        !aria.role && ( aria.role = 'listbox' );
+                                        
                                         // Call the base contructor.
-                                        this.base( blockHolder );
-
-                                        this.element.setAttribute( 'role', 'listbox' );
-
-                                        this.multiSelect = !!multiSelect;
+                                        this.base.apply( this, arguments );
 
                                         var keys = this.keys;

CKEditor/branches/features/aria/_source/plugins/panel/plugin.js

@@ -241 +241 @@
 CKEDITOR.ui.panel.block = CKEDITOR.tools.createClass(
 {
-        $ : function( blockHolder )
+        $ : function( blockHolder, blockDefinition )
         {
                 this.element = blockHolder.append(
@@ -256 +256 @@
                                         }
                                 }) );
+
+                blockDefinition = blockDefinition || {};
+                var aria = blockDefinition.aria;
+                aria && this.element.setAttributes( aria );
 
                 this.keys = {};

CKEditor/branches/features/aria/_source/plugins/richcombo/plugin.js

@@ -45 +45 @@
 
                 panelDefinition.className = ( panelDefinition.className || '' ) + ' cke_rcombopanel';
+                panelDefinition.block =
+                {
+                        multiSelect : panelDefinition.multiSelect,
+                        aria : panelDefinition.aria
+                };
 
                 this._ =
@@ -206 +211 @@
                         if ( this._.panel )
                                 return;
-
+                        
                         var panelDefinition = this._.panelDefinition,
+                                panelBlockDefinition = this._.panelDefinition.block,
                                 panelParentElement = panelDefinition.parent || CKEDITOR.document.getBody(),
                                 panel = new CKEDITOR.ui.floatPanel( editor, panelParentElement, panelDefinition ),
-                                list = panel.addListBlock( this.id, this.multiSelect ),
+                                list = panel.addListBlock( this.id, panelBlockDefinition ),
                                 me = this;
 

CKEditor/branches/features/aria/_source/plugins/stylescombo/plugin.js

@@ -21 +21 @@
                                         label : lang.label,
                                         title : lang.panelTitle,
-                                        voiceLabel : lang.voiceLabel,
                                         className : 'cke_styles',
-                                        multiSelect : true,
 
                                         panel :
                                         {
                                                 css : editor.skin.editor.css.concat( config.contentsCss ),
-                                                voiceLabel : lang.panelVoiceLabel
+                                                multiSelect : true,
+                                                aria : { 'aria-label' : lang.panelTitle, 'aria-describedby' : lang.panelVoiceLabel }
                                         },