From 1a8bfd9b44c9af1d155b3c58c9c449b90311ca71 Mon Sep 17 00:00:00 2001
From: nisarhassan12 <syednisarhassan12@gmail.com>
Date: Thu, 14 May 2020 21:16:11 +0500
Subject: [PATCH] add focus state styles for keyboard navigation.

---
 index.css  | 32 +++++++++++++++++++++++++++++---
 index.html |  2 +-
 index.js   | 23 +++++++++++++++++++++++
 3 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/index.css b/index.css
index 19fb2d3..949a93e 100644
--- a/index.css
+++ b/index.css
@@ -192,6 +192,21 @@ a {
     font-weight: 400;
     font-family: 'Jost', sans-serif;
     transition: all .2s;
+    outline: 2px solid transparent;
+}
+
+::-moz-focus-inner {
+    border: 0;
+}
+
+button:focus,
+a:focus {
+    outline: 2px solid var(--pink);
+}
+
+body:not(.user-is-tabbing) button:focus,
+body:not(.user-is-tabbing) a:focus {
+    outline: none;
 }
 
 .link:hover {
@@ -208,6 +223,10 @@ a {
     font-weight: 400;
 }
 
+.btn:focus {
+    outline: none;
+}
+
 .btn::after {
     content: '';
     display: block;
@@ -221,7 +240,8 @@ a {
     transition: all 0.2s cubic-bezier(1, 0.68, 0.16, 0.9);
 }
 
-.btn:hover::after {
+.btn:hover::after,
+.btn:focus::after {
     right: 0;
     background: var(--pink);
 }
@@ -235,7 +255,8 @@ a {
     display: none;
 }
 
-.btn--pink:hover {
+.btn--pink:hover,
+.btn--pink:focus {
     background: transparent;
 }
 
@@ -261,7 +282,12 @@ a {
     transition: all 0.2s cubic-bezier(1, 0.68, 0.16, 0.9);
 }
 
-.link__text:hover::after {
+.link__text:focus {
+    outline: none;
+}
+
+.link__text:hover::after,
+.link__text:focus:after {
     right: 0;
     background: var(--pink);
 }
diff --git a/index.html b/index.html
index 1ecd67a..e7dab94 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
   Hello 😊.
 
   This template is designed and developed by Nisar Hassan Naqvi
-  for anyone to use for free or customize the way they want.
+  for anyone to use for free or customize the way they like.
 
   Github Repo: https://github.com/nisarhassan12/portfolio-template/
   My Website: https://nisar.dev
diff --git a/index.js b/index.js
index e01cab9..e2c8740 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,26 @@
+/* -----------------------------------------
+  Have focus outline only for keyboard users 
+ ---------------------------------------- */
+
+const handleFirstTab = (e) => {
+  if(e.key === 'Tab') {
+    document.body.classList.add('user-is-tabbing')
+
+    window.removeEventListener('keydown', handleFirstTab)
+    window.addEventListener('mousedown', handleMouseDownOnce)
+  }
+
+}
+
+const handleMouseDownOnce = () => {
+  document.body.classList.remove('user-is-tabbing')
+
+  window.removeEventListener('mousedown', handleMouseDownOnce)
+  window.addEventListener('keydown', handleFirstTab)
+}
+
+window.addEventListener('keydown', handleFirstTab)
+
 const backToTopButton = document.querySelector(".back-to-top");
 let isBackToTopRendered = false;