Fix for: Can't open context menu with keyboard shortcut over widget

CHANGES.md

@@ -11,6 +11,7 @@ Fixed Issues:
 * [#2816](https://github.com/ckeditor/ckeditor-dev/issues/2816): Fixed: [Enhanced Image](https://ckeditor.com/cke4/addon/image2) resize handler is visible in [read-only mode](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_readonly.html).
 * [#2874](https://github.com/ckeditor/ckeditor-dev/issues/2874): Fixed: [Enhanced Image](https://ckeditor.com/cke4/addon/image2) resize handler is not added when editor is initialized in [read-only mode](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_readonly.html).
 * [#2775](https://github.com/ckeditor/ckeditor-dev/issues/2775): Fixed: [Clipboard](https://ckeditor.com/cke4/addon/clipboard) paste buttons have wrong state when [read-only](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_readonly.html) mode is set by mouse event listener with [Div Editing Area](https://ckeditor.com/cke4/addon/divarea) plugin.
+* [#1901](https://github.com/ckeditor/ckeditor-dev/issues/1901): Fixed: Can't open a context menu with keyboard shortcut <kbd>Shift</kbd>+<kbd>F10</kbd> over a [Widget](https://ckeditor.com/cke4/addon/widget).
 
 ## CKEditor 4.11.3
 

plugins/widget/plugin.js

@@ -3104,6 +3104,9 @@
 	// LEFT, RIGHT, UP, DOWN, DEL, BACKSPACE - unblock default fake sel handlers.
 	var keystrokesNotBlockedByWidget = { 37: 1, 38: 1, 39: 1, 40: 1, 8: 1, 46: 1 };
 
+	// Do not block SHIFT + F10 which opens context menu (#1901).
+	keystrokesNotBlockedByWidget[ CKEDITOR.SHIFT + 121 ] = 1;
+
 	// Applies or removes style's classes from widget.
 	// @param {CKEDITOR.style} style Custom widget style.
 	// @param {Boolean} apply Whether to apply or remove style.
@@ -3570,13 +3573,15 @@
 			// ENTER.
 			if ( keyCode == 13 ) {
 				widget.edit();
-				// CTRL+C or CTRL+X.
+			// CTRL+C or CTRL+X.
 			} else if ( keyCode == CKEDITOR.CTRL + 67 || keyCode == CKEDITOR.CTRL + 88 ) {
 				copySingleWidget( widget, keyCode == CKEDITOR.CTRL + 88 );
 				return; // Do not preventDefault.
-			} else if ( keyCode in keystrokesNotBlockedByWidget || ( CKEDITOR.CTRL & keyCode ) || ( CKEDITOR.ALT & keyCode ) ) {
-				// Pass chosen keystrokes to other plugins or default fake sel handlers.
-				// Pass all CTRL/ALT keystrokes.
+			// Pass chosen keystrokes to other plugins or default fake sel handlers.
+			// Pass all CTRL/ALT keystrokes.
+			} else if ( keyCode in keystrokesNotBlockedByWidget ||
+				( CKEDITOR.CTRL & keyCode ) ||
+				( CKEDITOR.ALT & keyCode ) ) {
 				return;
 			}
 
@@ -3638,8 +3643,7 @@
 
 	function addCustomStyleHandler() {
 		// Styles categorized by group. It is used to prevent applying styles for the same group being used together.
-		var styleGroups = {},
-			styleDefinitions = [];
+		var styleGroups = {};
 
 		/**
 		 * The class representing a widget style. It is an {@link CKEDITOR#STYLE_OBJECT object} like

tests/plugins/widget/contextmenu.js

@@ -22,6 +22,57 @@
 	var getWidgetById = widgetTestsTools.getWidgetById;
 
 	bender.test( {
+		// (#1901)
+		'test SHIFT + F10 shortcut upon widget focus': function() {
+			var editor = this.editor;
+
+			editor.widgets.add( 'testevent', {
+				editables: {
+					foo: '.foo'
+				}
+			} );
+
+			this.editorBot.setData(
+				'<p id="p1">foo</p><div data-widget="testevent" id="w1"><p class="foo">foo</p></div>',
+				function() {
+					var widget = getWidgetById( editor, 'w1' ),
+						spy = sinon.spy();
+
+					widget.on( 'contextMenu', spy );
+					widget.focus();
+
+					editor.editable().fire( 'keydown', new CKEDITOR.dom.event( { keyCode: CKEDITOR.SHIFT + 121 } ) );
+
+					assert.isTrue( spy.calledOnce );
+				}
+			);
+		},
+
+		'test CTRL + SHIFT + F10 shortcut upon widget focus': function() {
+			var editor = this.editor;
+
+			editor.widgets.add( 'testevent', {
+				editables: {
+					foo: '.foo'
+				}
+			} );
+
+			this.editorBot.setData(
+				'<p id="p1">foo</p><div data-widget="testevent" id="w1"><p class="foo">foo</p></div>',
+				function() {
+					var widget = getWidgetById( editor, 'w1' ),
+						spy = sinon.spy();
+
+					widget.on( 'contextMenu', spy );
+					widget.focus();
+
+					editor.editable().fire( 'keydown', new CKEDITOR.dom.event( { keyCode: CKEDITOR.CTRL + CKEDITOR.SHIFT + 121 } ) );
+
+					assert.isTrue( spy.calledOnce );
+				}
+			);
+		},
+
 		'test contextMenu event firing': function() {
 			var editor = this.editor;
 
@@ -127,4 +178,4 @@
 			} );
 		}
 	} );
-} )();
+} )();

tests/plugins/widget/manual/contextmenushortcuts.html

@@ -0,0 +1,15 @@
+<div id="editor">
+	<p>Foo [[Focus me!]] Bar</p>
+</div>
+<div id="downcast-php">
+	<p>Foo</p>
+	<pre>
+		<code class="language-php">Hello world!</code>
+	</pre>
+	<p>Bar</p>
+</div>
+
+<script>
+	CKEDITOR.replace( 'editor' );
+	CKEDITOR.replace( 'downcast-php' );
+</script>

tests/plugins/widget/manual/contextmenushortcuts.md

@@ -0,0 +1,45 @@
+@bender-tags: 4.11.4, bug, 1901, widget, accessibility
+@bender-ui: collapsed
+@bender-ckeditor-plugins: widget, wysiwygarea, contextmenu, placeholder, codesnippet, enterkey, undo
+
+## Keyboard shortcuts for widgets' context menu
+
+Please do each test for both **inline** (first editor) and **block** (second editor) widget.
+
+Test should be performed with browser dev tools opened.
+
+### Scenario 1: `SHIFT + F10`
+
+1. Focus widget in editor.
+1. Press `SHIFT + F10`.
+
+**Expected:** Context menu opens.
+
+### Scenario 2: `CTRL + SHIFT + F10`
+
+1. Focus widget in editor.
+1. Press `CTRL + SHIFT + F10`.
+
+**Expected:** Context menu opens.
+
+### Scenario 3: `SHIFT + LEFT`
+
+1. Focus widget in editor.
+1. Press `SHIFT + LEFT`.
+
+**Expected:** There should be no error in browser console.
+
+### Scenario 4: `SHIFT + ENTER`
+
+1. Focus widget in editor.
+1. Press `SHIFT + ENTER` twice.
+1. Click `Undo` button.
+
+**Expected:** New line should not be inserted and browser console should remain clean.
+
+### Scenario 5: `SHIFT + Tab`
+
+1. Focus widget in editor.
+1. Press `SHIFT + TAB`.
+
+**Expected:** Widget should still be focused.

tests/plugins/widget/widgetsintegration.js

@@ -57,6 +57,30 @@
 			this.editor.setReadOnly( false );
 		},
 
+		// (#1901)
+		'test modifier keystrokes upon widget focus': function() {
+			var editor = this.editor;
+
+			editor.widgets.add( 'testevent', {
+				editables: {
+					foo: '.foo'
+				}
+			} );
+
+			this.editorBot.setData( '<p id="p1">foo</p><div data-widget="testevent" id="w1"><p class="foo">foo</p></div>', function() {
+				var widget = getWidgetById( editor, 'w1' );
+
+				widget.focus();
+				assert.areNotEqual( false, widget.fire( 'key', { keyCode: CKEDITOR.SHIFT + 121 } ), 'Shift should not be canceled' ); // SHIFT + F10
+
+				widget.focus();
+				assert.areNotEqual( false, widget.fire( 'key', { keyCode: CKEDITOR.CTRL + 121 } ), 'Ctrl should not be canceled' ); // CTRL + F10
+
+				widget.focus();
+				assert.areNotEqual( false, widget.fire( 'key', { keyCode: CKEDITOR.ALT + 121 } ), 'Alt should not be canceled' ); // ALT + F10
+			} );
+		},
+
 		'test initializing widgets': function() {
 			var editor = this.editor;