From b8250966408ac114774c0e7fb75a2cc3c4ab3350 Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Thu, 25 Aug 2016 17:46:30 -0400
Subject: [PATCH 1/4] make preferences radio buttons

---
 client/modules/IDE/components/Preferences.js | 74 +++++++++++++++-----
 client/styles/components/_preferences.scss   |  4 ++
 2 files changed, 60 insertions(+), 18 deletions(-)

diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js
index a705a098..276bd686 100644
--- a/client/modules/IDE/components/Preferences.js
+++ b/client/modules/IDE/components/Preferences.js
@@ -150,47 +150,85 @@ class Preferences extends React.Component {
         <div className="preference">
           <h4 className="preference__title">Autosave</h4>
           <div className="preference__options">
-            <button
-              className={autosaveOnClass}
+            <input
+              type="radio"
               onClick={() => this.props.setAutosave(true)}
               aria-label="autosave on"
-            >On</button>
-            <button
-              className={autosaveOffClass}
+              name="autosave"
+              id="autosave-on"
+              className="preference__radio-button"
+              value="On"
+              checked={this.props.autosave}
+            />
+            <label htmlFor="autosave-on" className={autosaveOnClass}>On</label>
+            <input
+              type="radio"
               onClick={() => this.props.setAutosave(false)}
               aria-label="autosave off"
-            >Off</button>
+              name="autosave"
+              id="autosave-off"
+              className="preference__radio-button"
+              value="Off"
+              checked={!this.props.autosave}
+            />
+            <label htmlFor="autosave-off" className={autosaveOffClass}>Off</label>
           </div>
         </div>
         <div className="preference">
           <h4 className="preference__title">Lint Warning Sound</h4>
           <div className="preference__options">
-            <button
-              className={lintWarningOnClass}
+            <input
+              type="radio"
               onClick={() => this.props.setLintWarning(true)}
               aria-label="lint warning on"
-            >On</button>
-            <button
-              className={lintWarningOffClass}
+              name="lint warning"
+              id="lint-warning-on"
+              className="preference__radio-button"
+              value="On"
+              checked={this.props.lintWarning}
+            />
+            <label htmlFor="lint-warning-on" className={lintWarningOnClass}>On</label>
+            <input
+              type="radio"
               onClick={() => this.props.setLintWarning(false)}
               aria-label="lint warning off"
-            >Off</button>
+              name="lint warning"
+              id="lint-warning-off"
+              className="preference__radio-button"
+              value="Off"
+              checked={!this.props.lintWarning}
+            />
+            <label htmlFor="lint-warning-off" className={lintWarningOffClass}>Off</label>
           </div>
         </div>
         <div className="preference">
           <h4 className="preference__title">Accessible Text-based Canvas</h4>
           <h6 className="preference__subtitle">Used with screen reader</h6>
+
           <div className="preference__options">
-            <button
-              className={textOutputOnClass}
+            <input
+              type="radio"
               onClick={() => this.props.setTextOutput(true)}
               aria-label="text output on"
-            >On</button>
-            <button
-              className={textOutputOffClass}
+              name="text output"
+              id="text-output-on"
+              className="preference__radio-button"
+              value="On"
+              checked={this.props.textOutput}
+            />
+            <label htmlFor="text-output-on" className={textOutputOnClass}>On</label>
+            <input
+              type="radio"
               onClick={() => this.props.setTextOutput(false)}
               aria-label="text output off"
-            >Off</button>
+              name="text output"
+              id="text-output-off"
+              className="preference__radio-button"
+              value="Off"
+              checked={!this.props.textOutput}
+            />
+            <label htmlFor="text-output-off" className={textOutputOffClass}>Off</label>
+
           </div>
         </div>
       </section>
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 06ca4b70..92892f3b 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -81,6 +81,10 @@
 	padding-left: #{28 / $base-font-size}rem;
 }
 
+.preference__radio-button {
+	@extend %hidden-element;
+}
+
 .preference__option {
 	@extend %preference-option;
 	list-style-type: none;

From 1803067aeb5a1b2c31c00e91b9a165be835aa9a9 Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Thu, 25 Aug 2016 17:59:02 -0400
Subject: [PATCH 2/4] change labels

---
 client/modules/IDE/components/Toolbar.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/modules/IDE/components/Toolbar.js b/client/modules/IDE/components/Toolbar.js
index 79226d70..74e78b6a 100644
--- a/client/modules/IDE/components/Toolbar.js
+++ b/client/modules/IDE/components/Toolbar.js
@@ -51,15 +51,15 @@ class Toolbar extends React.Component {
     return (
       <div className="toolbar">
         <img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
-        <button className={playButtonClass} onClick={this.props.startSketch} aria-label="play sketch">
-          <InlineSVG src={playUrl} alt="Play Sketch" />
-        </button>
         <button
           className="toolbar__play-sketch-button"
           onClick={() => { this.props.startTextOutput(); this.props.startSketch(); }}
-          aria-label="play sketch with output text"
+          aria-label="play sketch"
         >
-          <InlineSVG src={playUrl} alt="Play Sketch with output text" />
+          <InlineSVG src={playUrl} alt="Play Sketch" />
+        </button>
+        <button className={playButtonClass} onClick={this.props.startSketch} aria-label="play only visual sketch">
+          <InlineSVG src={playUrl} alt="Play only visual Sketch" />
         </button>
         <button
           className={stopButtonClass}
@@ -102,9 +102,9 @@ class Toolbar extends React.Component {
         <button
           className={preferencesButtonClass}
           onClick={this.props.openPreferences}
-          aria-label="open preferences"
+          aria-label="preferences"
         >
-          <InlineSVG src={preferencesUrl} alt="Show Preferences" />
+          <InlineSVG src={preferencesUrl} alt="Preferences" />
         </button>
       </div>
     );

From fe803d52d0f1c23979cb56f504cbf676216d9928 Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Mon, 29 Aug 2016 14:39:23 -0400
Subject: [PATCH 3/4] remove preference__option--selected

---
 client/modules/IDE/components/Preferences.js | 69 ++++++++------------
 client/styles/abstracts/_placeholders.scss   |  3 -
 client/styles/components/_preferences.scss   |  8 ++-
 3 files changed, 34 insertions(+), 46 deletions(-)

diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js
index 276bd686..da8c6251 100644
--- a/client/modules/IDE/components/Preferences.js
+++ b/client/modules/IDE/components/Preferences.js
@@ -38,38 +38,7 @@ class Preferences extends React.Component {
       preferences: true,
       'preferences--selected': this.props.isVisible
     });
-    let preferencesTabOptionClass = classNames({
-      preference__option: true,
-      'preference__option--selected': this.props.isTabIndent
-    });
-    let preferencesSpaceOptionClass = classNames({
-      preference__option: true,
-      'preference__option--selected': !this.props.isTabIndent
-    });
-    let autosaveOnClass = classNames({
-      preference__option: true,
-      'preference__option--selected': this.props.autosave
-    });
-    let autosaveOffClass = classNames({
-      preference__option: true,
-      'preference__option--selected': !this.props.autosave
-    });
-    let lintWarningOnClass = classNames({
-      preference__option: true,
-      'preference__option--selected': this.props.lintWarning
-    });
-    let lintWarningOffClass = classNames({
-      preference__option: true,
-      'preference__option--selected': !this.props.lintWarning
-    });
-    let textOutputOnClass = classNames({
-      preference__option: true,
-      'preference__option--selected': this.props.textOutput
-    });
-    let textOutputOffClass = classNames({
-      preference__option: true,
-      'preference__option--selected': !this.props.textOutput
-    });
+
     return (
       <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
         <div className="preferences__heading">
@@ -143,8 +112,28 @@ class Preferences extends React.Component {
             <h6 className="preference__label">Increase</h6>
           </button>
           <div className="preference__vertical-list">
-            <button className={preferencesSpaceOptionClass} onClick={this.props.indentWithSpace} aria-label="indentation with space">Spaces</button>
-            <button className={preferencesTabOptionClass} onClick={this.props.indentWithTab} aria-label="indentation with tab">Tabs</button>
+            <input
+              type="radio"
+              onClick={this.props.indentWithSpace}
+              aria-label="indentation with space"
+              name="indentation"
+              id="indentation-space"
+              className="preference__radio-button"
+              value="Spaces"
+              checked={!this.props.isTabIndent}
+            />
+            <label htmlFor="indentation-space" className="preference__option">Spaces</label>
+            <input
+              type="radio"
+              onClick={this.props.indentWithTab}
+              aria-label="indentation with tab"
+              name="indentation"
+              id="indentation-tab"
+              className="preference__radio-button"
+              value="Tabs"
+              checked={this.props.isTabIndent}
+            />
+            <label htmlFor="indentation-tab" className="preference__option">Tabs</label>
           </div>
         </div>
         <div className="preference">
@@ -160,7 +149,7 @@ class Preferences extends React.Component {
               value="On"
               checked={this.props.autosave}
             />
-            <label htmlFor="autosave-on" className={autosaveOnClass}>On</label>
+            <label htmlFor="autosave-on" className="preference__option">On</label>
             <input
               type="radio"
               onClick={() => this.props.setAutosave(false)}
@@ -171,7 +160,7 @@ class Preferences extends React.Component {
               value="Off"
               checked={!this.props.autosave}
             />
-            <label htmlFor="autosave-off" className={autosaveOffClass}>Off</label>
+            <label htmlFor="autosave-off" className="preference__option">Off</label>
           </div>
         </div>
         <div className="preference">
@@ -187,7 +176,7 @@ class Preferences extends React.Component {
               value="On"
               checked={this.props.lintWarning}
             />
-            <label htmlFor="lint-warning-on" className={lintWarningOnClass}>On</label>
+            <label htmlFor="lint-warning-on" className="preference__option">On</label>
             <input
               type="radio"
               onClick={() => this.props.setLintWarning(false)}
@@ -198,7 +187,7 @@ class Preferences extends React.Component {
               value="Off"
               checked={!this.props.lintWarning}
             />
-            <label htmlFor="lint-warning-off" className={lintWarningOffClass}>Off</label>
+            <label htmlFor="lint-warning-off" className="preference__option">Off</label>
           </div>
         </div>
         <div className="preference">
@@ -216,7 +205,7 @@ class Preferences extends React.Component {
               value="On"
               checked={this.props.textOutput}
             />
-            <label htmlFor="text-output-on" className={textOutputOnClass}>On</label>
+            <label htmlFor="text-output-on" className="preference__option">On</label>
             <input
               type="radio"
               onClick={() => this.props.setTextOutput(false)}
@@ -227,7 +216,7 @@ class Preferences extends React.Component {
               value="Off"
               checked={!this.props.textOutput}
             />
-            <label htmlFor="text-output-off" className={textOutputOffClass}>Off</label>
+            <label htmlFor="text-output-off" className="preference__option">Off</label>
 
           </div>
         </div>
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index aa8c9f39..dadf6267 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -104,9 +104,6 @@
 	&:hover {
 		color: $light-primary-text-color;
 	}
-	&--selected {
-    color: $light-primary-text-color;
-  }
 }
 
 %modal {
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 92892f3b..d33c355c 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -89,9 +89,7 @@
 	@extend %preference-option;
 	list-style-type: none;
 	padding: 0;
-	&--selected {
-		@extend %preference-option--selected;
-	}
+	color: $light-inactive-text-color;
 }
 
 .preference__options {
@@ -100,6 +98,10 @@
 	width: #{70 / $base-font-size}rem;
 }
 
+.preference__radio-button:checked + .preference__option {
+    color: $light-primary-text-color;
+}
+
 .preference--hidden {
 	@extend %hidden-element;
 }

From fbc6f1c97af673c3563e015c80a6555f4456bd41 Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Mon, 29 Aug 2016 16:36:35 -0400
Subject: [PATCH 4/4] switch to onChange

---
 client/modules/IDE/components/Preferences.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js
index da8c6251..0cf77843 100644
--- a/client/modules/IDE/components/Preferences.js
+++ b/client/modules/IDE/components/Preferences.js
@@ -114,7 +114,7 @@ class Preferences extends React.Component {
           <div className="preference__vertical-list">
             <input
               type="radio"
-              onClick={this.props.indentWithSpace}
+              onChange={this.props.indentWithSpace}
               aria-label="indentation with space"
               name="indentation"
               id="indentation-space"
@@ -125,7 +125,7 @@ class Preferences extends React.Component {
             <label htmlFor="indentation-space" className="preference__option">Spaces</label>
             <input
               type="radio"
-              onClick={this.props.indentWithTab}
+              onChange={this.props.indentWithTab}
               aria-label="indentation with tab"
               name="indentation"
               id="indentation-tab"
@@ -141,7 +141,7 @@ class Preferences extends React.Component {
           <div className="preference__options">
             <input
               type="radio"
-              onClick={() => this.props.setAutosave(true)}
+              onChange={() => this.props.setAutosave(true)}
               aria-label="autosave on"
               name="autosave"
               id="autosave-on"
@@ -152,7 +152,7 @@ class Preferences extends React.Component {
             <label htmlFor="autosave-on" className="preference__option">On</label>
             <input
               type="radio"
-              onClick={() => this.props.setAutosave(false)}
+              onChange={() => this.props.setAutosave(false)}
               aria-label="autosave off"
               name="autosave"
               id="autosave-off"
@@ -168,7 +168,7 @@ class Preferences extends React.Component {
           <div className="preference__options">
             <input
               type="radio"
-              onClick={() => this.props.setLintWarning(true)}
+              onChange={() => this.props.setLintWarning(true)}
               aria-label="lint warning on"
               name="lint warning"
               id="lint-warning-on"
@@ -179,7 +179,7 @@ class Preferences extends React.Component {
             <label htmlFor="lint-warning-on" className="preference__option">On</label>
             <input
               type="radio"
-              onClick={() => this.props.setLintWarning(false)}
+              onChange={() => this.props.setLintWarning(false)}
               aria-label="lint warning off"
               name="lint warning"
               id="lint-warning-off"
@@ -197,7 +197,7 @@ class Preferences extends React.Component {
           <div className="preference__options">
             <input
               type="radio"
-              onClick={() => this.props.setTextOutput(true)}
+              onChange={() => this.props.setTextOutput(true)}
               aria-label="text output on"
               name="text output"
               id="text-output-on"
@@ -208,7 +208,7 @@ class Preferences extends React.Component {
             <label htmlFor="text-output-on" className="preference__option">On</label>
             <input
               type="radio"
-              onClick={() => this.props.setTextOutput(false)}
+              onChange={() => this.props.setTextOutput(false)}
               aria-label="text output off"
               name="text output"
               id="text-output-off"