From ed6c6e799a0bf96a99a49cd8d7a55729f5cdb43b Mon Sep 17 00:00:00 2001
From: vikingowl <cw.nachtigall@gmail.com>
Date: Tue, 2 Nov 2021 23:43:19 +0100
Subject: [PATCH] #28 added tabindex for "home"

---
 src/App.vue               |  6 +++---
 src/components/Footer.vue | 14 +++++++++++++-
 src/components/Nav.vue    |  9 +++++++++
 src/views/Home.vue        | 28 +++++++++++++++++-----------
 4 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 993603a..78315e4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,10 +4,10 @@
   </header>
   <main>
     <div class="spacer"></div>
-    <router-view name="main" />
+    <router-view name="main"/>
   </main>
   <footer class="mt-auto">
-    <Footer />
+    <Footer/>
   </footer>
 </template>
 
@@ -20,7 +20,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
 @font-face {
   font-family: "Obitron";
   src: local("Obitron"), url("assets/fonts/Orbitron-VariableFont_wght.ttf") format("truetype");
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 7433557..035a170 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="footer bg-secondary text-center pt-5 pb-4">
     <div class="icons pb-4">
-      <a aria-label="Git Link" class="text-white" href="https://git.harting.dev/CSGOWTF" target="_blank">
+      <a aria-label="Git Link" class="gitea text-white" href="https://git.harting.dev/CSGOWTF" target="_blank">
         <!--        <i class="bi bi-github"></i>-->
         <img alt="Gitea Icon" src="../assets/images/icons/gitea.svg">
       </a>
@@ -31,6 +31,18 @@ export default {
     height: 35px;
   }
 
+  a:not(.gitea):focus,
+  a:not(.gitea):hover {
+    outline: none;
+    box-shadow: 0 4px 2px -2px var(--bs-warning);
+  }
+
+  .gitea:focus,
+  .gitea:hover {
+    outline: none;
+    filter: brightness(0.4) sepia(1) hue-rotate(15deg) saturate(2);
+  }
+
   p {
     font-size: .85rem;
   }
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index 17edc07..8eee4bc 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -186,6 +186,11 @@ nav {
       box-shadow: 0 4px 2px -2px var(--bs-warning);
     }
 
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 4px 2px -2px var(--bs-warning);
+    }
+
     &:hover {
       color: #bdbdbd !important;
       transition: 250ms ease-in-out;
@@ -223,6 +228,10 @@ nav {
       margin-top: 17px;
       margin-left: 0;
 
+      &:focus-visible {
+        outline: none;
+        box-shadow: 0 4px 2px -2px var(--bs-warning);
+      }
 
       &:hover {
         color: var(--bs-warning);
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 802d2fd..c8acad7 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -5,7 +5,7 @@
       <h3 class="mb-lg-5">Open source CSGO data platform</h3>
     </div>
     <div v-if="recentVisited !== null" class="recent-search mt-5 mb-5 row gap-2 justify-content-center">
-      <div v-for="(player, id) in recentVisited" :key="player.steamid64" class="player-card">
+      <div v-for="(player, id) in recentVisited" :key="player.steamid64" class="player-card" tabindex="0" @keyup.enter="GoToPlayer(player.vanity_url || player.steamid64)">
         <div class="p-2" @click="GoToPlayer(player.vanity_url || player.steamid64)">
           <div class="col-md-4 m-auto">
             <img :alt="player.name" :src="player.avatar">
@@ -14,7 +14,7 @@
             <p>{{ player.name }}</p>
           </div>
         </div>
-        <i class="delete fas fa-times" @click="removeRecentVisited(id)"></i>
+        <i class="delete fas fa-times" tabindex="0" @click="removeRecentVisited(id)"></i>
       </div>
     </div>
     <hr v-if="recentVisited !== null" class="m-auto text-muted">
@@ -146,17 +146,22 @@ export default {
       &:hover {
         background: var(--bs-primary);
         cursor: pointer;
+      }
 
-        .delete {
-          display: initial;
-          position: absolute;
-          font-size: 1rem;
-          top: 5px;
-          right: 5px;
+      &:focus {
+        outline: none;
+        background: var(--bs-warning) !important;
+      }
 
-          &:hover {
-            color: maroon;
-          }
+      &:hover > .delete {
+        display: initial;
+        position: absolute;
+        font-size: 1rem;
+        top: 5px;
+        right: 5px;
+
+        &:hover {
+          color: maroon;
         }
       }
 
@@ -180,6 +185,7 @@ export default {
       h1 {
         font-size: 4rem;
       }
+
       h3 {
         font-size: 2rem;
         padding: 0 2rem;