Merge pull request #265 from ckeditor/t/153

Fix: List items should handle Enter and Space key press when focused. Closes #153.

Author: oskarwrobel

src/list/listitemview.js

@@ -9,6 +9,7 @@
 
 import View from '../view';
 import Template from '../template';
+import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
 /**
  * The list item view class.
@@ -31,6 +32,14 @@ export default class ListItemView extends View {
 		 */
 		this.set( 'tabindex', -1 );
 
+		/**
+		 * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+		 *
+		 * @readonly
+		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
+		 */
+		this.keystrokes = new KeystrokeHandler();
+
 		const bind = this.bindTemplate;
 
 		this.template = new Template( {
@@ -92,6 +101,22 @@ export default class ListItemView extends View {
 		 */
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const onKeystrokePress = ( data, cancel ) => {
+			this.fire( 'execute' );
+			cancel();
+		};
+
+		this.keystrokes.listenTo( this.element );
+
+		// Execute on Enter and Space key press.
+		this.keystrokes.set( 'Enter', onKeystrokePress );
+		this.keystrokes.set( 'Space', onKeystrokePress );
+	}
+
 	/**
 	 * Focuses the list item.
 	 */

tests/list/listitemview.js

@@ -3,9 +3,10 @@
  * For licensing, see LICENSE.md.
  */
 
-/* globals Event */
+/* global Event */
 
 import ListItemView from '../../src/list/listitemview';
+import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
 describe( 'ListItemView', () => {
 	let view;
@@ -24,6 +25,48 @@ describe( 'ListItemView', () => {
 		it( 'creates element from template', () => {
 			expect( view.element.classList.contains( 'ck-list__item' ) ).to.be.true;
 		} );
+
+		it( 'should create #keystrokes instance', () => {
+			expect( view.keystrokes ).to.be.instanceOf( KeystrokeHandler );
+		} );
+	} );
+
+	describe( 'init()', () => {
+		it( 'starts listening for #keystrokes coming from #element', () => {
+			const spy = sinon.spy( view.keystrokes, 'listenTo' );
+
+			view.init();
+			sinon.assert.calledOnce( spy );
+			sinon.assert.calledWithExactly( spy, view.element );
+		} );
+
+		// https://github.com/ckeditor/ckeditor5-ui/issues/153
+		it( 'triggers view#execute event when Enter or Space key is pressed', () => {
+			const spy = sinon.spy();
+			const evtData = {
+				keyCode: 10,
+				preventDefault: sinon.spy(),
+				stopPropagation: sinon.spy()
+			};
+
+			view.on( 'execute', spy );
+			view.keystrokes.press( evtData );
+
+			sinon.assert.notCalled( spy );
+			sinon.assert.notCalled( evtData.preventDefault );
+
+			evtData.keyCode = 13;
+			view.keystrokes.press( evtData );
+
+			sinon.assert.calledOnce( spy );
+			sinon.assert.calledOnce( evtData.preventDefault );
+
+			evtData.keyCode = 32;
+			view.keystrokes.press( evtData );
+
+			sinon.assert.calledTwice( spy );
+			sinon.assert.calledTwice( evtData.preventDefault );
+		} );
 	} );
 
 	describe( 'DOM bindings', () => {