Merge pull request #10 from MathuraMG/accessibility

Changes to make the links screen reader compatible

Author: catarak

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/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/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

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