From 4dac30d4ca99707e3cbe2638cf5d0d8cfa0c4029 Mon Sep 17 00:00:00 2001
From: mathuramg <mmg9291@gmail.com>
Date: Wed, 8 Jun 2016 16:35:59 -0400
Subject: [PATCH] make toolbar accessible

---
 shared/components/Preview/PreviewFrame.jsx |  6 +++---
 shared/components/Toolbar/Toolbar.jsx      | 18 ++++++++++--------
 styles/abstracts/_placeholders.scss        |  4 ++--
 styles/components/_toolbar.scss            |  8 +++++++-
 4 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/shared/components/Preview/PreviewFrame.jsx b/shared/components/Preview/PreviewFrame.jsx
index b0d2b21a..d29423d1 100644
--- a/shared/components/Preview/PreviewFrame.jsx
+++ b/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;
\ No newline at end of file
+export default PreviewFrame;
diff --git a/shared/components/Toolbar/Toolbar.jsx b/shared/components/Toolbar/Toolbar.jsx
index 6c6ca618..5b68754d 100644
--- a/shared/components/Toolbar/Toolbar.jsx
+++ b/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;
\ No newline at end of file
+export default Toolbar;
diff --git a/styles/abstracts/_placeholders.scss b/styles/abstracts/_placeholders.scss
index 13750426..b24ad210 100644
--- a/styles/abstracts/_placeholders.scss
+++ b/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;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/styles/components/_toolbar.scss b/styles/components/_toolbar.scss
index f2f1775e..d5bafa53 100644
--- a/styles/components/_toolbar.scss
+++ b/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;
-}
\ No newline at end of file
+}