From d371320ce81b228eb1ca75b155b1edd862fdb91d Mon Sep 17 00:00:00 2001
From: kiosion <hi@kio.dev>
Date: Thu, 29 Feb 2024 21:00:58 -0500
Subject: [PATCH] fix: A11y issues, list styles, colour contrast issues

---
 .../src/components/about/timeline-item.svelte | 62 ++++++++---------
 .../components/about/timeline-section.svelte  |  2 +-
 svelte-app/src/components/code-block.svelte   |  3 +
 .../components/document/content/header.svelte |  6 +-
 svelte-app/src/components/footer.svelte       |  5 +-
 svelte-app/src/components/header.svelte       |  4 +-
 .../components/headings/headed-block.svelte   |  8 +--
 .../src/components/lists/document-list.svelte | 19 +++++
 .../src/components/lists/list-item.svelte     | 69 +++++++++++++------
 .../src/components/lists/year-list.svelte     | 52 --------------
 .../src/components/tooltips/inner.svelte      | 27 +++++++-
 .../routes/[[lang=lang]]/blog/+page.svelte    |  4 +-
 .../routes/[[lang=lang]]/work/+page.svelte    |  4 +-
 svelte-app/src/styles/_colors.scss            |  4 +-
 svelte-app/tailwind.config.cjs                |  4 +-
 15 files changed, 144 insertions(+), 129 deletions(-)
 create mode 100644 svelte-app/src/components/lists/document-list.svelte
 delete mode 100644 svelte-app/src/components/lists/year-list.svelte

diff --git a/svelte-app/src/components/about/timeline-item.svelte b/svelte-app/src/components/about/timeline-item.svelte
index 1b94469ab..0dd544b53 100644
--- a/svelte-app/src/components/about/timeline-item.svelte
+++ b/svelte-app/src/components/about/timeline-item.svelte
@@ -30,10 +30,12 @@
 </div>
 
 <style lang="scss">
-  $bulletTopGap: 12px;
-  $lineTopGap: 16px;
-  $bulletWidth: 6px;
+  @import '@styles/mixins';
+
+  $bulletTopMargin: 13px;
+  $bulletSize: 6px;
   $lineWidth: 2px;
+  $lineGap: 14px;
 
   .item {
     @apply relative flex flex-row items-start justify-start gap-x-6 pb-5 pl-3;
@@ -44,15 +46,23 @@
   }
 
   .bullet {
-    @apply block flex-shrink-0 rounded-full bg-dark/40;
+    @apply block flex-shrink-0 rounded-full bg-accent-light/80;
+
+    margin-top: $bulletTopMargin;
+    width: $bulletSize;
+    height: $bulletSize;
 
-    margin-top: $bulletTopGap;
-    width: $bulletWidth;
-    height: $bulletWidth;
+    @include dark {
+      @apply bg-accent-dark/80;
+    }
   }
 
   h3 {
-    @apply text-lg font-bold text-dark transition-colors;
+    @apply py-1 text-base font-bold text-dark transition-colors;
+
+    @include dark {
+      @apply text-white;
+    }
   }
 
   .content {
@@ -65,41 +75,29 @@
     &:before {
       @apply absolute bg-dark/20;
 
-      $bulletSpaceFromTop: $bulletTopGap + $bulletWidth;
+      $baseSpaceFromTop: $bulletTopMargin + $bulletSize;
 
       content: '';
-      top: #{$bulletSpaceFromTop + $lineTopGap};
-      left: #{$bulletWidth * 2 + $lineWidth};
-      height: calc(100% - #{($bulletSpaceFromTop + $lineTopGap) + calc($lineTopGap / 2)});
+      top: #{$bulletTopMargin + $bulletSize + $lineGap};
+      bottom: #{0px + $lineGap - $bulletTopMargin};
+      left: #{$bulletSize * 2 + $lineWidth};
       width: $lineWidth;
+
+      @include dark {
+        @apply bg-white/20;
+      }
     }
 
     p {
       @apply font-mono text-sm text-dark/80 transition-colors;
+
+      @include dark {
+        @apply text-light/80;
+      }
     }
 
     .body {
       @apply -mb-4;
     }
   }
-
-  :global(.dark) {
-    h3 {
-      @apply text-white;
-    }
-
-    .bullet {
-      @apply bg-white/40;
-    }
-
-    .content {
-      &:before {
-        @apply bg-white/20;
-      }
-
-      p {
-        @apply text-light/80;
-      }
-    }
-  }
 </style>
diff --git a/svelte-app/src/components/about/timeline-section.svelte b/svelte-app/src/components/about/timeline-section.svelte
index c102a6bfe..19fe9e668 100644
--- a/svelte-app/src/components/about/timeline-section.svelte
+++ b/svelte-app/src/components/about/timeline-section.svelte
@@ -34,7 +34,7 @@
 
 <style lang="scss">
   h2 {
-    @apply pb-1 text-xl font-bold text-dark transition-colors;
+    @apply pb-1 text-lg font-bold text-dark transition-colors;
   }
 
   p {
diff --git a/svelte-app/src/components/code-block.svelte b/svelte-app/src/components/code-block.svelte
index 87ca6c5be..711e3e960 100644
--- a/svelte-app/src/components/code-block.svelte
+++ b/svelte-app/src/components/code-block.svelte
@@ -128,11 +128,13 @@
     <div
       class="h-fit w-full min-w-full rounded-sm bg-dark/5 p-1 transition-all"
       id="hljs-container"
+      aria-hidden="true"
       bind:clientHeight={innerHeight}
     >
       <div
         class="pointer-events-none absolute left-1/2 top-1/2 h-fit w-fit -translate-x-1/2 -translate-y-1/2 transition-opacity"
         class:opacity-0={hideLoader}
+        aria-hidden="true"
       >
         <Spinner />
       </div>
@@ -164,5 +166,6 @@
         <div class="p-3 font-code text-sm">Error loading: {loadError.message}</div>
       {/if}
     </div>
+    <p class="sr-only" aria-label={$t('Code content')}>{content}</p>
   </div>
 </div>
diff --git a/svelte-app/src/components/document/content/header.svelte b/svelte-app/src/components/document/content/header.svelte
index 6b3f42afe..5192839d9 100644
--- a/svelte-app/src/components/document/content/header.svelte
+++ b/svelte-app/src/components/document/content/header.svelte
@@ -26,6 +26,10 @@
   <div class="flex flex-row flex-wrap items-center justify-between gap-4">
     <div
       class="flex flex-row flex-wrap items-center justify-start gap-y-2 transition-[color]"
+      aria-label={$t('{document} details', {
+        document: model === 'post' ? 'Post' : 'Project'
+      })}
+      role="group"
     >
       <p class="cursor-default font-mono text-base">
         {$formatDate(data.date, 'full') ?? $t('Unknown date')}
@@ -72,7 +76,7 @@
         >
           {#each data.tags as tag}
             <span
-              class="cursor-default rounded-sm bg-dark/10 px-1.5 py-0.5 font-code text-base transition-colors dark:bg-light/10"
+              class="cursor-default rounded-sm bg-dark/10 px-1.5 py-0.5 font-code text-sm transition-colors dark:bg-light/10"
             >
               {tag.title.toLowerCase()}
             </span>
diff --git a/svelte-app/src/components/footer.svelte b/svelte-app/src/components/footer.svelte
index 3d2c761c6..81461ebe0 100644
--- a/svelte-app/src/components/footer.svelte
+++ b/svelte-app/src/components/footer.svelte
@@ -24,7 +24,7 @@
 {#if socials?.length || APP_VERSION?.length}
   <footer>
     {#if socials?.length}
-      <div>
+      <div role="group" aria-label={$t('Social links')}>
         {#each socials as social, i}
           <Tooltip text={social.url} delay={300} position="top">
             <BaseLink
@@ -42,13 +42,12 @@
       </div>
     {/if}
     {#if APP_VERSION?.length}
-      <div>
+      <div aria-label={$t('View latest commit on GitHub')}>
         <Tooltip text={$t('View latest commit on GitHub')} position="top">
           <BaseLink
             target="_blank"
             rel="noopener noreferrer"
             href="https://github.com/kiosion/kio.dev/commit/{APP_VERSION}"
-            aria-label={$t('View latest commit on GitHub')}
           >
             <Icon name="GitCommit" inline />
             {APP_VERSION.slice(0, 6)}
diff --git a/svelte-app/src/components/header.svelte b/svelte-app/src/components/header.svelte
index 99c3ad180..995e50c70 100644
--- a/svelte-app/src/components/header.svelte
+++ b/svelte-app/src/components/header.svelte
@@ -9,9 +9,9 @@
 </script>
 
 <header>
-  <nav aria-label="Main navigation" role="group">
+  <nav aria-label="Main navigation">
     <a href={$linkTo('/')} aria-label="Home">kio.dev</a>
-    <div role="menu">
+    <div>
       {#each NAV_LINKS as link, i}
         <NavLink {link} />
         {#if i < NAV_LINKS.length - 1}
diff --git a/svelte-app/src/components/headings/headed-block.svelte b/svelte-app/src/components/headings/headed-block.svelte
index 96547faef..3edd2db4a 100644
--- a/svelte-app/src/components/headings/headed-block.svelte
+++ b/svelte-app/src/components/headings/headed-block.svelte
@@ -9,6 +9,8 @@
 </section>
 
 <style lang="scss">
+  @import '@styles/mixins';
+
   h1 {
     @apply mb-2 mt-8 font-code text-2xl font-black;
   }
@@ -18,12 +20,8 @@
 
     div {
       @apply mx-1 font-sans text-base text-dark/90;
-    }
-  }
 
-  :global(.dark) {
-    section {
-      div {
+      @include dark {
         @apply text-light/90;
       }
     }
diff --git a/svelte-app/src/components/lists/document-list.svelte b/svelte-app/src/components/lists/document-list.svelte
new file mode 100644
index 000000000..f92297ca4
--- /dev/null
+++ b/svelte-app/src/components/lists/document-list.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import ListItem from '$components/lists/list-item.svelte';
+
+  import type { PostDocument, ProjectDocument } from '$types';
+
+  export let documents: (ProjectDocument | PostDocument)[];
+</script>
+
+<div>
+  {#each documents as document}
+    <ListItem {document} />
+  {/each}
+</div>
+
+<style lang="scss">
+  div {
+    @apply flex w-full flex-col gap-7 pt-5;
+  }
+</style>
diff --git a/svelte-app/src/components/lists/list-item.svelte b/svelte-app/src/components/lists/list-item.svelte
index 965260e56..40711595e 100644
--- a/svelte-app/src/components/lists/list-item.svelte
+++ b/svelte-app/src/components/lists/list-item.svelte
@@ -19,38 +19,63 @@
 <Hoverable let:hovered>
   <a
     href={$linkTo(link)}
-    class="focusOutline w-full rounded-md"
+    class:small
     tabindex="0"
     data-sveltekit-preload-code
     data-sveltekit-preload-data
   >
-    <div
-      class="mt-0.5 flex flex-row items-center justify-start gap-3 font-mono text-sm text-dark/80 transition-colors dark:text-light/80 {small
-        ? 'mb-1.5'
-        : 'mb-2'}"
-    >
+    <div>
       <p aria-label={$t('Date posted')}>
-        {$formatDate(document.date || document._createdAt, small ? 'med' : 'short')}
+        {$formatDate(document.date || document._createdAt, 'med')}
       </p>
       {#if document.tags?.length}
-        <span
-          class="rounded-sm bg-dark/10 px-1.5 py-0.5 font-code text-sm transition-colors dark:bg-light/10"
-          >{document.tags[0].title.toLowerCase()}</span
-        >
+        <span>{document.tags[0].title.toLowerCase()}</span>
       {/if}
       <p>{$t('{views} views', { views: $parseViews((document.views ?? 0) + 1) })}</p>
     </div>
 
-    <h1
-      class="min-w-fit font-medium decoration-accent-light decoration-[3px] underline-offset-4 transition-colors dark:decoration-accent-dark {small
-        ? 'text-lg decoration-2 underline-offset-2'
-        : 'text-xl decoration-[3px] underline-offset-4'}"
-      class:underline={hovered}
-    >
-      {document.title}
-    </h1>
-    {#if document.desc?.length && !small}
-      <p class="mt-2 line-clamp-1 text-base">{document.desc}</p>
-    {/if}
+    <h1 class:underline={hovered}>{document.title}</h1>
   </a>
 </Hoverable>
+
+<style lang="scss">
+  @import '@styles/mixins';
+
+  a {
+    @apply w-full rounded-md;
+
+    @include focus-state;
+  }
+
+  div {
+    @apply flex flex-row items-center justify-start gap-3 pb-2 pt-0.5 font-mono text-sm text-dark/80 transition-colors;
+
+    @include dark {
+      @apply text-light/80;
+    }
+
+    .small & {
+      @apply pb-1.5;
+    }
+
+    span {
+      @apply rounded-sm bg-dark/10 px-1.5 py-0.5 font-code text-sm transition-colors;
+
+      @include dark {
+        @apply bg-light/10;
+      }
+    }
+  }
+
+  h1 {
+    @apply min-w-fit text-xl font-bold decoration-accent-light decoration-[3px] underline-offset-4 transition-colors;
+
+    @include dark {
+      @apply decoration-accent-dark;
+    }
+
+    .small & {
+      @apply text-lg decoration-2 underline-offset-2;
+    }
+  }
+</style>
diff --git a/svelte-app/src/components/lists/year-list.svelte b/svelte-app/src/components/lists/year-list.svelte
deleted file mode 100644
index d13011ae4..000000000
--- a/svelte-app/src/components/lists/year-list.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-  import { sortDocumentsByYear } from '$lib/date';
-
-  import ListItem from '$components/lists/list-item.svelte';
-
-  import type { PostDocument, ProjectDocument } from '$types';
-
-  export let documents: (ProjectDocument | PostDocument)[];
-
-  const sortedDocuments = sortDocumentsByYear(documents);
-</script>
-
-<div class="year-list-wrapper">
-  {#each sortedDocuments as object}
-    <section>
-      <h1>{object.year}</h1>
-      <div>
-        {#each object.items as item}
-          <ListItem document={item} />
-        {/each}
-      </div>
-    </section>
-  {/each}
-</div>
-
-<style lang="scss">
-  @import '@styles/mixins';
-
-  .year-list-wrapper {
-    @apply mt-8 flex flex-col gap-10;
-  }
-
-  section {
-    @apply flex flex-col items-start justify-start gap-3;
-
-    h1 {
-      @apply min-w-[5rem] font-code text-3xl font-black transition-colors;
-    }
-
-    div {
-      @apply ml-1 mt-1 flex flex-col items-start justify-start gap-6;
-
-      @include media(md) {
-        @apply ml-0;
-      }
-    }
-
-    @include media(md) {
-      @apply flex-row;
-    }
-  }
-</style>
diff --git a/svelte-app/src/components/tooltips/inner.svelte b/svelte-app/src/components/tooltips/inner.svelte
index a3e1182dd..2c1eb1f1a 100644
--- a/svelte-app/src/components/tooltips/inner.svelte
+++ b/svelte-app/src/components/tooltips/inner.svelte
@@ -7,6 +7,9 @@
 
   import type { Tooltip } from '$lib/tooltips';
 
+  const PADDING_PX = 8,
+    MAX_LENGTH = 72;
+
   export let id: Tooltip['id'],
     content: Tooltip['content'],
     duration: Tooltip['duration'],
@@ -111,6 +114,20 @@
         break;
     }
 
+    // if x-pos will result in tooltip being off-screen, adjust it
+    if (x + tooltipRect.width > innerWidth + pageScroll.x - PADDING_PX) {
+      x = innerWidth + pageScroll.x - tooltipRect.width - PADDING_PX;
+    } else if (x < PADDING_PX) {
+      x = PADDING_PX;
+    }
+
+    // same for height
+    if (y + tooltipRect.height > innerHeight + pageScroll.y - PADDING_PX) {
+      y = innerHeight + pageScroll.y - tooltipRect.height - PADDING_PX;
+    } else if (y < PADDING_PX) {
+      y = PADDING_PX;
+    }
+
     position = {
       x: Math.max(0, Math.min(innerWidth + pageScroll.x, x + offset[0])),
       y: Math.max(0, Math.min(innerHeight + pageScroll.y, y + offset[1]))
@@ -123,19 +140,23 @@
 
 <div {style} class="tooltip" id={`tooltip-${id}`} bind:this={tooltipElement}>
   <span class="tooltip-content" transition:fade={{ duration, easing: cubicInOut }}>
-    {content}
+    {content.trim().length >= MAX_LENGTH
+      ? `${content.trim().slice(0, MAX_LENGTH - 3)}...`
+      : content.trim()}
   </span>
 </div>
 
 <style lang="scss">
+  @import '@styles/mixins';
+
   div {
     @apply pointer-events-none absolute z-50;
   }
 
   span {
-    @apply block max-w-56 rounded-sm bg-black px-2 py-1 font-code text-sm text-light;
+    @apply block whitespace-nowrap rounded-sm bg-black px-2 py-1 font-code text-sm text-light;
 
-    :global(.dark) & {
+    @include dark {
       @apply bg-light text-dark;
     }
   }
diff --git a/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte
index c0eea9e60..8dcd4fd19 100644
--- a/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte
@@ -4,7 +4,7 @@
 
   import EmptyContent from '$components/empty-content.svelte';
   import HeadedBlock from '$components/headings/headed-block.svelte';
-  import YearList from '$components/lists/year-list.svelte';
+  import DocumentList from '$components/lists/document-list.svelte';
 
   export let data;
 
@@ -26,7 +26,7 @@
 
 <HeadedBlock heading={$t('Recent thoughts')}>
   {#if data.posts.length}
-    <YearList documents={data.posts} />
+    <DocumentList documents={data.posts} />
   {:else}
     <EmptyContent />
   {/if}
diff --git a/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
index 6aba654b6..4e556eb3e 100644
--- a/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
@@ -6,7 +6,7 @@
   import Divider from '$components/divider.svelte';
   import EmptyContent from '$components/empty-content.svelte';
   import HeadedBlock from '$components/headings/headed-block.svelte';
-  import YearList from '$components/lists/year-list.svelte';
+  import DocumentList from '$components/lists/document-list.svelte';
 
   export let data;
 
@@ -42,7 +42,7 @@
 
 <HeadedBlock heading={$t('Projects')}>
   {#if data.projects.length}
-    <YearList documents={data.projects} />
+    <DocumentList documents={data.projects} />
   {:else}
     <EmptyContent />
   {/if}
diff --git a/svelte-app/src/styles/_colors.scss b/svelte-app/src/styles/_colors.scss
index 5e4c69090..4fe677ad8 100644
--- a/svelte-app/src/styles/_colors.scss
+++ b/svelte-app/src/styles/_colors.scss
@@ -1,7 +1,7 @@
 $black: #171c22;
 $white: #f5f5f5;
 $dark: #242b33;
-$light: #efefef;
+$light: #f2f2f2;
 
-$accent-light: #3b75f5;
+$accent-light: #1e65e1;
 $accent-dark: #affa71;
diff --git a/svelte-app/tailwind.config.cjs b/svelte-app/tailwind.config.cjs
index 1964f240d..1b6b894c8 100644
--- a/svelte-app/tailwind.config.cjs
+++ b/svelte-app/tailwind.config.cjs
@@ -10,9 +10,9 @@ module.exports = {
         black: '#171c22',
         white: '#f5f5f5',
         dark: '#242b33',
-        light: '#efefef',
+        light: '#f2f2f2',
         accent: {
-          light: '#3b75f5',
+          light: '#1e65e1',
           dark: '#affa71'
         }
       },