Merge pull request #2 from MathuraMG/toolbar

Make toolbar accessible

Author: catarak

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

@@ -10,23 +10,25 @@ 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,
+			"toolbar__stop-button--selected": !this.props.isPlaying
 		});
 
 		return (
 			<div className="toolbar">
 				<img className="toolbar__logo" src={logoUrl} alt="p5js Logo"/>
-				<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,10 @@
 	width: #{44 / $base-font-size}rem;
 	text-align: center;
 	border-radius: 100%;
-
 	line-height: #{50 / $base-font-size}rem;
 	cursor: pointer;
+	border: none;
+	outline: none;
 
 	& g {
 		fill: $light-toolbar-button-color;
@@ -22,4 +23,10 @@
 			fill: $light-button-hover-color;
 		}
 	}
-}
+	&--selected {
+    background-color: $light-button-background-hover-color;
+    & g {
+        fill: $light-button-hover-color;
+    }
+  }
+}

styles/components/_toolbar.scss

@@ -1,16 +1,16 @@
 .toolbar__play-button {
 	@extend %toolbar-button;
 	margin-right: #{15 / $base-font-size}rem;
-	&.playing {
-		background-color: $light-button-background-hover-color;
-		& g {
-			fill: $light-button-hover-color;
-		}
+	&--selected {
+		@extend %toolbar-button--selected;
 	}
 }
 
 .toolbar__stop-button {
 	@extend %toolbar-button;
+	&--selected {
+		@extend %toolbar-button--selected;
+	}
 }
 
 .toolbar__logo {
@@ -20,4 +20,4 @@
 .toolbar {
 	padding: #{20 / $base-font-size}rem #{60 / $base-font-size}rem;
 	display: flex;
-}
+}