X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=_source%2Fplugins%2Fsmiley%2Fdialogs%2Fsmiley.js;h=c3c381486d53c17580d60c0be3a62dd43405746d;hb=614511639979907ceb0da3614122a4d8eb963ad4;hp=3fe408c0b3d4d1567e136a5b8c746fde60d89661;hpb=c6e377a02b54abc07129d72b632763c727476a15;p=ckeditor.git

diff --git a/_source/plugins/smiley/dialogs/smiley.js b/_source/plugins/smiley/dialogs/smiley.js
index 3fe408c..c3c3814 100644
--- a/_source/plugins/smiley/dialogs/smiley.js
+++ b/_source/plugins/smiley/dialogs/smiley.js
@@ -6,8 +6,9 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
 CKEDITOR.dialog.add( 'smiley', function( editor )
 {
 	var config = editor.config,
+		lang = editor.lang.smiley,
 		images = config.smiley_images,
-		columns = 8,
+		columns = config.smiley_columns || 8,
 		i;
 
 	/**
@@ -20,9 +21,7 @@ CKEDITOR.dialog.add( 'smiley', function( editor )
 		var target = evt.data.getTarget(),
 			targetName = target.getName();
 
-		if ( targetName == 'td' )
-			target = target.getChild( [ 0, 0 ] );
-		else if ( targetName == 'a' )
+		if ( targetName == 'a' )
 			target = target.getChild( 0 );
 		else if ( targetName != 'img' )
 			return;
@@ -37,7 +36,9 @@ CKEDITOR.dialog.add( 'smiley', function( editor )
 					src : src,
 					_cke_saved_src : src,
 					title : title,
-					alt : title
+					alt : title,
+					width : target.$.width,
+					height : target.$.height
 				}
 			});
 
@@ -53,29 +54,10 @@ CKEDITOR.dialog.add( 'smiley', function( editor )
 		element = new CKEDITOR.dom.element( element );
 		var relative, nodeToMove;
 
-		var keystroke = ev.getKeystroke();
+		var keystroke = ev.getKeystroke(),
+			rtl = editor.lang.dir == 'rtl';
 		switch ( keystroke )
 		{
-			// RIGHT-ARROW
-			case 39 :
-				// relative is TD
-				if ( ( relative = element.getParent().getNext() ) )
-				{
-					nodeToMove = relative.getChild( 0 );
-					nodeToMove.focus();
-				}
-				ev.preventDefault();
-				break;
-			// LEFT-ARROW
-			case 37 :
-				// relative is TD
-				if ( ( relative = element.getParent().getPrevious() ) )
-				{
-					nodeToMove = relative.getChild( 0 );
-					nodeToMove.focus();
-				}
-				ev.preventDefault();
-				break;
 			// UP-ARROW
 			case 38 :
 				// relative is TR
@@ -103,6 +85,9 @@ CKEDITOR.dialog.add( 'smiley', function( editor )
 				onClick( { data: ev } );
 				ev.preventDefault();
 				break;
+
+			// RIGHT-ARROW
+			case rtl ? 37 : 39 :
 			// TAB
 			case 9 :
 				// relative is TD
@@ -121,6 +106,9 @@ CKEDITOR.dialog.add( 'smiley', function( editor )
 					ev.preventDefault(true);
 				}
 				break;
+
+			// LEFT-ARROW
+			case rtl ? 39 : 37 :
 			// SHIFT + TAB
 			case CKEDITOR.SHIFT + 9 :
 				// relative is TD
@@ -145,27 +133,37 @@ CKEDITOR.dialog.add( 'smiley', function( editor )
 	});
 
 	// Build the HTML for the smiley images table.
+	var labelId = CKEDITOR.tools.getNextId() + '_smiley_emtions_label';
 	var html =
 	[
-		'<table cellspacing="2" cellpadding="2"',
+		'<div>' +
+		'<span id="' + labelId + '" class="cke_voice_label">' + lang.options +'</span>',
+		'<table role="listbox" aria-labelledby="' + labelId + '" style="width:100%;height:100%" cellspacing="2" cellpadding="2"',
 		CKEDITOR.env.ie && CKEDITOR.env.quirks ? ' style="position:absolute;"' : '',
 		'><tbody>'
 	];
 
-	for ( i = 0 ; i < images.length ; i++ )
+	var size = images.length;
+	for ( i = 0 ; i < size ; i++ )
 	{
 		if ( i % columns === 0 )
 			html.push( '<tr>' );
 
+		var smileyLabelId = 'cke_smile_label_' + i + '_' + CKEDITOR.tools.getNextNumber();
 		html.push(
-			'<td class="cke_dark_background cke_hand cke_centered" style="vertical-align: middle;">' +
-				'<a href="javascript:void(0)" class="cke_smile" tabindex="-1" onkeydown="CKEDITOR.tools.callFunction( ', onKeydown, ', event, this );">',
-					'<img class="hand" title="', config.smiley_descriptions[i], '"' +
+			'<td class="cke_dark_background cke_centered" style="vertical-align: middle;">' +
+				'<a href="javascript:void(0)" role="option"',
+					' aria-posinset="' + ( i +1 ) + '"',
+					' aria-setsize="' + size + '"',
+					' aria-labelledby="' + smileyLabelId + '"',
+					' class="cke_smile cke_hand" tabindex="-1" onkeydown="CKEDITOR.tools.callFunction( ', onKeydown, ', event, this );">',
+					'<img class="cke_hand" title="', config.smiley_descriptions[i], '"' +
 						' cke_src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '" alt="', config.smiley_descriptions[i], '"',
 						' src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '"',
 						// IE BUG: Below is a workaround to an IE image loading bug to ensure the image sizes are correct.
 						( CKEDITOR.env.ie ? ' onload="this.setAttribute(\'width\', 2); this.removeAttribute(\'width\');" ' : '' ),
 					'>' +
+					'<span id="' + smileyLabelId + '" class="cke_voice_label">' +config.smiley_descriptions[ i ]  + '</span>' +
 				'</a>',
  			'</td>' );
 
@@ -180,7 +178,7 @@ CKEDITOR.dialog.add( 'smiley', function( editor )
 		html.push( '</tr>' );
 	}
 
-	html.push( '</tbody></table>' );
+	html.push( '</tbody></table></div>' );
 
 	var smileySelector =
 	{
@@ -191,12 +189,17 @@ CKEDITOR.dialog.add( 'smiley', function( editor )
 			dialog = event.sender;
 		},
 		focus : function()
- 		{
-			var firstSmile = this.getElement().getChild( [0, 0, 0, 0] );
-			firstSmile.focus();
- 		},
+		{
+			var self = this;
+			// IE need a while to move the focus (#6539).
+			setTimeout( function ()
+			{
+				var firstSmile = self.getElement().getElementsByTag( 'a' ).getItem( 0 );
+				firstSmile.focus();
+			}, 0 );
+		},
 		onClick : onClick,
-		style : 'width: 100%; height: 100%; border-collapse: separate;'
+		style : 'width: 100%; border-collapse: separate;'
 	};
 
 	return {