added some accessibility

andrewdavidfrankiejasmine · Jun 10, 2019 · d9f3929 · d9f3929
1 parent 2041a6c
commit d9f3929
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/components/Nav.js b/src/components/Nav.js
@@ -6,14 +6,14 @@ function Nav() {
     <header>
         <nav className="nav">
           <div className="wrapper">
-            <NavLink to="/" className="navLink"><h1>College Navigator</h1></NavLink>
+            <NavLink to="/" className="navLink" tabIndex='1'><h1>College Navigator</h1></NavLink>
             <ul className="navList">
-              <li className="navItem"><NavLink to="/" className="navLink">Search</NavLink></li>
-              <li className="navItem"><NavLink to="/notes" className="navLink">Bookmarks</NavLink></li>
+            <li className="navItem"><NavLink to="/" className="navLink" tabIndex='2'>Search</NavLink></li>
+            <li className="navItem"><NavLink to="/notes" className="navLink" tabIndex='3'>Bookmarks</NavLink></li>
             </ul>
             <ul className="hiddenNavList">
-            <li className="navItem"><NavLink to="/" className="navLink" aria-label="search"><i class="fas fa-search"></i></NavLink></li>
-            <li className="navItem"><NavLink to="/notes" className="navLink"><i class="fas fa-clipboard-list"></i></NavLink></li>
+            <li className="navItem"><NavLink to="/" className="navLink" aria-label="search" tabIndex='2'><i class="fas fa-search"></i></NavLink></li>
+            <li className="navItem"><NavLink to="/notes" className="navLink" tabIndex='3'><i class="fas fa-clipboard-list"></i></NavLink></li>
             </ul>
           </div>
         </nav>

diff --git a/src/styles/partials/_nav.scss b/src/styles/partials/_nav.scss
@@ -20,6 +20,10 @@
   .navLink {
     text-transform: uppercase;
     font-size: 25px;
+        &:focus,
+        &:hover {
+          color: $primaryColor;
+        }
   }  
 }
 .hiddenNavList {