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] 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;