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 1/4] 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
+}

From 78b77e069bbfb0db904cb361af5e4752b4a4eacf Mon Sep 17 00:00:00 2001
From: mathuramg <mmg9291@gmail.com>
Date: Thu, 9 Jun 2016 18:17:53 -0400
Subject: [PATCH 2/4] set outline: none for buttons

---
 styles/abstracts/_placeholders.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/styles/abstracts/_placeholders.scss b/styles/abstracts/_placeholders.scss
index b24ad210..0b264297 100644
--- a/styles/abstracts/_placeholders.scss
+++ b/styles/abstracts/_placeholders.scss
@@ -9,6 +9,7 @@
 	line-height: #{50 / $base-font-size}rem;
 	cursor: pointer;
 	border: none;
+	outline: none;
 
 	& g {
 		fill: $light-toolbar-button-color;

From e1b58712902988bab7d7ca5aaa649baa03db0d7d Mon Sep 17 00:00:00 2001
From: mathuramg <mmg9291@gmail.com>
Date: Thu, 9 Jun 2016 19:30:59 -0400
Subject: [PATCH 3/4] buttons utilise BEM style

---
 shared/components/Toolbar/Toolbar.jsx | 4 ++--
 styles/components/_toolbar.scss       | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/shared/components/Toolbar/Toolbar.jsx b/shared/components/Toolbar/Toolbar.jsx
index 5b68754d..74da47e5 100644
--- a/shared/components/Toolbar/Toolbar.jsx
+++ b/shared/components/Toolbar/Toolbar.jsx
@@ -10,11 +10,11 @@ class Toolbar extends React.Component {
 	render() {
 		let playButtonClass = classNames({
 			"toolbar__play-button": true,
-			"playing": this.props.isPlaying
+			"toolbar__play-button--selected": this.props.isPlaying
 		});
 		let stopButtonClass = classNames({
 			"toolbar__stop-button": true,
-			"stopped": !this.props.isPlaying
+			"toolbar__stop-button--selected": !this.props.isPlaying
 		});
 
 		return (
diff --git a/styles/components/_toolbar.scss b/styles/components/_toolbar.scss
index d5bafa53..f8001d86 100644
--- a/styles/components/_toolbar.scss
+++ b/styles/components/_toolbar.scss
@@ -1,7 +1,7 @@
 .toolbar__play-button {
 	@extend %toolbar-button;
 	margin-right: #{15 / $base-font-size}rem;
-	&.playing {
+	&--selected {
 		background-color: $light-button-background-hover-color;
 		& g {
 			fill: $light-button-hover-color;
@@ -11,7 +11,7 @@
 
 .toolbar__stop-button {
 	@extend %toolbar-button;
-	&.stopped {
+	&--selected {
 		background-color: $light-button-background-hover-color;
 		& g {
 			fill: $light-button-hover-color;

From 7fd8471e780da4f7b057b836b6f88396f17c8ddb Mon Sep 17 00:00:00 2001
From: mathuramg <mmg9291@gmail.com>
Date: Fri, 10 Jun 2016 15:14:55 -0400
Subject: [PATCH 4/4] change sass to use BEM

---
 styles/abstracts/_placeholders.scss |  6 ++++++
 styles/components/_toolbar.scss     | 10 ++--------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/styles/abstracts/_placeholders.scss b/styles/abstracts/_placeholders.scss
index 0b264297..bf21414f 100644
--- a/styles/abstracts/_placeholders.scss
+++ b/styles/abstracts/_placeholders.scss
@@ -23,4 +23,10 @@
 			fill: $light-button-hover-color;
 		}
 	}
+	&--selected {
+    background-color: $light-button-background-hover-color;
+    & g {
+        fill: $light-button-hover-color;
+    }
+  }
 }
diff --git a/styles/components/_toolbar.scss b/styles/components/_toolbar.scss
index f8001d86..043667dc 100644
--- a/styles/components/_toolbar.scss
+++ b/styles/components/_toolbar.scss
@@ -2,20 +2,14 @@
 	@extend %toolbar-button;
 	margin-right: #{15 / $base-font-size}rem;
 	&--selected {
-		background-color: $light-button-background-hover-color;
-		& g {
-			fill: $light-button-hover-color;
-		}
+		@extend %toolbar-button--selected;
 	}
 }
 
 .toolbar__stop-button {
 	@extend %toolbar-button;
 	&--selected {
-		background-color: $light-button-background-hover-color;
-		& g {
-			fill: $light-button-hover-color;
-		}
+		@extend %toolbar-button--selected;
 	}
 }