Changeset 4911

Timestamp:

01/12/10 06:48:12 (3 years ago)

Author:

garry.yao

Message:

Enhance ARIA support for dialogs in following aspects:

1. ARIA-enable tabview within dialog.
2. Adding 'aria-required' to mandatory fields.

Location:

CKEditor/branches/features/aria/_source/plugins

Files:

• dialog/plugin.js (modified) (3 diffs)
• dialogui/plugin.js (modified) (7 diffs)
• flash/dialogs/flash.js (modified) (1 diff)
• image/dialogs/image.js (modified) (1 diff)
• link/dialogs/link.js (modified) (1 diff)

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

@@ -146 +146 @@
                         });
 
+                this.parts.tabs.setAttribute( 'role', 'tablist' );
                 // Call the CKEDITOR.event constructor to initialize this instance.
                 CKEDITOR.event.call( this );
@@ -811 +812 @@
                         // Create the HTML for the tab and the content block.
                         var page = CKEDITOR.dom.element.createFromHtml( pageHtml.join( '' ) );
-                        var tab = CKEDITOR.dom.element.createFromHtml( [
+                        page.setAttribute( 'role', 'tabpanel' );
+
+                        var tabId = contents.id + '_' + CKEDITOR.tools.getNextNumber(),
+                                 tab = CKEDITOR.dom.element.createFromHtml( [
                                         '<a class="cke_dialog_tab"',
                                                 ( this._.pageCount > 0 ? ' cke_last' : 'cke_first' ),
                                                 titleHtml,
                                                 ( !!contents.hidden ? ' style="display:none"' : '' ),
-                                                ' id="', contents.id + '_', CKEDITOR.tools.getNextNumber(), '"' +
+                                                ' id="', tabId, '"' +
                                                 ' href="javascript:void(0)"',
-                                                ' hidefocus="true">',
+                                                ' hidefocus="true"' +
+                                                ' role="tab">',
                                                         contents.label,
                                         '</a>'
                                 ].join( '' ) );
+                        
+                        page.setAttribute( 'aria-labelledby', tabId );
 
                         // If only a single page exist, a different style is used in the central pane.
@@ -881 +888 @@
                                         page.hide();
                                 }
+                                page.setAttribute( 'aria-hidden', i != id );
                         }
 

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

@@ -14 +14 @@
                 this._ || ( this._ = {} );
                 this._['default'] = this._.initValue = elementDefinition['default'] || '';
+                this._.required = elementDefinition[ 'required' ] || false;
                 var args = [ this._ ];
                 for ( var i = 1 ; i < arguments.length ; i++ )
@@ -245 +246 @@
 
                                         attributes[ 'aria-labelledby' ] = this._.labelId;
+                                        this._.required && ( attributes[ 'aria-required' ] = this._.required );
                                         for ( var i in attributes )
                                                 html.push( i + '="' + attributes[i] + '" ' );
@@ -293 +295 @@
                                 var innerHTML = function()
                                 {
+                                        attributes[ 'aria-labelledby' ] = this._.labelId;
+                                        this._.required && ( attributes[ 'aria-required' ] = this._.required );
                                         var html = [ '<div class="cke_dialog_ui_input_textarea"><textarea class="cke_dialog_ui_input_textarea" id="', domId, '" ' ];
                                         for ( var i in attributes )
@@ -397 +401 @@
                                                         title = item[2] !== undefined ? item[2] : item[0],
                                                         value = item[1] !== undefined ? item[1] : item[0],
+                                                        inputId = CKEDITOR.tools.getNextNumber() + '_radio_input',
+                                                        labelId = inputId + '_label',
                                                         inputDefinition = CKEDITOR.tools.extend( {}, elementDefinition,
                                                                         {
-                                                                                id : CKEDITOR.tools.getNextNumber() + '_radio_input',
+                                                                                id : inputId,
                                                                                 title : null,
                                                                                 type : null
@@ -405 +411 @@
                                                         labelDefinition = CKEDITOR.tools.extend( {}, inputDefinition,
                                                                         {
-                                                                                id : null,
                                                                                 title : title
                                                                         }, true ),
@@ -413 +418 @@
                                                                 'class' : 'cke_dialog_ui_radio_input',
                                                                 name : commonName,
-                                                                value : value
+                                                                value : value,
+                                                                'aria-labelledby' : labelId
                                                         },
                                                         inputHtml = [];
@@ -422 +428 @@
                                                 children.push( new CKEDITOR.ui.dialog.uiElement( dialog, inputDefinition, inputHtml, 'input', null, inputAttributes ) );
                                                 inputHtml.push( ' ' );
-                                                new CKEDITOR.ui.dialog.uiElement( dialog, labelDefinition, inputHtml, 'label', null, { 'for' : inputAttributes.id },
+                                                new CKEDITOR.ui.dialog.uiElement( dialog, labelDefinition, inputHtml, 'label', null, { id : labelId, 'for' : inputAttributes.id },
                                                            item[0] );
                                                 inputHtmlList.push( inputHtml.join( '' ) );

CKEditor/branches/features/aria/_source/plugins/flash/dialogs/flash.js

@@ -314 +314 @@
                                                                                         type : 'text',
                                                                                         label : '',
+                                                                                        required : true,
                                                                                         validate : CKEDITOR.dialog.validate.notEmpty( editor.lang.flash.validateSrc ),
                                                                                         setup : loadValue,

CKEditor/branches/features/aria/_source/plugins/image/dialogs/image.js

@@ -474 +474 @@
                                                                                         type : 'text',
                                                                                         label : '',
+                                                                                        required: true,
                                                                                         onChange : function()
                                                                                         {

CKEditor/branches/features/aria/_source/plugins/link/dialogs/link.js

@@ -426 +426 @@
                                                                                 id : 'url',
                                                                                 label : editor.lang.common.url,
+                                                                                required: true,
                                                                                 onLoad : function ()
                                                                                 {