From abde35c6f94b0bedb5706f98876303e3dd259030 Mon Sep 17 00:00:00 2001
From: Cameron Cordes <cameronc.dev@gmail.com>
Date: Wed, 12 Aug 2020 17:14:17 -0400
Subject: [PATCH] Improve keyboard navigation

---
 src/app/contact/contact.component.css  |  2 +-
 src/app/contact/contact.component.html | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/app/contact/contact.component.css b/src/app/contact/contact.component.css
index b02cee5..670a386 100644
--- a/src/app/contact/contact.component.css
+++ b/src/app/contact/contact.component.css
@@ -21,6 +21,6 @@
 }
 
 .icon-layout:hover {
-  color: #0FA0CE;
+  color: var(--nord12);
   cursor: pointer;
 }
diff --git a/src/app/contact/contact.component.html b/src/app/contact/contact.component.html
index 7704238..0c1b7b0 100644
--- a/src/app/contact/contact.component.html
+++ b/src/app/contact/contact.component.html
@@ -3,19 +3,19 @@
     <h2>Social Media</h2>
 
     <div style="display: flex; justify-content: center; width: 100%">
-      <div class="icon-layout" (click)="linkedInClicked()">
-        <img src="../../assets/linked-in.png" class="icon" alt="LinkedIn">
-        <span class="icon-text">LinkedIn</span>
+      <div class="icon-layout" (click)="linkedInClicked()" (keydown.enter)="linkedInClicked()" tabindex="0">
+        <img src="../../assets/linked-in.png" class="icon" alt="LinkedIn" tabindex="-1">
+        <span class="icon-text" tabindex="-1">LinkedIn</span>
       </div>
 
-      <div class="icon-layout" (click)="githubClicked()">
-        <img src="../../assets/github.png" class="icon" alt="Github">
-        <span class="icon-text">GitHub</span>
+      <div class="icon-layout" (click)="githubClicked()" (keydown.enter)="githubClicked()" tabindex="0">
+        <img src="../../assets/github.png" class="icon" alt="Github" tabindex="-1">
+        <span class="icon-text" tabindex="-1">GitHub</span>
       </div>
 
-      <div class="icon-layout" (click)="emailClicked()">
-        <img src="../../assets/gmail.png" class="icon" alt="GMail">
-        <span class="icon-text">Email</span>
+      <div class="icon-layout" (click)="emailClicked()" (keydown.enter)="emailClicked()" tabindex="0">
+        <img src="../../assets/gmail.png" class="icon" alt="GMail" tabindex="-1">
+        <span class="icon-text" tabindex="-1">Email</span>
       </div>
     </div>
     <p class="subtitle mt-2">Contact me to connect, collaborate or just to chat.</p>