make toolbar accessible

shared/components/Preview/PreviewFrame.jsx

@@ -57,7 +57,7 @@ class PreviewFrame extends React.Component {
 	}
 
 	render() {
-    return <iframe className="preview-frame" frameBorder="0" sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"></iframe>;
+    return <iframe className="preview-frame" frameBorder="0" sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms" title="sketch output"></iframe>;
   }
 }
 

shared/components/Toolbar/Toolbar.jsx

@@ -12,18 +12,20 @@ class Toolbar extends React.Component {
 			"toolbar__play-button": true,
 			"playing": this.props.isPlaying
 		});
+		let stopButtonClass = classNames({
+			"toolbar__stop-button": true,
+			"stopped": !this.props.isPlaying
+		});
 
 		return (
 			<div className="toolbar">
 				<img className="toolbar__logo" src={logoUrl}/>
-				<div className={playButtonClass} onClick={this.props.startSketch}>
+				<button className={playButtonClass} onClick={this.props.startSketch}>
 					<Isvg src={playUrl} alt="Play Sketch" />
-				</div>
+				</button>
-				{ this.props.isPlaying ? 
+				<button className={stopButtonClass} onClick={this.props.stopSketch}>
-					<div className="toolbar__stop-button" onClick={this.props.stopSketch}>
+					<Isvg src={stopUrl} alt="Stop Sketch" />
-						<Isvg src={stopUrl} alt="Stop Sketch" />
+				</button>
-					</div> 
-				: null }
 			</div>
 		);
 	}

styles/abstracts/_placeholders.scss

@@ -6,9 +6,9 @@
 	width: #{44 / $base-font-size}rem;
 	text-align: center;
 	border-radius: 100%;
-
 	line-height: #{50 / $base-font-size}rem;
 	cursor: pointer;
+	border: none;
 
 	& g {
 		fill: $light-toolbar-button-color;

styles/components/_toolbar.scss

@@ -11,6 +11,12 @@
 
 .toolbar__stop-button {
 	@extend %toolbar-button;
+	&.stopped {
+		background-color: $light-button-background-hover-color;
+		& g {
+			fill: $light-button-hover-color;
+		}
+	}
 }
 
 .toolbar__logo {