From 42d59d3fb33acdfc043fec4bb3bb9d96513b3a02 Mon Sep 17 00:00:00 2001
From: mathuramg <mmg9291@gmail.com>
Date: Mon, 11 Jul 2016 08:44:27 -0400
Subject: [PATCH] change list to buttons - accessibility

---
 client/modules/IDE/components/Preferences.js | 8 ++++----
 client/styles/abstracts/_placeholders.scss   | 2 ++
 client/styles/components/_preferences.scss   | 5 +++++
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js
index e0fd2d2b..5259df6c 100644
--- a/client/modules/IDE/components/Preferences.js
+++ b/client/modules/IDE/components/Preferences.js
@@ -55,10 +55,10 @@ function Preferences(props) {
           <Isvg src={plusUrl} alt="IncreaseIndentation Amount" />
           <h6 className="preference__label">Increase</h6>
         </button>
-        <ul>
-          <li className={preferencesSpaceOptionClass} onClick={props.indentWithSpace}>Spaces</li>
-          <li className={preferencesTabOptionClass} onClick={props.indentWithTab}>Tabs</li>
-        </ul>
+        <div className="preference__vertical-list">
+          <button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace}>Spaces</button>
+          <button className={preferencesTabOptionClass} onClick={props.indentWithTab}>Tabs</button>
+        </div>
       </div>
 
     </div>
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index c622a0db..3355d095 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -91,11 +91,13 @@
 }
 
 %preference-option {
+	background-color: $light-button-background-color;
 	color: $light-secondary-text-color;
 	font-size: #{14 / $base-font-size}rem;
 	cursor: pointer;
 	text-align: left;
 	margin-bottom: #{5 / $base-font-size}rem;
+	border: 0px;
 	&:hover {
 		color: $light-primary-text-color;
 	}
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 1e9c84ae..1d0620ea 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -62,6 +62,11 @@
 	}
 }
 
+.preference__vertical-list {
+	display: flex;
+	flex-direction: column;
+}
+
 .preference__option {
 	@extend %preference-option;
 	list-style-type: none;