Enable ESC and clicking background to close full screen dialog (#8697)

* Enable ESC and clicking background to close full screen dialog

* Update gridicons and reposition close button on dialog

* Better spacing

* Only import the one gridicon we need

* Revert unnecessary changes to gridicons

* Fix JS error due to unbound handler

* Fix event binding and restrict to ESC code

* Fix eslint error

* Removed bind calls from property assignments.

_inc/client/components/jetpack-dialogue/index.jsx

@@ -17,33 +17,53 @@ import onKeyDownCallback from 'utils/onkeydown-callback';
 import { imagePath } from 'constants/urls';
 
 class JetpackDialogue extends Component {
+	maybeDismiss = ( e ) => {
+		if ( this.props.showDismiss && ( ! e.keyCode || e.keyCode === 27 ) ) {
+			this.props.dismiss( e );
+		}
+	}
+
+	// capture the ESC key globally
+	componentDidMount() {
+		document.addEventListener( 'keydown', this.maybeDismiss.bind( this ), false );
+	}
+
+	componentWillUnmount() {
+		document.removeEventListener( 'keydown', this.maybeDismiss.bind( this ), false );
+	}
+
+	// prevent foreground clicks going through to the background
+	clickForeground( e ) {
+		e.stopPropagation();
+	}
+
 	render() {
 		const classes = classNames(
 			this.props.className,
 			'jp-dialogue'
 		);
 		return (
-			<div className="jp-dialogue-full__container">
+			<div className="jp-dialogue-full__container" role="dialog" onClick={ this.maybeDismiss } onKeyDown={ onKeyDownCallback( this.maybeDismiss ) }>
 				<img src={ imagePath + 'stars-full.svg' } width="60" height="60" alt={ __( 'Stars' ) } className="jp-jumpstart-full__svg-stars" />
 				<img src={ imagePath + 'jupiter.svg' } width="50" height="100" alt={ __( 'Jupiter' ) } className="jp-jumpstart-full__svg-jupiter" />
-				{
-					this.props.showDismiss && <Gridicon
-						icon="cross-small"
-						className="jp-dialogue-full__dismiss"
-						tabIndex="0"
-						onKeyDown={ onKeyDownCallback( this.props.dismiss ) }
-						onClick={ this.props.dismiss }
-					/>
-				}
 
-				<div className={ classes }>
+				<div className={ classes } role="dialog" onClick={ this.clickForeground } onKeyDown={ onKeyDownCallback( this.clickForeground ) }>
 					{ this.props.svg }
 
 					<h1 className="jp-dialogue__title">
 						{ this.props.title }
 					</h1>
 
 					<Card>
+						{
+							this.props.showDismiss && <Gridicon
+								icon="cross-small"
+								className="jp-dialogue-full__dismiss"
+								tabIndex="0"
+								onKeyDown={ onKeyDownCallback( this.props.dismiss ) }
+								onClick={ this.props.dismiss }
+							/>
+						}
 						{ this.props.content }
 					</Card>
 					<div>

_inc/client/components/jetpack-dialogue/style.scss

@@ -46,8 +46,8 @@
 .jp-dialogue-full__dismiss {
 	cursor: pointer;
 	position: absolute;
-	right: 0;
-	top: 0;
+	right: -10px;
+	top: -10px;
 	fill: $gray;
 	padding: rem( 16px );
 	height: rem( 24px );