Add keystroke handlings for elementspath and toolbar plugins

CHANGES.md

@@ -14,6 +14,7 @@ Fixed Issues:
 * [#5184](/~https://github.com/ckeditor/ckeditor4/issues/5184): Fixed: [Editor Placeholder](https://ckeditor.com/cke4/addon/wysiwygarea) plugin degredates typing performance.
 * [#5158](/~https://github.com/ckeditor/ckeditor4/issues/5158): Fixed: [`CKEDITOR.tools#convertToPx()`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_tools.html#method-convertToPx) gives invalid results in case helper calculator element was deleted from the DOM.
 * [#5234](/~https://github.com/ckeditor/ckeditor4/issues/5234): Fixed: [Easy Image](https://ckeditor.com/cke4/addon/easyimage) Upload file by using toolbar easyimage button was impossible.
+* [#438](/~https://github.com/ckeditor/ckeditor4/issues/438): Fixed: It is impossible to navigate to the [elementspath](https://ckeditor.com/cke4/addon/elementspath) from the [toolbar](https://ckeditor.com/cke4/addon/toolbar) by keyboard and vice versa.
 
 API changes:
 

plugins/elementspath/plugin.js

@@ -151,6 +151,9 @@
 					case 32: // SPACE
 						onClick( elementIndex );
 						return false;
+					case CKEDITOR.ALT + 121: // ALT + F10 (#438).
+						editor.execCommand( 'toolbarFocus' );
+						return false;
 				}
 				return true;
 			} );

plugins/toolbar/plugin.js

@@ -154,6 +154,9 @@
 						case 32: // SPACE
 							item.execute();
 							return false;
+						case CKEDITOR.ALT + 122: // ALT + F11 (#438).
+							editor.execCommand( 'elementsPathFocus' );
+							return false;
 					}
 					return true;
 				};

tests/plugins/elementspath/elementspath.js

@@ -1,10 +1,13 @@
 /* bender-tags: editor */
-/* bender-ckeditor-plugins: elementspath */
+/* bender-ckeditor-plugins: elementspath, toolbar, basicstyles */
 /* global elementspathTestsTools */
 
 ( function() {
 	'use strict';
 
+	var F10 = 121,
+		ESC = 27;
+
 	// Elements path feature is only available in themed UI creators.
 	bender.editor = { creator: 'replace' };
 
@@ -41,6 +44,39 @@
 				assert.areEqual( 'false', element.getAttribute( 'draggable' ), 'Element draggable attribute value.' );
 				assert.areEqual( 'return false;', element.getAttribute( 'ondragstart' ), 'Element ondragstart attribute value.' );
 			} );
+		},
+
+		// (#438)
+		'test focusing toolbar': function() {
+			var editor = this.editor,
+				commandSpy = sinon.spy( editor, 'execCommand' );
+
+			this.editorBot.setHtmlWithSelection( '<b>f^oo</b>' );
+			var pathUIPart = editor.ui.space( 'path' ).getFirst();
+
+			pathUIPart.fireEventHandler( 'keydown', {
+				keyCode: F10,
+				altKey: true
+			} );
+
+			commandSpy.restore();
+			assert.isTrue( commandSpy.calledWith( 'toolbarFocus' ) );
+		},
+
+		// (#438)
+		'test focusing editor': function() {
+			var editor = this.editor,
+				focusSpy = sinon.spy( editor, 'focus' );
+
+			this.editorBot.setHtmlWithSelection( '<b>f^oo</b>' );
+			var pathUIPart = editor.ui.space( 'path' ).getFirst();
+
+			pathUIPart.fireEventHandler( 'keydown', {
+				keyCode: ESC
+			} );
+
+			focusSpy.restore();
+			assert.isTrue( focusSpy.calledOnce );
 		}
 	} );
 } )();

tests/plugins/elementspath/manual/focus.html

@@ -0,0 +1,7 @@
+<div id="editor">
+	<p>Click here to focus the editor.</p>
+</div>
+
+<script>
+	CKEDITOR.replace( 'editor' );
+</script>

tests/plugins/elementspath/manual/focus.md

@@ -0,0 +1,16 @@
+@bender-tags: 4.19.1, 438, bug
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, elementspath
+
+1. Focus the editor.
+2. Focus elements path by pressing `ALT + F11`.
+
+**Expected:** Elementspath is focused.
+
+**Unexpected:** Elementspath is not focused.
+
+3. Press `ALT + F10`.
+
+**Expected:** Toolbar is focused.
+
+**Unexpected:** Toolbar is not focused.

tests/plugins/toolbar/basic.js

@@ -33,6 +33,9 @@ bender.editor = {
 	}
 };
 
+var F11 = 122,
+	ESC = 27;
+
 bender.test( {
 	'test toolbar': function() {
 		assert.isNotNull( this.editor.ui.space( 'toolbox' ) );
@@ -123,5 +126,39 @@ bender.test( {
 				assert.areSame( resizeData[ 0 ].outerHeight, resizeData[ 2 ].outerHeight, 'Height should properly restore to same value.' );
 			}
 		);
+	},
+
+	// (#438)
+	'test focusing elements path': function() {
+		var editor = this.editor,
+			commandSpy = sinon.spy( editor, 'execCommand' ),
+			toolboxUIPart = editor.ui.space( 'toolbox' ).findOne( '.cke_button' );
+
+		this.editorBot.setHtmlWithSelection( '<b>f^oo</b>' );
+
+		// ALT + F11
+		toolboxUIPart.fireEventHandler( 'keydown', {
+			keyCode: F11,
+			altKey: true
+		} );
+
+		commandSpy.restore();
+		assert.isTrue( commandSpy.calledWith( 'elementsPathFocus' ) );
+	},
+
+	// (#438)
+	'test focusing editor': function() {
+		var editor = this.editor,
+			focusSpy = sinon.spy( editor, 'focus' ),
+			toolboxUIPart = editor.ui.space( 'toolbox' ).findOne( '.cke_button' );
+
+		this.editorBot.setHtmlWithSelection( '<b>f^oo</b>' );
+
+		toolboxUIPart.fireEventHandler( 'keydown', {
+			keyCode: ESC
+		} );
+
+		focusSpy.restore();
+		assert.isTrue( focusSpy.calledOnce );
 	}
 } );

tests/plugins/toolbar/manual/focus.html

@@ -0,0 +1,7 @@
+<div id="editor">
+	<p>Click here to focus the editor.</p>
+</div>
+
+<script>
+	CKEDITOR.replace( 'editor' );
+</script>

tests/plugins/toolbar/manual/focus.md

@@ -0,0 +1,16 @@
+@bender-tags: 4.19.1, 438, bug
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, elementspath
+
+1. Focus the editor.
+2. Focus toolbar by pressing `ALT + F10`.
+
+**Expected:** Toolbar is focused.
+
+**Unexpected:** Toolbar is not focused.
+
+3. Press `ALT + F11`.
+
+**Expected:** Elementspath is focused.
+
+**Unexpected:** Elementspath is not focused.