fix: A11y issues, list styles, colour contrast issues

kiosion · Mar 1, 2024 · d371320 · d371320
1 parent b583723
commit d371320
Show file tree

Hide file tree

Showing 15 changed files with 144 additions and 129 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
-Original file line number
+Diff line change
@@ Expand Up / @@ -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 {
@@ Expand Down @@