make sidebar accessible

client/modules/IDE/components/Sidebar.js

@@ -11,11 +11,14 @@ function Sidebar(props) {
             'sidebar__file-item--selected': file.id === props.selectedFile.id
           });
           return (
-            <li
+            <li>
+              <button
                 className={itemClass}
                 key={file.id}
                 onClick={() => props.setSelectedFile(file.id)}
-            >{file.name}</li>
+              >{file.name}
+              </button>
+            </li>
           );
         })}
       </ul>

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;

client/styles/components/_sidebar.scss

@@ -5,8 +5,12 @@
 .sidebar__file-item {
   padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem;
   color: $light-inactive-text-color;
-}
-
-.sidebar__file-item--selected {
+  background-color: $light-sidebar-background;
+  border: none;
+  width: 100%;
+  outline: none;
+  cursor: pointer;
+  &--selected {
     background-color: $ide-border-color;
   }
+}