Remake manual test to use floatpanel and be more user friendly.

tests/plugins/panel/manual/focusableinput.html

@@ -1,37 +1,32 @@
-<style>
-a:focus,input:focus {
-	background-color: red
-}
-
-textarea {
-	display: none;
-}
-</style>
 <textarea id="editor"></textarea>
-<div style="width:300px;height:300px;border:1px solid black;" id="testbox" ></div>
 <script>
-	var editor = CKEDITOR.replace( 'editor' );
-	editor.on( 'instanceReady', function() {
-		//It's necessary to laod plugins
-		editor.destroy();
-
-		var parent = CKEDITOR.document.getById( 'testbox' );
-		var block = new CKEDITOR.ui.panel.block( parent, { attributes: {} } );
-
-		block.element.setHtml( '<a href="#" _cke_focus="1">link1</a><input _cke_focus="1"><a href="#" _cke_focus="1">Link 2</a>' );
-
-		block.keys[ 9 ] = 'next'; // TAB
-		block.keys[ CKEDITOR.SHIFT + 9 ] = 'prev'; // SHIFT + TAB
-
-		block.show();
-
-		CKEDITOR.document.on( 'keydown', function( evt ) {
-			var keystroke = evt.data.getKeystroke();
-				if ( block.onKeyDown && block.onKeyDown( keystroke ) === false ) {
-					evt.data.preventDefault();
-					return;
+	CKEDITOR.plugins.add( 'testplugin', {
+		requires: 'panelbutton,floatpanel',
+		init: function( editor ) {
+			editor.ui.add( 'testplugin', CKEDITOR.UI_PANELBUTTON, {
+				label: 'test',
+				title: 'Test Panel',
+				modes: { wysiwyg: 1 },
+				editorFocus: 0,
+				panel: {
+					attributes: {}
+				},
+				onBlock: function( panel, block ) {
+					var keys = block.keys;
+					keys[ 39 ] = 'next';
+					keys[ 40 ] = 'next';
+					keys[ 9 ] = 'next';
+					keys[ 37 ] = 'prev';
+					keys[ 38 ] = 'prev';
+					keys[ CKEDITOR.SHIFT + 9 ] = 'prev';
+					block.element.setHtml( '<style>a:focus,input:focus { background-color: red; }</style>' +
+						'<a href="#" _cke_focus="1">link1</a><input _cke_focus="1"><a href="#" _cke_focus="1">Link 2</a>' );
 				}
-		} );
+			} );
+		}
+	} )
+	var editor = CKEDITOR.replace( 'editor', {
+		extraPlugins: 'testplugin'
 	} );
 
 </script>

tests/plugins/panel/manual/focusableinput.md

@@ -2,12 +2,12 @@
 @bender-ui: collapsed
 @bender-ckeditor-plugins: wysiwygarea, toolbar, panel
 
-1. Click into rectangle with black border
-2. Press <kbd>TAB</kbd>
-3. Check if you can focus input element with keyboard. Currently focused elements are highlighted with red background.
+1. Click into `Test Panel` button in toolabr ( button without icon )
+2. Use keyboard (arrow keys and tabs) to focus inner elements.
+3. Check if you can focus **input** element with keyboard. _Currently focused elements are highlighted with red background._
 
 ### Expected:
-* You can acess to `input` element with <kbd>TAB</kbd> key.
+* You can acess to `input` element with <kbd>TAB</kbd> or arrow keys.
 
 ### Unexpected:
-* Input element is not focusable with keyboard.
+* `Input` element is not focusable with keyboard.