From f7c0c3f7840d9bf17a61986f25c87346869ab93d Mon Sep 17 00:00:00 2001
From: DrMint <29893320+DrMint@users.noreply.github.com>
Date: Fri, 24 May 2024 12:16:17 +0200
Subject: [PATCH] Improve keyboard navigation

---
 .../AppLayout/components/Footer.astro         | 50 ++++---------------
 .../AppLayout/components/Html.astro           | 18 ++++++-
 .../AppLayout/components/Topbar/Topbar.astro  |  2 +
 .../Topbar/components/ParentPagesButton.astro |  4 +-
 .../Topbar/components/ReturnToButton.astro    | 16 +++---
 src/components/Card.astro                     | 30 +++++++----
 .../components/OpenMediaPageButton.astro      | 13 +++--
 .../RTUpload/components/RTImage.astro         | 41 +++++++++------
 src/components/SourceRow.astro                | 12 ++++-
 src/pages/[locale]/api/pages/partial.astro    | 25 +++++++---
 .../[slug]/_components/ImageTile.astro        |  8 ++-
 .../[locale]/collectibles/[slug]/index.astro  | 16 ++++--
 src/pages/[locale]/folders/[slug].astro       |  1 +
 13 files changed, 136 insertions(+), 100 deletions(-)

diff --git a/src/components/AppLayout/components/Footer.astro b/src/components/AppLayout/components/Footer.astro
index c32ea9d..491d836 100644
--- a/src/components/AppLayout/components/Footer.astro
+++ b/src/components/AppLayout/components/Footer.astro
@@ -32,35 +32,35 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t(
       <div id="nav" class="when-no-print">
         <p class="font-serif">{t("global.siteName")}</p>
         <div>
-          <a href="/">
+          <a class="pressable-label" href="/">
             <Icon name="accords" />
             <p>{t("footer.links.home.title")}</p>
           </a>
-          <a href="/archives" class="DEV_TODO">
+          <a class="pressable-label DEV_TODO" href="/archives">
             <Icon name="material-symbols:browse" />
             <p>{"Contents"}</p>
           </a>
-          <a href="/chronicles" class="DEV_TODO">
+          <a class="pressable-label DEV_TODO" href="/chronicles">
             <Icon name="material-symbols:book-2" />
             <p>{"Chronicles"}</p>
           </a>
-          <a href="/changelog" class="DEV_TODO">
+          <a class="pressable-label DEV_TODO" href="/changelog">
             <Icon name="material-symbols:history" />
             <p>{"Changelog"}</p>
           </a>
-          <a href="/timeline">
+          <a class="pressable-label" href="/timeline">
             <Icon name="material-symbols:calendar-month" />
             <p>{t("footer.links.timeline.title")}</p>
           </a>
-          <a href="https://gallery.accords-library.com/posts">
+          <a class="pressable-label" href="https://gallery.accords-library.com/posts">
             <Icon name="material-symbols:perm-media" />
             <p>{t("footer.links.gallery.title")}</p>
           </a>
-          <a href="/videos" class="DEV_TODO">
+          <a class="pressable-label DEV_TODO" href="/videos">
             <Icon name="material-symbols:movie" />
             <p>{t("footer.links.videos.title")}</p>
           </a>
-          <a href="/archives" class="DEV_TODO">
+          <a class="pressable-label DEV_TODO" href="/archives">
             <Icon name="material-symbols:folder-zip" />
             <p>{t("footer.links.webArchives.title")}</p>
           </a>
@@ -166,10 +166,6 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t(
         grid-template-columns: 1fr 1fr;
         margin-left: -0.6em;
 
-        @media (max-width: 65rem) {
-          gap: unset;
-        }
-
         @media (max-width: 35rem) {
           gap: 0.25em 0.5em;
           grid-template-columns: 1fr 1fr;
@@ -184,35 +180,6 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t(
           margin-left: unset;
           font-size: 1.2em;
         }
-
-        & > a {
-          display: flex;
-          place-items: center;
-          text-decoration: none;
-          gap: 0.4em;
-          padding: 0.4em 0.6em;
-          border-radius: 9999px;
-
-          @media (max-width: 35rem) {
-            padding: 0.6em 0.8em;
-          }
-
-          transition: 150ms background-color;
-
-          &:hover {
-            background-color: var(--color-base-250);
-          }
-
-          &:active {
-            background-color: var(--color-base-300);
-          }
-
-          & > svg {
-            flex-shrink: 0;
-            height: 0.75em;
-            width: 0.75em;
-          }
-        }
       }
     }
 
@@ -247,6 +214,7 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t(
           justify-content: flex-start;
           gap: 0.2em;
           margin-top: 0.5em;
+          width: fit-content;
 
           & > svg {
             width: 1em;
diff --git a/src/components/AppLayout/components/Html.astro b/src/components/AppLayout/components/Html.astro
index 4c7799c..e19500b 100644
--- a/src/components/AppLayout/components/Html.astro
+++ b/src/components/AppLayout/components/Html.astro
@@ -362,6 +362,8 @@ const { currentTheme } = Astro.locals;
 
   button {
     background-color: unset;
+    font-size: 1em;
+    border: unset;
   }
 
   button,
@@ -450,10 +452,16 @@ const { currentTheme } = Astro.locals;
 
     transition: 150ms background-color;
 
-    &:hover {
+    &:hover,
+    &:focus-visible {
       background-color: var(--color-base-250);
     }
 
+    &:focus-visible {
+      outline: 3px solid var(--color-base-1000);
+      outline-offset: unset;
+    }
+
     &:active {
       background-color: var(--color-base-300);
     }
@@ -468,12 +476,18 @@ const { currentTheme } = Astro.locals;
     transition-duration: 250ms;
     transition-property: padding-top, box-shadow, background-color, color, border-color;
 
-    &:hover {
+    &:hover,
+    &:focus-visible {
       --foreground-color: var(--color-base-1000);
       box-shadow: 0 2px 2px var(--color-shadow-2);
       background-color: var(--color-elevation-1);
     }
 
+    &:focus-visible {
+      outline: 3px solid var(--foreground-color);
+      outline-offset: unset;
+    }
+
     &:active {
       transition-duration: 75ms;
       --foreground-color: var(--color-base-1000);
diff --git a/src/components/AppLayout/components/Topbar/Topbar.astro b/src/components/AppLayout/components/Topbar/Topbar.astro
index 8af3fa0..4373b26 100644
--- a/src/components/AppLayout/components/Topbar/Topbar.astro
+++ b/src/components/AppLayout/components/Topbar/Topbar.astro
@@ -77,6 +77,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
       display: flex;
       place-items: center;
       overflow-x: scroll;
+      padding: 3px; /* This way focus outline isn't cropped by overflow-x */
       gap: 8px;
       margin-left: -0.8em;
 
@@ -92,6 +93,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
       place-items: center;
       justify-content: flex-end;
       overflow-x: scroll;
+      padding: 3px; /* This way focus outline isn't cropped by overflow-x */
 
       @media (max-width: 28rem) {
         justify-content: center;
diff --git a/src/components/AppLayout/components/Topbar/components/ParentPagesButton.astro b/src/components/AppLayout/components/Topbar/components/ParentPagesButton.astro
index 970c668..89b251c 100644
--- a/src/components/AppLayout/components/Topbar/components/ParentPagesButton.astro
+++ b/src/components/AppLayout/components/Topbar/components/ParentPagesButton.astro
@@ -30,14 +30,14 @@ const { t } = await getI18n(Astro.locals.currentLocale);
           ))}
         </div>
       </div>
-      <div class="pressable-label">
+      <button class="pressable-label">
         <Icon name="material-symbols:keyboard-return" />
         <p>
           {t("header.nav.parentPages.label", {
             count: parentPages.length,
           })}
         </p>
-      </div>
+      </button>
     </Tooltip>
   )
 }
diff --git a/src/components/AppLayout/components/Topbar/components/ReturnToButton.astro b/src/components/AppLayout/components/Topbar/components/ReturnToButton.astro
index 92a4cb2..454a03f 100644
--- a/src/components/AppLayout/components/Topbar/components/ReturnToButton.astro
+++ b/src/components/AppLayout/components/Topbar/components/ReturnToButton.astro
@@ -21,20 +21,18 @@ const {
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<a href={href} target={target} rel={rel}>
-  <div class="pressable-label">
-    <Icon name="material-symbols:keyboard-return" />
-    <p>
-      <span>{typeLabel}</span>
-      {label}
-    </p>
-  </div>
+<a class="pressable-label" href={href} target={target} rel={rel}>
+  <Icon name="material-symbols:keyboard-return" />
+  <p>
+    <span>{typeLabel}</span>
+    {label}
+  </p>
 </a>
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
 
 <style>
-  div {
+  a {
     height: 16px;
 
     & > p {
diff --git a/src/components/Card.astro b/src/components/Card.astro
index 39f6b26..95d2b97 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -1,7 +1,4 @@
 ---
-import ConditionalWrapper from "./ConditionalWrapper.astro";
-import Link from "./Link.astro";
-
 interface Props {
   href?: string | undefined;
   disableRoundedTop?: boolean;
@@ -12,11 +9,17 @@ const { href, disableRoundedTop = false } = Astro.props;
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<ConditionalWrapper condition={href !== undefined} wrapper={Link} props={{ href: href! }}>
-  <div id="card" class:list={{ "rounded-top": !disableRoundedTop }}>
-    <slot />
-  </div>
-</ConditionalWrapper>
+{
+  href !== undefined ? (
+    <a href={href} id="card" class:list={{ "rounded-top": !disableRoundedTop }}>
+      <slot />
+    </a>
+  ) : (
+    <div id="card" class:list={{ "rounded-top": !disableRoundedTop }}>
+      <slot />
+    </div>
+  )
+}
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
 
@@ -37,20 +40,27 @@ const { href, disableRoundedTop = false } = Astro.props;
     background-color: color-mix(in srgb, var(--color-elevation-2) 30%, transparent);
   }
 
-  :global(a) > #card {
+  a#card {
     transition-duration: 150ms;
     transition-property: border-color, box-shadow, background-color;
 
-    &:hover {
+    &:hover,
+    &:focus-visible {
       border-color: var(--color-base-650);
       box-shadow: 0 2px 2px var(--color-shadow-2);
       background-color: color-mix(in srgb, var(--color-elevation-2) 80%, transparent);
     }
 
+    &:focus-visible {
+      outline: 3px solid var(--color-base-650);
+      outline-offset: unset;
+    }
+
     &:active {
       border-color: var(--color-base-1000);
       box-shadow: 0 6px 12px 2px var(--color-shadow-2);
       background-color: var(--color-elevation-2);
+      outline-color: var(--color-base-1000);
     }
   }
 </style>
diff --git a/src/components/RichText/components/RTUpload/components/OpenMediaPageButton.astro b/src/components/RichText/components/RTUpload/components/OpenMediaPageButton.astro
index 8ecc068..1cd8a8f 100644
--- a/src/components/RichText/components/RTUpload/components/OpenMediaPageButton.astro
+++ b/src/components/RichText/components/RTUpload/components/OpenMediaPageButton.astro
@@ -12,12 +12,10 @@ const { t } = await getI18n(Astro.locals.currentLocale);
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<div class="button">
-  <a href={url}>
-    <div class="pressable-label">
-      <Icon name="material-symbols:left-click" />
-      <p>{t("global.openMediaPage")}</p>
-    </div>
+<div class="button when-no-print">
+  <a href={url} class="pressable-label">
+    <Icon name="material-symbols:left-click" />
+    <p>{t("global.openMediaPage")}</p>
   </a>
 </div>
 
@@ -30,9 +28,10 @@ const { t } = await getI18n(Astro.locals.currentLocale);
     gap: 0.3em;
     font-size: 85%;
 
-    & > a > div {
+    & > a {
       padding: 0.3em 0.6em;
       padding-right: 0.8em;
+      gap: 0.7em;
     }
   }
 </style>
diff --git a/src/components/RichText/components/RTUpload/components/RTImage.astro b/src/components/RichText/components/RTUpload/components/RTImage.astro
index 86100c2..12e32c8 100644
--- a/src/components/RichText/components/RTUpload/components/RTImage.astro
+++ b/src/components/RichText/components/RTUpload/components/RTImage.astro
@@ -44,6 +44,7 @@ const mediaPage = getLocalizedUrl(`/images/${id}`);
       sizes={`(max-width: 550px) 90vw, 550px`}
       width={width}
       height={height}
+      loading="lazy"
     />
   </a>
   <OpenMediaPageButton url={mediaPage} />
@@ -52,24 +53,34 @@ const mediaPage = getLocalizedUrl(`/images/${id}`);
 {/* ------------------------------------------- CSS -------------------------------------------- */}
 
 <style>
-  div {
-    margin-block: 4em;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5em;
+  a {
+    display: block;
+    line-height: 0;
+    box-shadow: 0 5px 20px -10px var(--color-shadow);
+    border-radius: 16px;
+    overflow: hidden;
+    width: fit-content;
+    margin-bottom: 0.5em;
 
-    & > a > img {
-      width: 100%;
-      height: auto;
-      border-radius: 16px;
-      box-shadow: 0 5px 20px -10px var(--color-shadow);
-      margin-bottom: -0.5em;
+    transition-property: scale, margin-bottom;
+    transition-duration: 100ms;
+
+    &:hover,
+    &:focus-visible {
+      scale: 102%;
+      margin-bottom: 1em;
     }
 
-    transition: 100ms scale;
-
-    &:hover {
-      scale: 102%;
+    &:focus-visible {
+      outline: 3px solid var(--color-base-1000);
+      outline-offset: unset;
     }
   }
+
+  img {
+    max-height: 70vh;
+    max-width: 100%;
+    width: auto;
+    height: auto;
+  }
 </style>
diff --git a/src/components/SourceRow.astro b/src/components/SourceRow.astro
index cb4ef1d..a454b77 100644
--- a/src/components/SourceRow.astro
+++ b/src/components/SourceRow.astro
@@ -38,11 +38,21 @@ const {
       transition-property: text-decoration-color, color;
     }
 
-    &:hover > p {
+    border-radius: 16px;
+    padding: 2px 5px;
+    margin: -2px -5px;
+
+    &:hover > p,
+    &:focus-visible > p {
       color: var(--color-base-750);
       text-decoration-color: var(--color-base-650);
     }
 
+    &:focus-visible {
+      outline: 2px solid var(--color-base-1000);
+      outline-offset: unset;
+    }
+
     &:active > p {
       color: var(--color-base-650);
       text-decoration-color: var(--color-base-550);
diff --git a/src/pages/[locale]/api/pages/partial.astro b/src/pages/[locale]/api/pages/partial.astro
index 9690db9..62d483f 100644
--- a/src/pages/[locale]/api/pages/partial.astro
+++ b/src/pages/[locale]/api/pages/partial.astro
@@ -68,9 +68,8 @@ if (updatedBy) {
     <Fragment slot="header-aside">
       {
         thumbnail && (
-          <a href={getLocalizedUrl(`/images/${thumbnail.id}`)}>
+          <a id="thumbnail" href={getLocalizedUrl(`/images/${thumbnail.id}`)}>
             <img
-              id="thumbnail"
               src={thumbnail.url}
               srcset={sizesToSrcset(thumbnail.sizes)}
               sizes={`(max-width: 550px) 90vw, 550px`}
@@ -166,13 +165,19 @@ if (updatedBy) {
   }
 
   #thumbnail {
-    max-width: min(35rem, 100%);
-    max-height: 80vh;
-    width: auto;
-    height: auto;
     border-radius: 16px;
     box-shadow: 0 5px 20px -10px var(--color-shadow);
+    overflow: hidden;
     transition: 100ms scale;
+    display: block;
+    width: fit-content;
+
+    & > img {
+      max-width: min(35rem, 100%);
+      max-height: 80vh;
+      width: auto;
+      height: auto;
+    }
 
     @media (max-width: 1280.5px) {
       margin-top: 2em;
@@ -182,8 +187,14 @@ if (updatedBy) {
       margin-bottom: 2em;
     }
 
-    &:hover {
+    &:hover,
+    &:focus-visible {
       scale: 102%;
     }
+
+    &:focus-visible {
+      outline: 3px solid var(--color-base-1000);
+      outline-offset: unset;
+    }
   }
 </style>
diff --git a/src/pages/[locale]/collectibles/[slug]/_components/ImageTile.astro b/src/pages/[locale]/collectibles/[slug]/_components/ImageTile.astro
index 3c4d61a..66c85c9 100644
--- a/src/pages/[locale]/collectibles/[slug]/_components/ImageTile.astro
+++ b/src/pages/[locale]/collectibles/[slug]/_components/ImageTile.astro
@@ -57,10 +57,16 @@ const {
 
     transition: 100ms scale;
 
-    &:hover {
+    &:hover,
+    &:focus-visible {
       scale: 105%;
     }
 
+    &:focus-visible {
+      outline: 3px solid var(--color-base-1000);
+      outline-offset: unset;
+    }
+
     & > div {
       text-align: center;
       backdrop-filter: blur(5px);
diff --git a/src/pages/[locale]/collectibles/[slug]/index.astro b/src/pages/[locale]/collectibles/[slug]/index.astro
index 114ae2a..1bcd8dd 100644
--- a/src/pages/[locale]/collectibles/[slug]/index.astro
+++ b/src/pages/[locale]/collectibles/[slug]/index.astro
@@ -256,6 +256,17 @@ if (price) {
 
     & a {
       width: fit-content;
+      transition: 100ms scale;
+
+      &:hover,
+      &:focus-visible {
+        scale: 102%;
+      }
+
+      &:focus-visible {
+        outline: 3px solid var(--color-base-1000);
+        outline-offset: unset;
+      }
 
       & > #thumbnail {
         max-width: min(35rem, 100%);
@@ -263,11 +274,6 @@ if (price) {
         width: auto;
         height: auto;
         box-shadow: 0 5px 20px -10px var(--color-shadow);
-        transition: 100ms scale;
-
-        &:hover {
-          scale: 102%;
-        }
       }
     }
 
diff --git a/src/pages/[locale]/folders/[slug].astro b/src/pages/[locale]/folders/[slug].astro
index 992727a..93e232b 100644
--- a/src/pages/[locale]/folders/[slug].astro
+++ b/src/pages/[locale]/folders/[slug].astro
@@ -111,6 +111,7 @@ const meta = getLocalizedMatch(folder.translations);
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
       gap: clamp(6px, 2vmin, 16px);
+      align-items: start;
     }
   }
 </style>