From 22ac7214bdd7b85d12f369175f9f349ab43c2f17 Mon Sep 17 00:00:00 2001
From: mathuramg <mmg9291@gmail.com>
Date: Tue, 12 Jul 2016 11:22:27 -0400
Subject: [PATCH] make sidebar accessible

---
 client/modules/IDE/components/Sidebar.js | 13 ++++++++-----
 client/styles/abstracts/_variables.scss  |  3 ++-
 client/styles/components/_sidebar.scss   | 14 +++++++++-----
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js
index cd75d0a7..3f82a2cc 100644
--- a/client/modules/IDE/components/Sidebar.js
+++ b/client/modules/IDE/components/Sidebar.js
@@ -11,11 +11,14 @@ function Sidebar(props) {
             'sidebar__file-item--selected': file.id === props.selectedFile.id
           });
           return (
-            <li
-              className={itemClass}
-              key={file.id}
-              onClick={() => props.setSelectedFile(file.id)}
-            >{file.name}</li>
+            <li>
+              <button
+                className={itemClass}
+                key={file.id}
+                onClick={() => props.setSelectedFile(file.id)}
+              >{file.name}
+              </button>
+            </li>
           );
         })}
       </ul>
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index e07d9e55..0a70ada0 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -9,6 +9,7 @@ $light-primary-text-color: #333;
 $light-secondary-text-color: #6b6b6b;
 $light-inactive-text-color: #b5b5b5;
 $light-background-color: #fdfdfd;
+$light-sidebar-background: $white;
 
 $light-button-background-color: #f4f4f4;
 $light-button-color: $black;
@@ -18,7 +19,7 @@ $light-button-background-hover-color: $p5js-pink;
 $light-button-background-active-color: #f10046;
 $light-button-hover-color: $white;
 $light-button-active-color: $white;
-$light-modal-button-background-color: #e6e6e6; 
+$light-modal-button-background-color: #e6e6e6;
 $light-icon-color: #8b8b8b;
 $light-icon-hover-color: $light-primary-text-color;
 
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index f7fb4ff8..02513754 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -1,12 +1,16 @@
 .sidebar__file-list {
-  border-top: 1px solid $ide-border-color; 
+  border-top: 1px solid $ide-border-color;
 }
 
 .sidebar__file-item {
   padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem;
   color: $light-inactive-text-color;
+  background-color: $light-sidebar-background;
+  border: none;
+  width: 100%;
+  outline: none;
+  cursor: pointer;
+  &--selected {
+    background-color: $ide-border-color;
+  }
 }
-
-.sidebar__file-item--selected {
-  background-color: $ide-border-color;
-}
\ No newline at end of file