Merge "Add missing keyboard navigation for param/language lists"

modules/ext.templateDataGenerator.editTemplatePage/Dialog.js

@@ -1102,13 +1102,15 @@ Dialog.prototype.changeParamPropertyInput = function ( paramKey, propName, value
  */
 Dialog.prototype.addParamToSelectWidget = function ( paramKey ) {
 	var data = this.model.getParamData( paramKey );
-
 	this.paramSelect.addItems( [ new ParamWidget( {
 		key: paramKey,
 		label: this.model.getParamValue( paramKey, 'label', this.language ),
 		aliases: data.aliases,
 		description: this.model.getParamValue( paramKey, 'description', this.language )
-	} ) ] );
+	} )
+		// Forward keyboard-triggered events from the OptionWidget to the SelectWidget
+		.connect( this.paramSelect, { choose: [ 'emit', 'choose' ] } )
+	] );
 };
 
 /**

modules/ext.templateDataGenerator.editTemplatePage/widgets/LanguageResultWidget.js

@@ -12,6 +12,12 @@ function LanguageResultWidget( config ) {
 	// Parent constructor
 	LanguageResultWidget.parent.call( this, config );
 
+	// Mixin constructors
+	OO.ui.mixin.TabIndexedElement.call( this );
+
+	// Events
+	this.$element.on( 'keydown', this.onKeyDown.bind( this ) );
+
 	// Initialization
 	this.$element.addClass( 'tdg-languageResultWidget' );
 	this.$name = $( '<div>' ).addClass( 'tdg-languageResultWidget-name' );
@@ -22,9 +28,20 @@ function LanguageResultWidget( config ) {
 /* Inheritance */
 
 OO.inheritClass( LanguageResultWidget, OO.ui.OptionWidget );
+OO.mixinClass( LanguageResultWidget, OO.ui.mixin.TabIndexedElement );
 
 /* Methods */
 
+/**
+ * @param {jQuery.Event} e Key down event
+ * @fires choose
+ */
+LanguageResultWidget.prototype.onKeyDown = function ( e ) {
+	if ( e.which === OO.ui.Keys.ENTER ) {
+		this.emit( 'choose', this );
+	}
+};
+
 /**
  * Update labels based on query
  *

modules/ext.templateDataGenerator.editTemplatePage/widgets/LanguageSearchWidget.js

@@ -88,7 +88,8 @@ LanguageSearchWidget.prototype.addResults = function () {
 		hasQuery = !!query.length,
 		items = [];
 
-	this.results.clearItems();
+	var results = this.getResults();
+	results.clearItems();
 
 	this.filteredLanguageResultWidgets.forEach( function ( languageResult ) {
 		var data = languageResult.getData();
@@ -108,13 +109,16 @@ LanguageSearchWidget.prototype.addResults = function () {
 					.updateLabel( query, matchedProperty, compare )
 					.setSelected( false )
 					.setHighlighted( false )
+					// Forward keyboard-triggered events from the OptionWidget to the SelectWidget
+					.off( 'choose' )
+					.connect( results, { choose: [ 'emit', 'choose' ] } )
 			);
 		}
 	} );
 
-	this.results.addItems( items );
+	results.addItems( items );
 	if ( hasQuery ) {
-		this.results.highlightItem( this.results.findFirstSelectableItem() );
+		results.highlightItem( results.findFirstSelectableItem() );
 	}
 };
 

modules/ext.templateDataGenerator.editTemplatePage/widgets/ParamWidget.js

@@ -16,12 +16,16 @@ function ParamWidget( data, config ) {
 
 	// Mixin constructors
 	OO.ui.mixin.DraggableElement.call( this, $.extend( { $handle: this.$icon } ) );
+	OO.ui.mixin.TabIndexedElement.call( this, { $tabIndexed: this.$element } );
 
 	this.key = data.key;
 	this.label = data.label;
 	this.aliases = data.aliases || [];
 	this.description = data.description;
 
+	// Events
+	this.$element.on( 'keydown', this.onKeyDown.bind( this ) );
+
 	// Initialize
 	this.$element.addClass( 'tdg-templateDataParamWidget' );
 	this.buildParamLabel();
@@ -32,6 +36,17 @@ function ParamWidget( data, config ) {
 OO.inheritClass( ParamWidget, OO.ui.DecoratedOptionWidget );
 
 OO.mixinClass( ParamWidget, OO.ui.mixin.DraggableElement );
+OO.mixinClass( ParamWidget, OO.ui.mixin.TabIndexedElement );
+
+/**
+ * @param {jQuery.Event} e Key down event
+ * @fires choose
+ */
+ParamWidget.prototype.onKeyDown = function ( e ) {
+	if ( e.which === OO.ui.Keys.ENTER ) {
+		this.emit( 'choose', this );
+	}
+};
 
 /**
  * Build the parameter label in the parameter select widget