From 380cc17b92771e52a1b2966d2dcae648aebaef1b Mon Sep 17 00:00:00 2001
From: DrMint <29893320+DrMint@users.noreply.github.com>
Date: Fri, 7 Jun 2024 22:26:30 +0200
Subject: [PATCH] Added focus-visible where it was missing

---
 .../AppLayout/components/Html.astro           | 19 +++++++++-
 src/components/Button.astro                   |  2 +-
 src/components/Previews/GenericPreview.astro  |  3 +-
 .../[slug]/_components/AvailabilityInfo.astro |  2 +-
 .../ContentsSection/ContentRow.astro          |  2 +-
 .../[slug]/_components/ImageTile.astro        | 38 -------------------
 6 files changed, 22 insertions(+), 44 deletions(-)

diff --git a/src/components/AppLayout/components/Html.astro b/src/components/AppLayout/components/Html.astro
index 5bd1dba..73f31d7 100644
--- a/src/components/AppLayout/components/Html.astro
+++ b/src/components/AppLayout/components/Html.astro
@@ -604,9 +604,13 @@ const { currentTheme } = Astro.locals;
       color: var(--color-base-750);
       text-decoration: underline dotted 0.1em var(--color-base-650);
 
-      &:hover {
+      border-radius: 9999px;
+      
+      &:hover, &:focus-visible {
         color: var(--color-base-850);
         text-decoration-color: var(--color-base-750);
+        outline: 3px solid var(--color-base-750);
+        outline-offset: 2px;
       }
 
       &:active {
@@ -629,9 +633,12 @@ const { currentTheme } = Astro.locals;
   .pressable-icon {
     transition: 150ms color;
     cursor: pointer;
+    border-radius: 9999px;
 
-    &:hover {
+    &:hover, &:focus-visible {
       color: var(--color-base-700);
+      outline-color: var(--color-base-700);
+      outline-offset: 4px;
     }
 
     &:active {
@@ -646,11 +653,19 @@ const { currentTheme } = Astro.locals;
     transition-duration: 150ms;
     transition-property: text-decoration-color, color;
 
+    border-radius: 9999px;
+    
     &:hover {
       color: var(--color-base-750);
       text-decoration-color: var(--color-base-650);
     }
 
+    &:focus-visible {
+      color: var(--color-base-750);
+      outline: 3px solid var(--color-base-750);
+      outline-offset: 3px;
+    }
+
     &:active {
       color: var(--color-base-650);
       text-decoration-color: var(--color-base-550);
diff --git a/src/components/Button.astro b/src/components/Button.astro
index 9b40806..7cd1c7c 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -59,7 +59,7 @@ const { title, icon, class: className, ariaLabel, id } = Astro.props;
       height: 1.5em;
     }
 
-    &:hover {
+    &:hover, &:focus-visible {
       box-shadow: inset 0 0.1em 0.1em 0 var(--color-shadow-2);
       translate: unset;
     }
diff --git a/src/components/Previews/GenericPreview.astro b/src/components/Previews/GenericPreview.astro
index e8172f3..3a9621b 100644
--- a/src/components/Previews/GenericPreview.astro
+++ b/src/components/Previews/GenericPreview.astro
@@ -146,7 +146,7 @@ for (const attribute of attributes) {
     position: relative;
     width: unset;
 
-    &a:hover > #footer > p {
+    &a:hover > #footer > p, &a:focus-visible #footer > p {
       color: var(--color-base-750);
     }
 
@@ -173,6 +173,7 @@ for (const attribute of attributes) {
         color: var(--color-base-400);
         display: grid;
         place-content: center;
+        border-radius: 0.7em;
 
         & > svg {
           width: 64px;
diff --git a/src/pages/[locale]/collectibles/[slug]/_components/AvailabilityInfo.astro b/src/pages/[locale]/collectibles/[slug]/_components/AvailabilityInfo.astro
index 9416c7e..99740e6 100644
--- a/src/pages/[locale]/collectibles/[slug]/_components/AvailabilityInfo.astro
+++ b/src/pages/[locale]/collectibles/[slug]/_components/AvailabilityInfo.astro
@@ -75,7 +75,7 @@ const title = (() => {
         transition-duration: 150ms;
         transition-property: border-color, color;
 
-        &:hover {
+        &:hover, &:focus-visible {
           color: var(--color-base-750);
           border-color: var(--color-base-750);
         }
diff --git a/src/pages/[locale]/collectibles/[slug]/_components/ContentsSection/ContentRow.astro b/src/pages/[locale]/collectibles/[slug]/_components/ContentsSection/ContentRow.astro
index 5a569af..1c28f31 100644
--- a/src/pages/[locale]/collectibles/[slug]/_components/ContentsSection/ContentRow.astro
+++ b/src/pages/[locale]/collectibles/[slug]/_components/ContentsSection/ContentRow.astro
@@ -149,7 +149,7 @@ const { title, language } = (() => {
       text-decoration-color: transparent;
     }
 
-    &a:hover > #title {
+    &a:hover > #title, &a:focus-visible > #title {
       color: var(--color-base-750);
       text-decoration-color: var(--color-base-650);
     }
diff --git a/src/pages/[locale]/collectibles/[slug]/_components/ImageTile.astro b/src/pages/[locale]/collectibles/[slug]/_components/ImageTile.astro
index 9206840..f3edb82 100644
--- a/src/pages/[locale]/collectibles/[slug]/_components/ImageTile.astro
+++ b/src/pages/[locale]/collectibles/[slug]/_components/ImageTile.astro
@@ -83,42 +83,4 @@ const {
       }
     }
   }
-
-  /* a {
-    width: 100%;
-    height: 64px;
-    overflow: hidden;
-    display: grid;
-    place-items: center;
-    grid-template-areas: "center";
-    border-radius: 12px;
-
-    transition: 100ms scale;
-
-    &:hover,
-    &:focus-visible {
-      scale: 105%;
-    }
-
-    & > div {
-      grid-area: center;
-      padding: 1em;
-      border-radius: 1em;
-      text-align: center;
-      background-color: color-mix(in srgb, var(--color-elevation-0) 70%, transparent);
-      backdrop-filter: blur(8px);
-
-      & > p:has(+ p) {
-        margin-bottom: 0.3em;
-      }
-    }
-
-    & > img {
-      grid-area: center;
-      height: 100%;
-      object-fit: cover;
-      box-shadow: 0 5px 20px -10px var(--color-shadow-0);
-      border-radius: 12px;
-    }
-  } */
 </style>