Merge branch 't/11387'

CHANGES.md

@@ -20,6 +20,7 @@ Fixed Issues:
 * [#11957](http://dev.ckeditor.com/ticket/11957): Fixed: Alignment labels in the [Enhanced Image](http://ckeditor.com/addon/image2) dialog are not translated.
 * [#11980](http://dev.ckeditor.com/ticket/11980): [Blink/Webkit] Fixed: Span elements created while joining adjacent elements (non-collapsed selection).
 * [#12009](http://dev.ckeditor.com/ticket/12009): [Nested widgets] Integration with Magicline plugin.
+* [#11387](http://dev.ckeditor.com/ticket/11387): Fixed: `role="radiogroup"` should be applied only to radio inputs' container.
 
 ## CKEditor 4.4.1
 

plugins/dialogui/plugin.js

@@ -113,6 +113,8 @@ CKEDITOR.plugins.add( 'dialogui', {
 			 * * `widths` (Optional) This applies only for horizontal
 			 *     layouts - an 2-element array of lengths to specify the widths of the
 			 *     label and the content element.
+			 * * `role` (Optional) Value for `role` attribute.
+			 * * `includeLabel` (Optional) If set to `true` will include aria-labelledby attribute.
 			 *
 			 * @param {Array} htmlList List of HTML code to output to.
 			 * @param {Function} contentHtml
@@ -139,7 +141,7 @@ CKEDITOR.plugins.add( 'dialogui', {
 								'</label>',
 								'<div class="cke_dialog_ui_labeled_content"',
 									( elementDefinition.controlStyle ? ' style="' + elementDefinition.controlStyle + '"' : '' ),
-									' role="radiogroup" aria-labelledby="' + _.labelId + '">',
+									' role="presentation">',
 									contentHtml.call( this, dialog, elementDefinition ),
 								'</div>' );
 						} else {
@@ -169,7 +171,12 @@ CKEDITOR.plugins.add( 'dialogui', {
 						}
 						return html.join( '' );
 					};
-				CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'div', null, { role: 'presentation' }, innerHTML );
+				var attributes = { role: elementDefinition.role || 'presentation' };
+
+				if ( elementDefinition.includeLabel )
+					attributes[ 'aria-labelledby' ] = _.labelId;
+
+				CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'div', null, attributes, innerHTML );
 			},
 
 			/**
@@ -452,6 +459,10 @@ CKEDITOR.plugins.add( 'dialogui', {
 					return html.join( '' );
 				};
 
+				// Adding a role="radiogroup" to definition used for wrapper.
+				elementDefinition.role = 'radiogroup';
+				elementDefinition.includeLabel = true;
+
 				CKEDITOR.ui.dialog.labeledElement.call( this, dialog, elementDefinition, htmlList, innerHTML );
 				this._.children = children;
 			},

tests/plugins/dialogui/elements.js

@@ -0,0 +1,56 @@
+/* bender-tags: editor,unit */
+/* bender-ckeditor-plugins: dialog,dialogui */
+
+( function() {
+	'use strict';
+
+	var container = new CKEDITOR.dom.element( 'div' );
+
+	bender.test( {
+		'test CKEDITOR.ui.dialog.radio wai-aria role=radiogroup': function() {
+			var htmlList = [];
+
+			new CKEDITOR.ui.dialog.radio( this.getDialogMockup(), this.getMockupRadioDefinition(), htmlList );
+
+			container.setHtml( htmlList.join( '' ) );
+
+			var wrapper = container.findOne( '.cke_dialog_ui_radio' );
+
+			assert.areSame( 'radiogroup', wrapper.getAttribute( 'role' ), 'Role "radiogroup" for set for the container' );
+		},
+
+		'test CKEDITOR.ui.dialog.labeledElement wai-aria role': function() {
+			var outputHtml = [],
+				contentFunction = function() { return ''; };
+
+			new CKEDITOR.ui.dialog.labeledElement( this.getDialogMockup(), {}, outputHtml, contentFunction );
+
+			container.setHtml( outputHtml.join( '' ) );
+
+			var labeled = container.findOne( '.cke_dialog_ui_labeled_content' );
+
+			assert.areSame( 'presentation', labeled.getAttribute( 'role' ), 'Role "presentation" set for labeled content' );
+		},
+
+		// Returns the simplest possible radio dialog element definition.
+		getMockupRadioDefinition: function() {
+			return {
+				items: [
+					// At least one item is required.
+					[ 'val', 'label' ]
+				],
+				type: 'radio'
+			};
+		},
+
+		// Returns the simplest possible object that mimics a `CKEDITOR.dialog` variable.
+		getDialogMockup: function() {
+			return {
+				_: {
+					focusList: []
+				},
+				on: function() {}
+			};
+		}
+	} );
+} )();