3 files changed, 423 insertions, 374 deletions
diff --git a/_source/plugins/templates/dialogs/templates.js b/_source/plugins/templates/dialogs/templates.js
index 732511f..98c8feb 100644
--- a/_source/plugins/templates/dialogs/templates.js
+++ b/_source/plugins/templates/dialogs/templates.js
@@ -1,180 +1,229 @@
-/*
-Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
-For licensing, see LICENSE.html or http://ckeditor.com/license
-*/
-
-(function()
-{
-	var doc = CKEDITOR.document;
-
-	var listId = 'cke' + CKEDITOR.tools.getNextNumber();
-
-	// Constructs the HTML view of the specified templates data.
-	function renderTemplatesList( editor, templatesDefinitions )
-	{
-		var listDiv = doc.getById( listId );
-
-		// clear loading wait text.
-		listDiv.setHtml( '' );
-
-		for ( var i = 0 ; i < templatesDefinitions.length ; i++ )
-		{
-			var definition = CKEDITOR.getTemplates( templatesDefinitions[ i ] ),
-				imagesPath = definition.imagesPath,
-				templates = definition.templates;
-
-			for ( var j = 0 ; j < templates.length ; j++ )
-			{
-				var template = templates[ j ];
-				listDiv.append( createTemplateItem( editor, template, imagesPath ) );
-			}
-		}
-	}
-
-	function createTemplateItem( editor, template, imagesPath )
-	{
-		var div = doc.createElement( 'div' );
-		div.setAttribute( 'class', 'cke_tpl_item' );
-
-		// Build the inner HTML of our new item DIV.
-		var html = '<table style="width:350px;" class="cke_tpl_preview"><tr>';
-
-		if( template.image && imagesPath )
-			html += '<td class="cke_tpl_preview_img"><img src="' + CKEDITOR.getUrl( imagesPath + template.image ) + '"></td>';
-
-		html += '<td style="white-space:normal;"><span class="cke_tpl_title">' + template.title + '</span><br/>';
-
-		if( template.description )
-			html += '<span>' + template.description + '</span>';
-
-		html += '</td></tr></table>';
-
-		div.setHtml( html );
-
-		div.on( 'mouseover', function()
-			{
-				div.addClass( 'cke_tpl_hover' );
-			});
-
-		div.on( 'mouseout', function()
-			{
-				div.removeClass( 'cke_tpl_hover' );
-			});
-
-		div.on( 'click', function()
-			{
-				insertTemplate( editor, template.html );
-			});
-
-		return div;
-	}
-
-	/**
-	 * Insert the specified template content
-	 * to document.
-	 * @param {Number} index
-	 */
-	function insertTemplate( editor, html )
-	{
-		var dialog = CKEDITOR.dialog.getCurrent(),
-			isInsert = dialog.getValueOf( 'selectTpl', 'chkInsertOpt' );
-
-		if( isInsert )
-		{
-			// Everything should happen after the document is loaded (#4073).
-			editor.on( 'contentDom', function( evt )
-			{
-				evt.removeListener();
-				dialog.hide();
-
-				// Place the cursor at the first editable place.
-				var range = new CKEDITOR.dom.range( editor.document );
-				range.moveToElementEditStart( editor.document.getBody() );
-				range.select( true );
-			} );
-			editor.setData( html );
-		}
-		else
-		{
-			editor.insertHtml( html );
-			dialog.hide();
-		}
-	}
-
-	CKEDITOR.dialog.add( 'templates', function( editor )
-		{
-			// Load skin at first.
-			CKEDITOR.skins.load( editor, 'templates' );
-
-			/**
-			 * Load templates once.
-			 */
-			var isLoaded = false;
-
-			return {
-				title :editor.lang.templates.title,
-
-				minWidth : CKEDITOR.env.ie ? 440 : 400,
-				minHeight : 340,
-
-				contents :
-				[
-					{
-						id :'selectTpl',
-						label : editor.lang.templates.title,
-						elements :
-						[
-							{
-								type : 'vbox',
-								padding : 5,
-								children :
-								[
-									{
-										type : 'html',
-										html :
-											'<span>'  +
-												editor.lang.templates.selectPromptMsg +
-											'</span>'
-									},
-									{
-										type : 'html',
-										html :
-											'<div id="' + listId + '" class="cke_tpl_list">' +
-												'<div class="cke_tpl_loading"><span></span></div>' +
-											'</div>'
-									},
-									{
-										id : 'chkInsertOpt',
-										type : 'checkbox',
-										label : editor.lang.templates.insertOption,
-										'default' : editor.config.templates_replaceContent
-									}
-								]
-							}
-						]
-					}
-				],
-
-				buttons : [ CKEDITOR.dialog.cancelButton ],
-
-				onShow : function()
-				{
-					CKEDITOR.loadTemplates( editor.config.templates_files, function()
-						{
-							var templates = editor.config.templates.split( ',' );
-
-							if ( templates.length )
-								renderTemplatesList( editor, templates );
-							else
-							{
-								var listCtEl = doc.getById( listId );
-								listCtEl.setHtml(
-									'<div class="cke_tpl_empty">' +
-										'<span>' + editor.lang.templates.emptyListMsg + '</span>' +
-									'</div>' );
-							}
-						});
-				}
-			};
-		});
-})();
+/*
+Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+*/
+
+(function()
+{
+	var doc = CKEDITOR.document;
+
+	CKEDITOR.dialog.add( 'templates', function( editor )
+		{
+			// Constructs the HTML view of the specified templates data.
+			function renderTemplatesList( container, templatesDefinitions )
+			{
+				// clear loading wait text.
+				container.setHtml( '' );
+
+				for ( var i = 0 ; i < templatesDefinitions.length ; i++ )
+				{
+					var definition = CKEDITOR.getTemplates( templatesDefinitions[ i ] ),
+						imagesPath = definition.imagesPath,
+						templates = definition.templates,
+						count = templates.length;
+
+					for ( var j = 0 ; j < count ; j++ )
+					{
+						var template = templates[ j ],
+							item =  createTemplateItem( template, imagesPath );
+						item.setAttribute( 'aria-posinset', j + 1 );
+						item.setAttribute( 'aria-setsize', count );
+						container.append( item );
+					}
+				}
+			}
+
+			function createTemplateItem( template, imagesPath )
+			{
+				var item = CKEDITOR.dom.element.createFromHtml(
+						'<a href="javascript:void(0)" tabIndex="-1" role="option" >' +
+							'<div class="cke_tpl_item"></div>' +
+						'</a>' );
+
+				// Build the inner HTML of our new item DIV.
+				var html = '<table style="width:350px;" class="cke_tpl_preview"><tr>';
+
+				if ( template.image && imagesPath )
+					html += '<td class="cke_tpl_preview_img"><img src="' + CKEDITOR.getUrl( imagesPath + template.image ) + '"></td>';
+
+				html += '<td style="white-space:normal;"><span class="cke_tpl_title">' + template.title + '</span><br/>';
+
+				if ( template.description )
+					html += '<span>' + template.description + '</span>';
+
+				html += '</td></tr></table>';
+
+				item.getFirst().setHtml( html );
+
+				item.on( 'click', function() { insertTemplate( template.html ); } );
+
+				return item;
+			}
+
+			/**
+			 * Insert the specified template content into editor.
+			 * @param {Number} index
+			 */
+			function insertTemplate( html )
+			{
+				var dialog = CKEDITOR.dialog.getCurrent(),
+					isInsert = dialog.getValueOf( 'selectTpl', 'chkInsertOpt' );
+
+				if ( isInsert )
+				{
+					// Everything should happen after the document is loaded (#4073).
+					editor.on( 'contentDom', function( evt )
+					{
+						evt.removeListener();
+						dialog.hide();
+
+						// Place the cursor at the first editable place.
+						var range = new CKEDITOR.dom.range( editor.document );
+						range.moveToElementEditStart( editor.document.getBody() );
+						range.select( true );
+						setTimeout( function ()
+						{
+							editor.fire( 'saveSnapshot' );
+						}, 0 );
+					} );
+
+					editor.fire( 'saveSnapshot' );
+					editor.setData( html );
+				}
+				else
+				{
+					editor.insertHtml( html );
+					dialog.hide();
+				}
+			}
+
+			function keyNavigation( evt )
+			{
+				var target = evt.data.getTarget(),
+					position = listContainer.getPosition( target );
+
+				// Keyboard navigation for template list.
+				if ( position > CKEDITOR.POSITION_CONTAINS )
+				{
+					var keystroke = evt.data.getKeystroke(),
+						items = listContainer.getElementsByTag( 'a' ),
+						focusItem;
+
+					if ( items )
+					{
+						switch ( keystroke )
+						{
+							case 40 :					// ARROW-DOWN
+								focusItem = target.getNext();
+								break;
+
+							case 38 :					// ARROW-UP
+								focusItem = target.getPrevious();
+								break;
+
+							case 13 :					// ENTER
+							case 32 :					// SPACE
+								target.fire( 'click' );
+						}
+
+						if ( focusItem )
+						{
+							focusItem.focus();
+							evt.data.preventDefault();
+						}
+					}
+				}
+			}
+
+			// Load skin at first.
+			CKEDITOR.skins.load( editor, 'templates' );
+
+			var listContainer;
+
+			return {
+				title :editor.lang.templates.title,
+
+				minWidth : CKEDITOR.env.ie ? 440 : 400,
+				minHeight : 340,
+
+				contents :
+				[
+					{
+						id :'selectTpl',
+						label : editor.lang.templates.title,
+						elements :
+						[
+							{
+								type : 'vbox',
+								padding : 5,
+								children :
+								[
+									{
+										type : 'html',
+										html :
+											'<span>'  +
+												editor.lang.templates.selectPromptMsg +
+											'</span>'
+									},
+									{
+										id : "templatesList",
+										type : 'html',
+										focus: function()
+										{
+											// Move focus to the first list item if available.
+											try { this.getElement().getElementsByTag( 'a' ).getItem( 0 ).focus(); }
+											catch( er ){}
+										},
+										html :
+											'<div class="cke_tpl_list" tabIndex="-1" role="listbox" aria-labelledby="cke_tpl_list_label">' +
+												'<div class="cke_tpl_loading"><span></span></div>' +
+											'</div>' +
+											'<span class="cke_voice_label" id="cke_tpl_list_label">' + editor.lang.common.options+ '</span>'
+									},
+									{
+										id : 'chkInsertOpt',
+										type : 'checkbox',
+										label : editor.lang.templates.insertOption,
+										'default' : editor.config.templates_replaceContent
+									}
+								]
+							}
+						]
+					}
+				],
+
+				buttons : [ CKEDITOR.dialog.cancelButton ],
+
+				onShow : function()
+				{
+					var templatesListField = this.getContentElement( 'selectTpl' , 'templatesList' );
+					listContainer = templatesListField.getElement();
+
+					CKEDITOR.loadTemplates( editor.config.templates_files, function()
+						{
+							var templates = editor.config.templates.split( ',' );
+
+							if ( templates.length )
+							{
+								renderTemplatesList( listContainer, templates );
+								templatesListField.focus();
+							}
+							else
+							{
+								listContainer.setHtml(
+									'<div class="cke_tpl_empty">' +
+										'<span>' + editor.lang.templates.emptyListMsg + '</span>' +
+									'</div>' );
+							}
+						});
+
+					this._.element.on( 'keydown', keyNavigation );
+				},
+
+				onHide : function ()
+				{
+					this._.element.removeListener( 'keydown', keyNavigation );
+				}
+			};
+		});
+})();
diff --git a/_source/plugins/templates/plugin.js b/_source/plugins/templates/plugin.js
index 0c1ae27..64d70e0 100644
--- a/_source/plugins/templates/plugin.js
+++ b/_source/plugins/templates/plugin.js
@@ -1,100 +1,100 @@
-/*
-Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
-For licensing, see LICENSE.html or http://ckeditor.com/license
-*/
-
-(function()
-{
-	CKEDITOR.plugins.add( 'templates',
-		{
-			requires : [ 'dialog' ],
-
-			init : function( editor )
-			{
-				CKEDITOR.dialog.add( 'templates', CKEDITOR.getUrl( this.path + 'dialogs/templates.js' ) );
-
-				editor.addCommand( 'templates', new CKEDITOR.dialogCommand( 'templates' ) );
-
-				editor.ui.addButton( 'Templates',
-					{
-						label : editor.lang.templates.button,
-						command : 'templates'
-					});
-			}
-		});
-
-	var templates = {},
-		loadedTemplatesFiles = {};
-
-	CKEDITOR.addTemplates = function( name, definition )
-	{
-		templates[ name ] = definition;
-	};
-
-	CKEDITOR.getTemplates = function( name )
-	{
-		return templates[ name ];
-	};
-
-	CKEDITOR.loadTemplates = function( templateFiles, callback )
-	{
-		// Holds the templates files to be loaded.
-		var toLoad = [];
-
-		// Look for pending template files to get loaded.
-		for ( var i = 0 ; i < templateFiles.length ; i++ )
-		{
-			if ( !loadedTemplatesFiles[ templateFiles[ i ] ] )
-			{
-				toLoad.push( templateFiles[ i ] );
-				loadedTemplatesFiles[ templateFiles[ i ] ] = 1;
-			}
-		}
-
-		if ( toLoad.length > 0 )
-			CKEDITOR.scriptLoader.load( toLoad, callback );
-		else
-			setTimeout( callback, 0 );
-	};
-})();
-
-
-
-/**
- * The templates definition set to use. It accepts a list of names separated by
- * comma. It must match definitions loaded with the templates_files setting.
- * @type String
- * @default 'default'
- * @example
- * config.templates = 'my_templates';
- */
-CKEDITOR.config.templates = 'default';
-
-/**
- * The list of templates definition files to load.
- * @type (String) Array
- * @default [ 'plugins/templates/templates/default.js' ]
- * @example
- * config.templates_files =
- *     [
- *         '/editor_templates/site_default.js',
- *         'http://www.example.com/user_templates.js
- *     ];
- *
- */
-CKEDITOR.config.templates_files =
-	[
-		CKEDITOR.getUrl(
-			'_source/' + // @Packager.RemoveLine
-			'plugins/templates/templates/default.js' )
-	];
-
-/**
- * Whether the "Replace actual contents" checkbox is checked by default in the
- * Templates dialog.
- * @type Boolean
- * @default true
- * @example
- * config.templates_replaceContent = false;
- */
-CKEDITOR.config.templates_replaceContent = true;
+/*
+Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+*/
+
+(function()
+{
+	CKEDITOR.plugins.add( 'templates',
+		{
+			requires : [ 'dialog' ],
+
+			init : function( editor )
+			{
+				CKEDITOR.dialog.add( 'templates', CKEDITOR.getUrl( this.path + 'dialogs/templates.js' ) );
+
+				editor.addCommand( 'templates', new CKEDITOR.dialogCommand( 'templates' ) );
+
+				editor.ui.addButton( 'Templates',
+					{
+						label : editor.lang.templates.button,
+						command : 'templates'
+					});
+			}
+		});
+
+	var templates = {},
+		loadedTemplatesFiles = {};
+
+	CKEDITOR.addTemplates = function( name, definition )
+	{
+		templates[ name ] = definition;
+	};
+
+	CKEDITOR.getTemplates = function( name )
+	{
+		return templates[ name ];
+	};
+
+	CKEDITOR.loadTemplates = function( templateFiles, callback )
+	{
+		// Holds the templates files to be loaded.
+		var toLoad = [];
+
+		// Look for pending template files to get loaded.
+		for ( var i = 0 ; i < templateFiles.length ; i++ )
+		{
+			if ( !loadedTemplatesFiles[ templateFiles[ i ] ] )
+			{
+				toLoad.push( templateFiles[ i ] );
+				loadedTemplatesFiles[ templateFiles[ i ] ] = 1;
+			}
+		}
+
+		if ( toLoad.length > 0 )
+			CKEDITOR.scriptLoader.load( toLoad, callback );
+		else
+			setTimeout( callback, 0 );
+	};
+})();
+
+
+
+/**
+ * The templates definition set to use. It accepts a list of names separated by
+ * comma. It must match definitions loaded with the templates_files setting.
+ * @type String
+ * @default 'default'
+ * @example
+ * config.templates = 'my_templates';
+ */
+CKEDITOR.config.templates = 'default';
+
+/**
+ * The list of templates definition files to load.
+ * @type (String) Array
+ * @default [ 'plugins/templates/templates/default.js' ]
+ * @example
+ * config.templates_files =
+ *     [
+ *         '/editor_templates/site_default.js',
+ *         'http://www.example.com/user_templates.js
+ *     ];
+ *
+ */
+CKEDITOR.config.templates_files =
+	[
+		CKEDITOR.getUrl(
+			'_source/' + // @Packager.RemoveLine
+			'plugins/templates/templates/default.js' )
+	];
+
+/**
+ * Whether the "Replace actual contents" checkbox is checked by default in the
+ * Templates dialog.
+ * @type Boolean
+ * @default true
+ * @example
+ * config.templates_replaceContent = false;
+ */
+CKEDITOR.config.templates_replaceContent = true;
diff --git a/_source/plugins/templates/templates/default.js b/_source/plugins/templates/templates/default.js
index dc8ef91..53b8a42 100644
--- a/_source/plugins/templates/templates/default.js
+++ b/_source/plugins/templates/templates/default.js
@@ -1,94 +1,94 @@
-/*
-Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
-For licensing, see LICENSE.html or http://ckeditor.com/license
-*/
-
-// Register a templates definition set named "default".
-CKEDITOR.addTemplates( 'default',
-{
-	// The name of sub folder which hold the shortcut preview images of the
-	// templates.
-	imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),
-
-	// The templates definitions.
-	templates :
-		[
-			{
-				title: 'Image and Title',
-				image: 'template1.gif',
-				description: 'One main image with a title and text that surround the image.',
-				html:
-					'<h3>' +
-						'<img style="margin-right: 10px" height="100" width="100" align="left"/>' +
-						'Type the title here'+
-					'</h3>' +
-					'<p>' +
-						'Type the text here' +
-					'</p>'
-			},
-			{
-				title: 'Strange Template',
-				image: 'template2.gif',
-				description: 'A template that defines two colums, each one with a title, and some text.',
-				html:
-					'<table cellspacing="0" cellpadding="0" style="width:100%" border="0">' +
-						'<tr>' +
-							'<td style="width:50%">' +
-								'<h3>Title 1</h3>' +
-							'</td>' +
-							'<td></td>' +
-							'<td style="width:50%">' +
-								'<h3>Title 2</h3>' +
-							'</td>' +
-						'</tr>' +
-						'<tr>' +
-							'<td>' +
-								'Text 1' +
-							'</td>' +
-							'<td></td>' +
-							'<td>' +
-								'Text 2' +
-							'</td>' +
-						'</tr>' +
-					'</table>' +
-					'<p>' +
-						'More text goes here.' +
-					'</p>'
-			},
-			{
-				title: 'Text and Table',
-				image: 'template3.gif',
-				description: 'A title with some text and a table.',
-				html:
-					'<div style="width: 80%">' +
-						'<h3>' +
-							'Title goes here' +
-						'</h3>' +
-						'<table style="float: right" cellspacing="0" cellpadding="0" style="width:150px" border="1">' +
-							'<caption style="border:solid 1px black">' +
-								'<strong>Table title</strong>' +
-							'</caption>' +
-							'</tr>' +
-							'<tr>' +
-								'<td>&nbsp;</td>' +
-								'<td>&nbsp;</td>' +
-								'<td>&nbsp;</td>' +
-							'</tr>' +
-							'<tr>' +
-								'<td>&nbsp;</td>' +
-								'<td>&nbsp;</td>' +
-								'<td>&nbsp;</td>' +
-							'</tr>' +
-							'<tr>' +
-								'<td>&nbsp;</td>' +
-								'<td>&nbsp;</td>' +
-								'<td>&nbsp;</td>' +
-							'</tr>' +
-						'</table>' +
-						'<p>' +
-							'Type the text here' +
-						'</p>' +
-					'</div>'
-			}
-		]
-});
+/*
+Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+*/
+
+// Register a templates definition set named "default".
+CKEDITOR.addTemplates( 'default',
+{
+	// The name of sub folder which hold the shortcut preview images of the
+	// templates.
+	imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),
+
+	// The templates definitions.
+	templates :
+		[
+			{
+				title: 'Image and Title',
+				image: 'template1.gif',
+				description: 'One main image with a title and text that surround the image.',
+				html:
+					'<h3>' +
+						'<img style="margin-right: 10px" height="100" width="100" align="left"/>' +
+						'Type the title here'+
+					'</h3>' +
+					'<p>' +
+						'Type the text here' +
+					'</p>'
+			},
+			{
+				title: 'Strange Template',
+				image: 'template2.gif',
+				description: 'A template that defines two colums, each one with a title, and some text.',
+				html:
+					'<table cellspacing="0" cellpadding="0" style="width:100%" border="0">' +
+						'<tr>' +
+							'<td style="width:50%">' +
+								'<h3>Title 1</h3>' +
+							'</td>' +
+							'<td></td>' +
+							'<td style="width:50%">' +
+								'<h3>Title 2</h3>' +
+							'</td>' +
+						'</tr>' +
+						'<tr>' +
+							'<td>' +
+								'Text 1' +
+							'</td>' +
+							'<td></td>' +
+							'<td>' +
+								'Text 2' +
+							'</td>' +
+						'</tr>' +
+					'</table>' +
+					'<p>' +
+						'More text goes here.' +
+					'</p>'
+			},
+			{
+				title: 'Text and Table',
+				image: 'template3.gif',
+				description: 'A title with some text and a table.',
+				html:
+					'<div style="width: 80%">' +
+						'<h3>' +
+							'Title goes here' +
+						'</h3>' +
+						'<table style="float: right" cellspacing="0" cellpadding="0" style="width:150px" border="1">' +
+							'<caption style="border:solid 1px black">' +
+								'<strong>Table title</strong>' +
+							'</caption>' +
+							'</tr>' +
+							'<tr>' +
+								'<td>&nbsp;</td>' +
+								'<td>&nbsp;</td>' +
+								'<td>&nbsp;</td>' +
+							'</tr>' +
+							'<tr>' +
+								'<td>&nbsp;</td>' +
+								'<td>&nbsp;</td>' +
+								'<td>&nbsp;</td>' +
+							'</tr>' +
+							'<tr>' +
+								'<td>&nbsp;</td>' +
+								'<td>&nbsp;</td>' +
+								'<td>&nbsp;</td>' +
+							'</tr>' +
+						'</table>' +
+						'<p>' +
+							'Type the text here' +
+						'</p>' +
+					'</div>'
+			}
+		]
+});