make links accessible

client/components/Nav.js

@@ -6,20 +6,20 @@ function Nav(props) {
     <nav className="nav">
       <ul className="nav__items-left">
         <li className="nav__item">
-          <p
+          <a
             className="nav__new"
             onClick={props.createProject}
           >
             New
-          </p>
+          </a>
         </li>
         <li className="nav__item">
-          <p
+          <a
             className="nav__save"
             onClick={props.saveProject}
           >
             Save
-          </p>
+          </a>
         </li>
         <li className="nav__item">
           <p className="nav__open">

client/modules/IDE/components/Sidebar.js

@@ -11,11 +11,13 @@ 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 className={itemClass}>
+              <a
+                key={file.id}
+                onClick={() => props.setSelectedFile(file.id)}
+              >{file.name}
+              </a>
+            </li>
           );
         })}
       </ul>

client/modules/IDE/components/Toolbar.js

@@ -34,7 +34,7 @@ function Toolbar(props) {
         <span
           className="toolbar__project-name"
           // TODO change this span into an input
-          onBlur={props.setProjectName.bind(this)} // eslint-disable-line 
+          onBlur={props.setProjectName.bind(this)} // eslint-disable-line
           contentEditable
           suppressContentEditableWarning
         >

client/styles/abstracts/_variables.scss

@@ -18,7 +18,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;
 

client/styles/components/_sidebar.scss

@@ -1,12 +1,12 @@
 .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;
+  cursor: pointer;
+  &--selected {
+    background-color: $ide-border-color;
+  }
 }
-
-.sidebar__file-item--selected {
-  background-color: $ide-border-color;
-}

client/styles/components/_signup.scss

@@ -6,14 +6,14 @@
 	justify-content: center;
 }
 
-.signup-form__username-label, 
+.signup-form__username-label,
 .signup-form__email-label,
 .signup-form__password-label,
 .signup-form__confirm-password-label {
 	display: none;
 }
 
-.signup-form__username-input, 
+.signup-form__username-input,
 .signup-form__email-input,
 .signup-form__password-input,
 .signup-form__confirm-password-input {
@@ -22,4 +22,4 @@
 
 .signup-form__field {
 	margin: #{20 / $base-font-size}rem 0;
-}
+}