change list to buttons - accessibility

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>

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

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;