Merge pull request #10 from MathuraMG/accessibility

Changes to make the links screen reader compatible

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

@@ -14,8 +14,11 @@ function Sidebar(props) {
             <li
               className={itemClass}
               key={file.id}
-              onClick={() => props.setSelectedFile(file.id)}
-            >{file.name}</li>
+            >
+              <a
+                onClick={() => props.setSelectedFile(file.id)}
+              >{file.name}</a>
+            </li>
           );
         })}
       </ul>

client/modules/Sketch/pages/SketchListView.js

@@ -20,16 +20,16 @@ class SketchListView extends React.Component {
           createProject={this.props.createProject}
           saveProject={this.props.saveProject}
         />
-        <table className="sketches-table">
+        <table className="sketches-table" summary="table containing all saved projects">
           <thead>
-            <th>Name</th>
-            <th>Created</th>
-            <th>Last Updated</th>
+            <th scope="col">Name</th>
+            <th scope="col">Created</th>
+            <th scope="col">Last Updated</th>
           </thead>
           <tbody>
             {this.props.sketches.map(sketch =>
               <tr className="sketches-table__row">
-                <td><Link to={`/projects/${sketch._id}`}>{sketch.name}</Link></td>
+                <td scope="row"><Link to={`/projects/${sketch._id}`}>{sketch.name}</Link></td>
                 <td>{moment(sketch.createdAt).format('MMM D, YYYY')}</td>
                 <td>{moment(sketch.updatedAt).format('MMM D, YYYY')}</td>
               </tr>

client/styles/components/_sidebar.scss

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