X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=_source%2Fplugins%2Fdialogui%2Fplugin.js;h=888c015445e60bcb8eb127b237cf43ba82d9d9e9;hb=3fe9cac293e090ea459a3ee10d78cbe9e1dd0e03;hp=b6cd10c1b690f4d5f35f349db639cdd2e16ee816;hpb=c6e377a02b54abc07129d72b632763c727476a15;p=ckeditor.git

diff --git a/_source/plugins/dialogui/plugin.js b/_source/plugins/dialogui/plugin.js
index b6cd10c..888c015 100644
--- a/_source/plugins/dialogui/plugin.js
+++ b/_source/plugins/dialogui/plugin.js
@@ -1,5 +1,5 @@
 /*
-Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 
@@ -13,6 +13,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 	{
 		this._ || ( this._ = {} );
 		this._['default'] = this._.initValue = elementDefinition['default'] || '';
+		this._.required = elementDefinition[ 'required' ] || false;
 		var args = [ this._ ];
 		for ( var i = 1 ; i < arguments.length ; i++ )
 			args.push( arguments[i] );
@@ -34,6 +35,23 @@ CKEDITOR.plugins.add( 'dialogui' );
 			return new CKEDITOR.ui.dialog[elementDefinition.type]( dialog, elementDefinition, output );
 		}
 	},
+	containerBuilder =
+	{
+		build : function( dialog, elementDefinition, output )
+		{
+			var children = elementDefinition.children,
+				child,
+				childHtmlList = [],
+				childObjList = [];
+			for ( var i = 0 ; ( i < children.length && ( child = children[i] ) ) ; i++ )
+			{
+				var childHtml = [];
+				childHtmlList.push( childHtml );
+				childObjList.push( CKEDITOR.dialog._.uiElementBuilders[ child.type ].build( dialog, child, childHtml ) );
+			}
+			return new CKEDITOR.ui.dialog[ elementDefinition.type ]( dialog, childObjList, childHtmlList, output, elementDefinition );
+		}
+	},
 	commonPrototype =
 	{
 		isChanged : function()
@@ -41,9 +59,9 @@ CKEDITOR.plugins.add( 'dialogui' );
 			return this.getValue() != this.getInitValue();
 		},
 
-		reset : function()
+		reset : function( noChangeEvent )
 		{
-			this.setValue( this.getInitValue() );
+			this.setValue( this.getInitValue(), noChangeEvent );
 		},
 
 		setInitValue : function()
@@ -69,7 +87,14 @@ CKEDITOR.plugins.add( 'dialogui' );
 				{
 					dialog.on( 'load', function()
 						{
-							this.getInputElement().on( 'change', function(){ this.fire( 'change', { value : this.getValue() } ); }, this );
+							this.getInputElement().on( 'change', function()
+							{
+								// Make sure 'onchange' doesn't get fired after dialog closed. (#5719)
+								if ( !dialog.parts.dialog.isVisible() )
+									return;
+
+								this.fire( 'change', { value : this.getValue() } );
+							}, this );
 						}, this );
 					this._.domOnChangeRegistered = true;
 				}
@@ -99,7 +124,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 			 * @extends CKEDITOR.ui.dialog.uiElement
 			 * @param {CKEDITOR.dialog} dialog
 			 * Parent dialog object.
-			 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
+			 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
 			 * The element definition. Accepted fields:
 			 * <ul>
 			 * 	<li><strong>label</strong> (Required) The label string.</li>
@@ -122,20 +147,22 @@ CKEDITOR.plugins.add( 'dialogui' );
 					return;
 
 				var _ = initPrivateObject.call( this, elementDefinition );
-				_.labelId = CKEDITOR.tools.getNextNumber() + '_label';
+				_.labelId = CKEDITOR.tools.getNextId() + '_label';
 				var children = this._.children = [];
 				/** @ignore */
 				var innerHTML = function()
 				{
-					var html = [];
+					var html = [],
+						requiredClass = elementDefinition.required ? ' cke_required' : '' ;
 					if ( elementDefinition.labelLayout != 'horizontal' )
-						html.push( '<div class="cke_dialog_ui_labeled_label" id="',
-								_.labelId,
-								'" >',
+						html.push( '<label class="cke_dialog_ui_labeled_label' + requiredClass + '" ',
+								' id="'+  _.labelId + '"',
+								( _.inputId? ' for="' + _.inputId + '"' : '' ),
+								( elementDefinition.labelStyle ? ' style="' + elementDefinition.labelStyle + '"' : '' ) +'>',
 								elementDefinition.label,
-								'</div>',
-								'<div class="cke_dialog_ui_labeled_content">',
-								contentHtml( dialog, elementDefinition ),
+								'</label>',
+								'<div class="cke_dialog_ui_labeled_content"' + ( elementDefinition.controlStyle ? ' style="' + elementDefinition.controlStyle + '"' : '' ) + ' role="presentation">',
+								contentHtml.call( this, dialog, elementDefinition ),
 								'</div>' );
 					else
 					{
@@ -147,14 +174,17 @@ CKEDITOR.plugins.add( 'dialogui' );
 							[
 								{
 									type : 'html',
-									html : '<span class="cke_dialog_ui_labeled_label" ' +
-										'id="' + _.labelId + '">' +  CKEDITOR.tools.htmlEncode( elementDefinition.label ) +
+									html : '<label class="cke_dialog_ui_labeled_label' + requiredClass + '"' +
+										' id="' + _.labelId + '"' +
+										' for="' + _.inputId + '"' +
+										( elementDefinition.labelStyle ? ' style="' + elementDefinition.labelStyle + '"' : '' ) +'>' +
+										   CKEDITOR.tools.htmlEncode( elementDefinition.label ) +
 										'</span>'
 								},
 								{
 									type : 'html',
-									html : '<span class="cke_dialog_ui_labeled_content">' +
-										contentHtml( dialog, elementDefinition ) +
+									html : '<span class="cke_dialog_ui_labeled_content"' + ( elementDefinition.controlStyle ? ' style="' + elementDefinition.controlStyle + '"' : '' ) + '>' +
+										contentHtml.call( this, dialog, elementDefinition ) +
 										'</span>'
 								}
 							]
@@ -163,7 +193,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 					}
 					return html.join( '' );
 				};
-				CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'div', null, null, innerHTML );
+				CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'div', null, { role : 'presentation' }, innerHTML );
 			},
 
 			/**
@@ -174,7 +204,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 			 * @extends CKEDITOR.ui.dialog.labeledElement
 			 * @param {CKEDITOR.dialog} dialog
 			 * Parent dialog object.
-			 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
+			 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
 			 * The element definition. Accepted fields:
 			 * <ul>
 			 * 	<li><strong>default</strong> (Optional) The default value.</li>
@@ -193,8 +223,8 @@ CKEDITOR.plugins.add( 'dialogui' );
 					return;
 
 				initPrivateObject.call( this, elementDefinition );
-				var domId = this._.inputId = CKEDITOR.tools.getNextNumber() + '_textInput',
-					attributes = { 'class' : 'cke_dialog_ui_input_' + elementDefinition.type, id : domId, type : 'text' },
+				var domId = this._.inputId = CKEDITOR.tools.getNextId() + '_textInput',
+					attributes = { 'class' : 'cke_dialog_ui_input_' + elementDefinition.type, id : domId, type : elementDefinition.type },
 					i;
 
 				// Set the validator, if any.
@@ -207,41 +237,23 @@ CKEDITOR.plugins.add( 'dialogui' );
 				if ( elementDefinition.size )
 					attributes.size = elementDefinition.size;
 
-				// If user presses Enter in a text box, it implies clicking OK for the dialog.
-				var me = this, keyPressedOnMe = false;
-				dialog.on( 'load', function()
-					{
-						me.getInputElement().on( 'keydown', function( evt )
-							{
-								if ( evt.data.getKeystroke() == 13 )
-									keyPressedOnMe = true;
-							} );
-
-						// Lower the priority this 'keyup' since 'ok' will close the dialog.(#3749)
-						me.getInputElement().on( 'keyup', function( evt )
-							{
-								if ( evt.data.getKeystroke() == 13 && keyPressedOnMe )
-								{
-									dialog.getButton( 'ok' ) && setTimeout( function ()
-									{
-										dialog.getButton( 'ok' ).click();
-									}, 0 );
-									keyPressedOnMe = false;
-								}
-							}, null, null, 1000 );
-					} );
+				if ( elementDefinition.inputStyle )
+					attributes.style = elementDefinition.inputStyle;
 
 				/** @ignore */
 				var innerHTML = function()
 				{
 					// IE BUG: Text input fields in IE at 100% would exceed a <td> or inline
 					// container's width, so need to wrap it inside a <div>.
-					var html = [ '<div class="cke_dialog_ui_input_', elementDefinition.type, '"' ];
+					var html = [ '<div class="cke_dialog_ui_input_', elementDefinition.type, '" role="presentation"' ];
 
 					if ( elementDefinition.width )
 						html.push( 'style="width:'+ elementDefinition.width +'" ' );
 
 					html.push( '><input ' );
+
+					attributes[ 'aria-labelledby' ] = this._.labelId;
+					this._.required && ( attributes[ 'aria-required' ] = this._.required );
 					for ( var i in attributes )
 						html.push( i + '="' + attributes[i] + '" ' );
 					html.push( ' /></div>' );
@@ -257,7 +269,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 			 * @example
 			 * @param {CKEDITOR.dialog} dialog
 			 * Parent dialog object.
-			 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
+			 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
 			 * The element definition. Accepted fields:
 			 * <ul>
 			 * 	<li><strong>rows</strong> (Optional) The number of rows displayed.
@@ -277,7 +289,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 
 				initPrivateObject.call( this, elementDefinition );
 				var me = this,
-					domId = this._.inputId = CKEDITOR.tools.getNextNumber() + '_textarea',
+					domId = this._.inputId = CKEDITOR.tools.getNextId() + '_textarea',
 					attributes = {};
 
 				if ( elementDefinition.validate )
@@ -287,10 +299,16 @@ CKEDITOR.plugins.add( 'dialogui' );
 				attributes.rows = elementDefinition.rows || 5;
 				attributes.cols = elementDefinition.cols || 20;
 
+				if ( typeof elementDefinition.inputStyle != 'undefined' )
+					attributes.style = elementDefinition.inputStyle;
+
+
 				/** @ignore */
 				var innerHTML = function()
 				{
-					var html = [ '<div class="cke_dialog_ui_input_textarea"><textarea class="cke_dialog_ui_input_textarea" id="', domId, '" ' ];
+					attributes[ 'aria-labelledby' ] = this._.labelId;
+					this._.required && ( attributes[ 'aria-required' ] = this._.required );
+					var html = [ '<div class="cke_dialog_ui_input_textarea" role="presentation"><textarea class="cke_dialog_ui_input_textarea" id="', domId, '" ' ];
 					for ( var i in attributes )
 						html.push( i + '="' + CKEDITOR.tools.htmlEncode( attributes[i] ) + '" ' );
 					html.push( '>', CKEDITOR.tools.htmlEncode( me._['default'] ), '</textarea></div>' );
@@ -306,7 +324,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 			 * @example
 			 * @param {CKEDITOR.dialog} dialog
 			 * Parent dialog object.
-			 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
+			 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
 			 * The element definition. Accepted fields:
 			 * <ul>
 			 * 	<li><strong>checked</strong> (Optional) Whether the checkbox is checked
@@ -332,15 +350,21 @@ CKEDITOR.plugins.add( 'dialogui' );
 				{
 					var myDefinition = CKEDITOR.tools.extend( {}, elementDefinition,
 							{
-								id : elementDefinition.id ? elementDefinition.id + '_checkbox' : CKEDITOR.tools.getNextNumber() + '_checkbox'
+								id : elementDefinition.id ? elementDefinition.id + '_checkbox' : CKEDITOR.tools.getNextId() + '_checkbox'
 							}, true ),
-						html = [],
-						attributes = { 'class' : 'cke_dialog_ui_checkbox_input', type : 'checkbox' };
+						html = [];
+
+					var labelId = CKEDITOR.tools.getNextId() + '_label';
+					var attributes = { 'class' : 'cke_dialog_ui_checkbox_input', type : 'checkbox', 'aria-labelledby' : labelId };
 					cleanInnerDefinition( myDefinition );
 					if ( elementDefinition[ 'default' ] )
 						attributes.checked = 'checked';
+
+					if ( typeof myDefinition.inputStyle != 'undefined' )
+						myDefinition.style = myDefinition.inputStyle;
+
 					_.checkbox = new CKEDITOR.ui.dialog.uiElement( dialog, myDefinition, html, 'input', null, attributes );
-					html.push( ' <label for="', attributes.id, '">',
+					html.push( ' <label id="', labelId, '" for="', attributes.id, '"' + ( elementDefinition.labelStyle ? ' style="' + elementDefinition.labelStyle + '"' : '' ) + '>',
 							CKEDITOR.tools.htmlEncode( elementDefinition.label ),
 							'</label>' );
 					return html.join( '' );
@@ -356,7 +380,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 			 * @extends CKEDITOR.ui.dialog.labeledElement
 			 * @param {CKEDITOR.dialog} dialog
 			 * Parent dialog object.
-			 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
+			 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
 			 * The element definition. Accepted fields:
 			 * <ul>
 			 * 	<li><strong>default</strong> (Required) The default value.</li>
@@ -385,22 +409,23 @@ CKEDITOR.plugins.add( 'dialogui' );
 				var innerHTML = function()
 				{
 					var inputHtmlList = [], html = [],
-						commonAttributes = { 'class' : 'cke_dialog_ui_radio_item' },
-						commonName = elementDefinition.id ? elementDefinition.id + '_radio' : CKEDITOR.tools.getNextNumber() + '_radio';
+						commonAttributes = { 'class' : 'cke_dialog_ui_radio_item', 'aria-labelledby' : this._.labelId },
+						commonName = elementDefinition.id ? elementDefinition.id + '_radio' : CKEDITOR.tools.getNextId() + '_radio';
 					for ( var i = 0 ; i < elementDefinition.items.length ; i++ )
 					{
 						var item = elementDefinition.items[i],
 							title = item[2] !== undefined ? item[2] : item[0],
 							value = item[1] !== undefined ? item[1] : item[0],
+							inputId = CKEDITOR.tools.getNextId() + '_radio_input',
+							labelId = inputId + '_label',
 							inputDefinition = CKEDITOR.tools.extend( {}, elementDefinition,
 									{
-										id : CKEDITOR.tools.getNextNumber() + '_radio_input',
+										id : inputId,
 										title : null,
 										type : null
 									}, true ),
 							labelDefinition = CKEDITOR.tools.extend( {}, inputDefinition,
 									{
-										id : null,
 										title : title
 									}, true ),
 							inputAttributes =
@@ -408,20 +433,25 @@ CKEDITOR.plugins.add( 'dialogui' );
 								type : 'radio',
 								'class' : 'cke_dialog_ui_radio_input',
 								name : commonName,
-								value : value
+								value : value,
+								'aria-labelledby' : labelId
 							},
 							inputHtml = [];
 						if ( me._['default'] == value )
 							inputAttributes.checked = 'checked';
 						cleanInnerDefinition( inputDefinition );
 						cleanInnerDefinition( labelDefinition );
+
+						if ( typeof inputDefinition.inputStyle != 'undefined' )
+							inputDefinition.style = inputDefinition.inputStyle;
+
 						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( '' ) );
 					}
-					new CKEDITOR.ui.dialog.hbox( dialog, [], inputHtmlList, html );
+					new CKEDITOR.ui.dialog.hbox( dialog, children, inputHtmlList, html );
 					return html.join( '' );
 				};
 
@@ -436,7 +466,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 			 * @extends CKEDITOR.ui.dialog.uiElement
 			 * @param {CKEDITOR.dialog} dialog
 			 * Parent dialog object.
-			 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
+			 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
 			 * The element definition. Accepted fields:
 			 * <ul>
 			 * 	<li><strong>label</strong> (Required) The button label.</li>
@@ -473,6 +503,15 @@ CKEDITOR.plugins.add( 'dialogui' );
 									me.fire( 'click', { dialog : me.getDialog() } );
 									evt.data.preventDefault();
 								} );
+
+							element.on( 'keydown', function( evt )
+								{
+									if ( evt.data.getKeystroke() in { 32:1 } )
+									{
+										me.click();
+										evt.data.preventDefault();
+									}
+								} );
 						})();
 
 						element.unselectable();
@@ -481,6 +520,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 				var outerDefinition = CKEDITOR.tools.extend( {}, elementDefinition );
 				delete outerDefinition.style;
 
+				var labelId = CKEDITOR.tools.getNextId() + '_label';
 				CKEDITOR.ui.dialog.uiElement.call(
 					this,
 					dialog,
@@ -493,9 +533,11 @@ CKEDITOR.plugins.add( 'dialogui' );
 						href : 'javascript:void(0)',
 						title : elementDefinition.label,
 						hidefocus : 'true',
-						'class' : elementDefinition['class']
+						'class' : elementDefinition['class'],
+						role : 'button',
+						'aria-labelledby' : labelId
 					},
-					'<span class="cke_dialog_ui_button">' +
+					'<span id="' + labelId + '" class="cke_dialog_ui_button">' +
 						CKEDITOR.tools.htmlEncode( elementDefinition.label ) +
 					'</span>' );
 			},
@@ -507,7 +549,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 			 * @constructor
 			 * @param {CKEDITOR.dialog} dialog
 			 * Parent dialog object.
-			 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
+			 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
 			 * The element definition. Accepted fields:
 			 * <ul>
 			 * 	<li><strong>default</strong> (Required) The default value.</li>
@@ -534,16 +576,17 @@ CKEDITOR.plugins.add( 'dialogui' );
 				if ( elementDefinition.validate )
 					this.validate = elementDefinition.validate;
 
+				_.inputId = CKEDITOR.tools.getNextId() + '_select';
 				/** @ignore */
 				var innerHTML = function()
 				{
 					var myDefinition = CKEDITOR.tools.extend( {}, elementDefinition,
 							{
-								id : elementDefinition.id ? elementDefinition.id + '_select' : CKEDITOR.tools.getNextNumber() + '_select'
+								id : elementDefinition.id ? elementDefinition.id + '_select' : CKEDITOR.tools.getNextId() + '_select'
 							}, true ),
 						html = [],
 						innerHTML = [],
-						attributes = { 'class' : 'cke_dialog_ui_input_select' };
+						attributes = { 'id' : _.inputId, 'class' : 'cke_dialog_ui_input_select', 'aria-labelledby' : this._.labelId };
 
 					// Add multiple and size attributes from element definition.
 					if ( elementDefinition.size != undefined )
@@ -555,10 +598,13 @@ CKEDITOR.plugins.add( 'dialogui' );
 					for ( var i = 0, item ; i < elementDefinition.items.length && ( item = elementDefinition.items[i] ) ; i++ )
 					{
 						innerHTML.push( '<option value="',
-							CKEDITOR.tools.htmlEncode( item[1] !== undefined ? item[1] : item[0] ), '" /> ',
+							CKEDITOR.tools.htmlEncode( item[1] !== undefined ? item[1] : item[0] ).replace( /"/g, '&quot;' ), '" /> ',
 							CKEDITOR.tools.htmlEncode( item[0] ) );
 					}
 
+					if ( typeof myDefinition.inputStyle != 'undefined' )
+						myDefinition.style = myDefinition.inputStyle;
+
 					_.select = new CKEDITOR.ui.dialog.uiElement( dialog, myDefinition, html, 'select', null, attributes, innerHTML.join( '' ) );
 					return html.join( '' );
 				};
@@ -573,7 +619,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 			 * @constructor
 			 * @param {CKEDITOR.dialog} dialog
 			 * Parent dialog object.
-			 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
+			 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
 			 * The element definition. Accepted fields:
 			 * <ul>
 			 * 	<li><strong>validate</strong> (Optional) The validation function.</li>
@@ -597,7 +643,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 				/** @ignore */
 				var innerHTML = function()
 				{
-					_.frameId = CKEDITOR.tools.getNextNumber() + '_fileInput';
+					_.frameId = CKEDITOR.tools.getNextId() + '_fileInput';
 
 					// Support for custom document.domain in IE.
 					var isCustomDomain = CKEDITOR.env.isCustomDomain();
@@ -607,6 +653,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 							' frameborder="0"' +
 							' allowtransparency="0"' +
 							' class="cke_dialog_ui_input_file"' +
+							' role="presentation"' +
 							' id="', _.frameId, '"' +
 							' title="', elementDefinition.label, '"' +
 							' src="javascript:void(' ];
@@ -646,7 +693,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 			 * @constructor
 			 * @param {CKEDITOR.dialog} dialog
 			 * Parent dialog object.
-			 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
+			 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
 			 * The element definition. Accepted fields:
 			 * <ul>
 			 * 	<li><strong>for</strong> (Required) The file input's page and element Id
@@ -699,7 +746,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 				 * @extends CKEDITOR.ui.dialog.uiElement
 				 * @name CKEDITOR.ui.dialog.html
 				 * @param {CKEDITOR.dialog} dialog Parent dialog object.
-				 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition Element definition.
+				 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition Element definition.
 				 * Accepted fields:
 				 * <ul>
 				 * 	<li><strong>html</strong> (Required) HTML code of this element.</li>
@@ -723,13 +770,14 @@ CKEDITOR.plugins.add( 'dialogui' );
 						theirHtml = '<span>' + theirHtml + '</span>';
 
 					// Look for focus function in definition.
-					if ( elementDefinition.focus )
+					var focus = elementDefinition.focus;
+					if ( focus )
 					{
 						var oldFocus = this.focus;
 						this.focus = function()
 						{
 							oldFocus.call( this );
-							elementDefinition.focus.call( this );
+							typeof focus == 'function' && focus.call( this );
 							this.fire( 'focus' );
 						};
 						if ( elementDefinition.isFocusable )
@@ -755,7 +803,47 @@ CKEDITOR.plugins.add( 'dialogui' );
 
 					htmlList.push( [ theirMatch[1], ' ', myMatch[1] || '', theirMatch[2] ].join( '' ) );
 				};
-			})()
+			})(),
+
+			/**
+			 * Form fieldset for grouping dialog UI elements.
+			 * @constructor
+			 * @extends CKEDITOR.ui.dialog.uiElement
+			 * @param {CKEDITOR.dialog} dialog Parent dialog object.
+			 * @param {Array} childObjList
+			 * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this
+			 * container.
+			 * @param {Array} childHtmlList
+			 * Array of HTML code that correspond to the HTML output of all the
+			 * objects in childObjList.
+			 * @param {Array} htmlList
+			 * Array of HTML code that this element will output to.
+			 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
+			 * The element definition. Accepted fields:
+			 * <ul>
+			 * 	<li><strong>label</strong> (Optional) The legend of the this fieldset.</li>
+			 * 	<li><strong>children</strong> (Required) An array of dialog field definitions which will be grouped inside this fieldset. </li>
+			 * </ul>
+			 */
+			fieldset : function( dialog, childObjList, childHtmlList, htmlList, elementDefinition )
+			{
+				var legendLabel = elementDefinition.label;
+				/** @ignore */
+				var innerHTML = function()
+				{
+					var html = [];
+					legendLabel && html.push( '<legend' +
+						( elementDefinition.labelStyle ? ' style="' + elementDefinition.labelStyle + '"' : '' ) +
+						'>' + legendLabel + '</legend>' );
+					for ( var i = 0; i < childHtmlList.length; i++ )
+						html.push( childHtmlList[ i ] );
+					return html.join( '' );
+				};
+
+				this._ = { children : childObjList };
+				CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'fieldset', null, null, innerHTML );
+			}
+
 		}, true );
 
 	CKEDITOR.ui.dialog.html.prototype = new CKEDITOR.ui.dialog.uiElement;
@@ -826,7 +914,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 				{
 					this._.disabled = false;
 					var element = this.getElement();
-					element && element.removeClass( 'disabled' );
+					element && element.removeClass( 'cke_disabled' );
 				},
 
 				/**
@@ -836,7 +924,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 				disable : function()
 				{
 					this._.disabled = true;
-					this.getElement().addClass( 'disabled' );
+					this.getElement().addClass( 'cke_disabled' );
 				},
 
 				isVisible : function()
@@ -860,7 +948,13 @@ CKEDITOR.plugins.add( 'dialogui' );
 						/** @ignore */
 						onClick : function( dialog, func )
 						{
-							this.on( 'click', func );
+							this.on( 'click', function()
+								{
+									// Some browsers (Chrome, IE8, IE7 compat mode) don't move
+									// focus to clicked button. Force this.
+									this.getElement().focus();
+									func.apply( this, arguments );
+								});
 						}
 					}, true ),
 
@@ -956,7 +1050,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 				setValue : function( value )
 				{
 					!value && ( value = '' );
-					return CKEDITOR.ui.dialog.uiElement.prototype.setValue.call( this, value );
+					return CKEDITOR.ui.dialog.uiElement.prototype.setValue.apply( this, arguments );
 				},
 
 				keyboardFocusable : true
@@ -1051,11 +1145,12 @@ CKEDITOR.plugins.add( 'dialogui' );
 				 * Sets the state of the checkbox.
 				 * @example
 				 * @param {Boolean} true to tick the checkbox, false to untick it.
+				 * @param {Boolean} noChangeEvent Internal commit, to supress 'change' event on this element.
 				 */
-				setValue : function( checked )
+				setValue : function( checked, noChangeEvent )
 				{
 					this.getInputElement().$.checked = checked;
-					this.fire( 'change', { value : checked } );
+					!noChangeEvent && this.fire( 'change', { value : checked } );
 				},
 
 				/**
@@ -1087,7 +1182,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 				{
 					onChange : function( dialog, func )
 					{
-						if ( !CKEDITOR.env.ie )
+						if ( !CKEDITOR.env.ie || ( CKEDITOR.env.version > 8 ) )
 							return commonEventProcessors.onChange.apply( this, arguments );
 						else
 						{
@@ -1117,14 +1212,15 @@ CKEDITOR.plugins.add( 'dialogui' );
 				 * Checks one of the radio buttons in this button group.
 				 * @example
 				 * @param {String} value The value of the button to be chcked.
+				 * @param {Boolean} noChangeEvent Internal commit, to supress 'change' event on this element.
 				 */
-				setValue : function( value )
+				setValue : function( value, noChangeEvent )
 				{
 					var children = this._.children,
 						item;
 					for ( var i = 0 ; ( i < children.length ) && ( item = children[i] ) ; i++ )
 						item.getElement().$.checked = ( item.getValue() == value );
-					this.fire( 'change', { value : value } );
+					!noChangeEvent && this.fire( 'change', { value : value } );
 				},
 
 				/**
@@ -1233,12 +1329,43 @@ CKEDITOR.plugins.add( 'dialogui' );
 				 * @returns {String} The value of the action.
 				 * @example
 				 */
-				getAction : function( action )
+				getAction : function()
 				{
 					return this.getInputElement().getParent().$.action;
 				},
 
 				/**
+				 * The events must be applied on the inner input element, and
+				 * that must be done when the iframe & form has been loaded
+				 */
+				registerEvents : function( definition )
+				{
+					var regex = /^on([A-Z]\w+)/,
+						match;
+
+					var registerDomEvent = function( uiElement, dialog, eventName, func )
+					{
+						uiElement.on( 'formLoaded', function()
+						{
+							uiElement.getInputElement().on( eventName, func, uiElement );
+						});
+					};
+
+					for ( var i in definition )
+					{
+						if ( !( match = i.match( regex ) ) )
+							continue;
+
+						if ( this.eventProcessors[i] )
+							this.eventProcessors[i].call( this, this._.dialog, definition[i] );
+						else
+							registerDomEvent( this, this._.dialog, match[1].toLowerCase(), definition[i] );
+					}
+
+					return this;
+				},
+
+				/**
 				 * Redraws the file input and resets the file path in the file input.
 				 * The redraw logic is necessary because non-IE browsers tend to clear
 				 * the &lt;iframe&gt; containing the file input after closing the dialog.
@@ -1246,10 +1373,40 @@ CKEDITOR.plugins.add( 'dialogui' );
 				 */
 				reset : function()
 				{
-					var frameElement = CKEDITOR.document.getById( this._.frameId ),
+					var _ = this._,
+						frameElement = CKEDITOR.document.getById( _.frameId ),
 						frameDocument = frameElement.getFrameDocument(),
-						elementDefinition = this._.definition,
-						buttons = this._.buttons;
+						elementDefinition = _.definition,
+						buttons = _.buttons,
+						callNumber = this.formLoadedNumber,
+						unloadNumber = this.formUnloadNumber,
+						langDir = _.dialog._.editor.lang.dir,
+						langCode = _.dialog._.editor.langCode;
+
+					// The callback function for the iframe, but we must call tools.addFunction only once
+					// so we store the function number in this.formLoadedNumber
+					if ( !callNumber )
+					{
+						callNumber = this.formLoadedNumber = CKEDITOR.tools.addFunction(
+							function()
+							{
+								// Now we can apply the events to the input type=file
+								this.fire( 'formLoaded' ) ;
+							}, this ) ;
+
+						// Remove listeners attached to the content of the iframe (the file input)
+						unloadNumber = this.formUnloadNumber = CKEDITOR.tools.addFunction(
+							function()
+							{
+								this.getInputElement().clearCustomData();
+							}, this ) ;
+
+						this.getDialog()._.editor.on( 'destroy', function()
+								{
+									CKEDITOR.tools.removeFunction( callNumber );
+									CKEDITOR.tools.removeFunction( unloadNumber );
+								} );
+					}
 
 					function generateFormField()
 					{
@@ -1263,17 +1420,25 @@ CKEDITOR.plugins.add( 'dialogui' );
 						if ( elementDefinition.size )
 							size = elementDefinition.size - ( CKEDITOR.env.ie  ? 7 : 0 );	// "Browse" button is bigger in IE.
 
-						frameDocument.$.write( [ '<html><head><title></title></head><body style="margin: 0; overflow: hidden; background: transparent;">',
-								'<form enctype="multipart/form-data" method="POST" action="',
+						var inputId = _.frameId + '_input';
+
+						frameDocument.$.write( [ '<html dir="' + langDir + '" lang="' + langCode + '"><head><title></title></head><body style="margin: 0; overflow: hidden; background: transparent;">',
+								'<form enctype="multipart/form-data" method="POST" dir="' + langDir + '" lang="' + langCode + '" action="',
 								CKEDITOR.tools.htmlEncode( elementDefinition.action ),
 								'">',
-								'<input type="file" name="',
+								// Replicate the field label inside of iframe.
+							    '<label id="', _.labelId, '" for="', inputId, '" style="display:none">',
+								CKEDITOR.tools.htmlEncode( elementDefinition.label ),
+								'</label>',
+								'<input id="', inputId, '" aria-labelledby="', _.labelId,'" type="file" name="',
 								CKEDITOR.tools.htmlEncode( elementDefinition.id || 'cke_upload' ),
 								'" size="',
 								CKEDITOR.tools.htmlEncode( size > 0 ? size : "" ),
 								'" />',
 								'</form>',
-								'</body></html>' ].join( '' ) );
+								'</body></html>',
+								'<script>window.parent.CKEDITOR.tools.callFunction(' + callNumber + ');',
+								'window.onbeforeunload = function() {window.parent.CKEDITOR.tools.callFunction(' + unloadNumber + ')}</script>' ].join( '' ) );
 
 						frameDocument.$.close();
 
@@ -1290,10 +1455,18 @@ CKEDITOR.plugins.add( 'dialogui' );
 
 				getValue : function()
 				{
-					// The file path returned from the input tag is incomplete anyway, so it's
-					// safe to ignore it and prevent the confirmation dialog from appearing.
-					// (Part of #3465)
-					return '';
+					return this.getInputElement().$.value || '';
+				},
+
+				/***
+				 * The default value of input type="file" is an empty string, but during initialization
+				 * of this UI element, the iframe still isn't ready so it can't be read from that object
+				 * Setting it manually prevents later issues about the current value ("") being different
+				 * of the initial value (undefined as it asked for .value of a div)
+				 */
+				setInitValue : function()
+				{
+					this._.initValue = '';
 				},
 
 				/**
@@ -1302,13 +1475,35 @@ CKEDITOR.plugins.add( 'dialogui' );
 				 * @type Object
 				 * @example
 				 */
-				eventProcessors : commonEventProcessors,
+				eventProcessors :
+				{
+					onChange : function( dialog, func )
+					{
+						// If this method is called several times (I'm not sure about how this can happen but the default
+						// onChange processor includes this protection)
+						// In order to reapply to the new element, the property is deleted at the beggining of the registerEvents method
+						if ( !this._.domOnChangeRegistered )
+						{
+							// By listening for the formLoaded event, this handler will get reapplied when a new
+							// form is created
+							this.on( 'formLoaded', function()
+							{
+								this.getInputElement().on( 'change', function(){ this.fire( 'change', { value : this.getValue() } ); }, this );
+							}, this );
+							this._.domOnChangeRegistered = true;
+						}
+
+						this.on( 'change', func );
+					}
+				},
 
 				keyboardFocusable : true
 			}, true );
 
 	CKEDITOR.ui.dialog.fileButton.prototype = new CKEDITOR.ui.dialog.button;
 
+	CKEDITOR.ui.dialog.fieldset.prototype = CKEDITOR.tools.clone( CKEDITOR.ui.dialog.hbox.prototype );
+
 	CKEDITOR.dialog.addUIElement( 'text', textBuilder );
 	CKEDITOR.dialog.addUIElement( 'password', textBuilder );
 	CKEDITOR.dialog.addUIElement( 'textarea', commonBuilder );
@@ -1319,4 +1514,19 @@ CKEDITOR.plugins.add( 'dialogui' );
 	CKEDITOR.dialog.addUIElement( 'file', commonBuilder );
 	CKEDITOR.dialog.addUIElement( 'fileButton', commonBuilder );
 	CKEDITOR.dialog.addUIElement( 'html', commonBuilder );
+	CKEDITOR.dialog.addUIElement( 'fieldset', containerBuilder );
 })();
+
+/**
+ * Fired when the value of the uiElement is changed
+ * @name CKEDITOR.ui.dialog.uiElement#change
+ * @event
+ */
+
+/**
+ * Fired when the inner frame created by the element is ready.
+ * Each time the button is used or the dialog is loaded a new
+ * form might be created.
+ * @name CKEDITOR.ui.dialog.fileButton#formLoaded
+ * @event
+ */