Add close event as possible alternative to handling closing in the Viewer.

Controller/CheckingMode.js

@@ -66,12 +66,15 @@ define( function() {
 	 * @member CKEDITOR.plugins.a11ychecker.CheckingMode
 	 */
 	CheckingMode.prototype.close = function() {
-		var controller = this.controller;
+		var controller = this.controller,
+			viewerPanel = controller.viewerController && controller.viewerController.viewer.panel;
 		// Remove all the DOM changes applied by the EditableDecorator.
 		controller.editableDecorator.removeMarkup();
 
-		if ( controller.viewerController ) {
-			controller.viewerController.viewer.panel.hide();
+		// Blur and hide the viewer panel if present.
+		if ( viewerPanel ) {
+			viewerPanel.blur();
+			viewerPanel.hide();
 		}
 
 		if ( controller.issues ) {

tests/manual/spaceclose.html

@@ -0,0 +1,23 @@
+<style>
+	/* Style the body this way due to a known issue with Balloon Panel in Bender */
+	body {
+		margin-left: 0px;
+		padding-left: 320px;
+	}
+</style>
+<textarea id="editor1" cols="10" rows="10">
+			&lt;p&gt;&lt;img src=&quot;img/NewYorkCity.jpg&quot; class=&quot;right&quot; title=&quot;New York City&quot;&gt;
+</textarea>
+
+<div contenteditable="true" id="editor2">
+	<img src="img/NewYorkCity.jpg" class="right" title="New York City">
+</div>
+
+<script>
+	CKEDITOR.replace( 'editor1', {
+		height: 500,
+		width: 900
+	} );
+
+	CKEDITOR.inline( 'editor2' );
+</script>

tests/manual/spaceclose.md

@@ -0,0 +1,10 @@
+@bender-include: %TEST_DIR%../_assets/jquery.min.js
+@bender-ui: collapsed
+@bender-ckeditor-plugins: a11ychecker,toolbar,wysiwygarea,undo,image,floatingspace
+
+1. Open Accesibility Checker.
+2. Focus the close button ("X") by pressing `Shift+Tab` twice.
+3. Press space.
+	* Accesibility Checker should close entirely and the editor should gain focus.
+
+Repeat for Esc or Enter key instead of space and also on the inline editor.

ui/Viewer.js

@@ -82,24 +82,24 @@ define( [
 			that.editor.focusManager.remove( elem );
 		};
 
+		function hide( evt ) {
+			that.fire( 'close' );
+
+			if ( evt && evt.data ) {
+				evt.data.preventDefault();
+			}
+		}
+
 		// Hide the panel once the closing X is clicked.
 		this.panel.addShowListener( function() {
-			return this.parts.close.on( 'click', function( evt ) {
-				this.blur();
-				this.hide();
-				evt.data.preventDefault();
-			}, this );
+			return this.parts.close.on( 'click', hide );
 		} );
 
 		this.panel.addShowListener( function() {
-			return this.parts.panel.on( 'keydown', function( evt ) {
-				var keystroke = evt.data.getKeystroke();
-
-				// Hide the panel on ESC key press.
-				if ( keystroke == 27 ) {
-					this.blur();
-					this.hide();
-					evt.data.preventDefault();
+			return this.parts.close.on( 'keydown', function( evt ) {
+				// Hide the panel on space key press in close button.
+				if ( evt.data.getKeystroke() == 32 ) {
+					hide( evt );
 				}
 			}, this );
 		} );
@@ -362,6 +362,13 @@ define( [
 		}
 	};
 
+	/**
+	 * Fires when there's a request to close the viever originating from any of the UI elements.
+	 *
+	 * @event close
+	 */
+
+	CKEDITOR.event.implementOn( Viewer.prototype );
 
 	return Viewer;
-} );
+} );

ui/ViewerController.js

@@ -56,10 +56,11 @@ define( [ 'ui/Viewer' ], function( Viewer ) {
 			this.update( a11ychecker.issues.getFocused() );
 		}, this );
 
+
 		// When balloon is closed, a11ychecker should be forced to close with it.
 		// We can't listen to balloon hide event, because it's raised when the dialog
 		// is closed during issue switch.
-		viewer.panel.parts.close.on( 'click', function( evt ) {
+		viewer.on( 'close', function() {
 			this.a11ychecker.close();
 		}, this );
 
@@ -272,4 +273,4 @@ define( [ 'ui/Viewer' ], function( Viewer ) {
 	 *
 	 * @event prev
 	 */
-} );
+} );