make toolbar accessible

Author: MathuraMG

shared/components/Preview/PreviewFrame.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 class PreviewFrame extends React.Component {
-	
+
 	componentDidMount() {
 		if (this.props.isPlaying) {
 			this.renderFrameContents();
@@ -57,8 +57,8 @@ 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>;
   }
 }
 
-export default PreviewFrame;
+export default PreviewFrame;

shared/components/Toolbar/Toolbar.jsx

@@ -12,21 +12,23 @@ 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>
-				{ this.props.isPlaying ? 
-					<div className="toolbar__stop-button" onClick={this.props.stopSketch}>
-						<Isvg src={stopUrl} alt="Stop Sketch" />
-					</div> 
-				: null }
+				</button>
+				<button className={stopButtonClass} onClick={this.props.stopSketch}>
+					<Isvg src={stopUrl} alt="Stop Sketch" />
+				</button>
 			</div>
 		);
 	}
 }
 
-export default Toolbar;
+export default Toolbar;

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;
@@ -22,4 +22,4 @@
 			fill: $light-button-hover-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 {
@@ -20,4 +26,4 @@
 .toolbar {
 	padding: #{20 / $base-font-size}rem #{60 / $base-font-size}rem;
 	display: flex;
-}
+}