Merge pull request #32 from LucasSteer/a11y_polish

Accessibility polish and refinement

.eslintrc.json

@@ -14,5 +14,17 @@
     "ecmaVersion": "latest"
   },
   "plugins": ["vue"],
-  "rules": {}
+  "rules": {
+    "vue/no-multiple-template-root": 0
+  },
+  "overrides": [
+    {
+      "files": ["**/pages/**/*.{js,ts,jsx,tsx,vue}", "error.vue"],
+      "rules": { "vue/multi-word-component-names": "off" }
+    }
+  ],
+  "globals": {
+    "useHead": false,
+    "definePageMeta": false
+  }
 }

assets/css/main.css

@@ -39,7 +39,6 @@
   }
 
   * {
-    font-size: 16px;
     @apply font-hyperlegible;
   }
 

components/ExperienceCard.vue

@@ -26,7 +26,7 @@
             />
             <div class="ml-4 tablet:ml-8">
               <p
-                class="text-2xl tracking-widest font-bold text-green-baseLarge dark:text-greenDarkMode-baseLarge"
+                class="text-2xl tablet:text-3xl tracking-widest font-bold text-green-baseLarge dark:text-greenDarkMode-baseLarge"
               >
                 {{ company }}
                 <span
@@ -57,7 +57,7 @@
       </button>
     </h2>
     <AccordionWrapper :id="accordionId">
-      <div class="px-4" v-if="isExpanded">
+      <div class="px-4" v-show="isExpanded">
         <div
           class="mx-4 mt-4 flex flex-col gap-2 tablet:flex-row tablet:items-center tablet:justify-between"
         >
@@ -70,9 +70,7 @@
               stroke-linejoin="round"
               stroke-width="6"
               class="stroke-green-highlight forced-colors:stroke-systemColors-Highlight dark:stroke-greenDarkMode-base h-7 tablet:h-8"
-              role="img"
             >
-              <title>Location Icon</title>
               <path d="m 50 10 c -30 0 -40 40 0 80 c 40 -40 30 -80 0 -80" />
               <circle cx="50" cy="40" r="10" />
             </svg>

components/InlineLink.vue

@@ -0,0 +1,20 @@
+<template>
+  <a
+    :href="url"
+    class="font-bold tracking-wide underline-offset-2 text-blue-base forced-colors:text-systemColors-LinkText forced-colors:hover:text-systemColors-LinkText forced-colors:focus:text-systemColors-LinkText hover:text-blue-highlight underline hover:decoration-2 focus:text-blue-highlight focus:decoration-2 dark:text-blueDarkMode-base dark:hover:text-blueDarkMode-highlight dark:focus:text-blueDarkMode-highlight"
+  >
+    <slot />
+  </a>
+</template>
+
+<script>
+export default {
+  name: 'InlineLink',
+  props: {
+    url: {
+      type: String,
+      default: '/',
+    },
+  },
+};
+</script>

components/NavLink.vue

@@ -1,8 +1,8 @@
 <template>
   <a
-    class="font-bold transition duration-200 ease-in-out forced-colors:transition-none forced-colors:text-systemColors-LinkText forced-colors:hover:text-systemColors-LinkText forced-colors:focus:text-systemColors-LinkText hover:text-green-highlightLarge dark:hover:text-greenDarkMode-highlightLarge hover:underline focus:text-green-highlightLarge dark:focus:text-greenDarkMode-highlightLarge focus:underline text-2xl tablet:text-3xl tablet:tracking-wider desktop:text-xl"
+    class="font-bold underline decoration-2 decoration-transparent underline-offset-4 transition duration-300 ease-in-out forced-colors:transition-none forced-colors:text-systemColors-LinkText forced-colors:hover:text-systemColors-LinkText forced-colors:focus:text-systemColors-LinkText hover:text-green-highlightLarge dark:hover:text-greenDarkMode-highlightLarge hover:decoration-inherit hover:decoration-4 focus:text-green-highlightLarge dark:focus:text-greenDarkMode-highlightLarge focus:decoration-inherit focus:decoration-4 text-2xl tablet:text-3xl tablet:tracking-wider desktop:text-xl"
     :class="{
-      'text-green-baseLarge forced-colors:text-systemColors-Highlight dark:text-greenDarkMode-baseLarge':
+      'text-green-baseLarge decoration-inherit forced-colors:text-systemColors-Highlight dark:text-greenDarkMode-baseLarge':
         isCurrentPage,
     }"
     :href="url"

components/NavMenu.vue

@@ -1,7 +1,7 @@
 <template>
-  <nav class="justify-self-start h-12 desktop:col-span-3 desktop:h-auto">
+  <nav class="justify-self-start desktop:col-span-3 desktop:h-auto">
     <button
-      class="group px-4 desktop:hidden"
+      class="group flex flex-row items-center gap-1 tablet:gap-2 shadow-card rounded-lg p-2 dark:shadow-none dark:border-2 dark:border-grey-400 hover:bg-grey-50 focus:bg-grey-50 active:bg-grey-100 dark:hover:bg-zinc-700 dark:focus:bg-zinc-700 dark:active:bg-zinc-600 desktop:hidden"
       @click="openNavMenu"
       ref="openNavMenuButton"
       aria-controls="navMenu"
@@ -13,15 +13,19 @@
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-width="6"
-        class="stroke-grey forced-colors:stroke-systemColors-CanvasText dark:stroke-white group-hover:stroke-green-highlight group-focus:stroke-green-highlight forced-colors:group-hover:stroke-systemColors-Highlight forced-colors:group-focus:stroke-systemColors-Highlight dark:group-hover:stroke-greenDarkMode-highlight dark:group-focus:stroke-greenDarkMode-highlight h-12 tablet:h-12"
+        class="h-8 tablet:h-12 stroke-grey forced-colors:stroke-systemColors-CanvasText dark:stroke-white group-hover:stroke-green-highlight group-focus:stroke-green-highlight forced-colors:group-hover:stroke-systemColors-Highlight forced-colors:group-focus:stroke-systemColors-Highlight dark:group-hover:stroke-greenDarkMode-highlight dark:group-focus:stroke-greenDarkMode-highlight"
         role="img"
       >
-        <title>Open Navigation Menu</title>
         <path d="m 10 25 h 80 m -80 25 h 80 m -80 25 h 80" />
       </svg>
+      <span
+        class="text-md tablet:text-xl font-bold tracking-wide group-hover:text-green-highlight group-focus:text-green-highlight forced-colors:group-hover:text-systemColors-Highlight forced-colors:group-focus:text-systemColors-Highlight dark:group-hover:text-greenDarkMode-highlight dark:group-focus:text-greenDarkMode-highlight"
+      >
+        Menu
+      </span>
     </button>
     <div
-      class="flex flex-col fixed inset-0 z-20 gap-12 px-8 pt-4 motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-in-out forced-colors:border-r-2 forced-colors:border-systemColors-ButtonBorder dark:shadow-none dark:border-r-2 dark:border-grey-400 bg-white dark:bg-zinc-800 shadow-card desktop:shadow-none h-screen w-1/2 min-w-80 desktop:static desktop:h-auto desktop:w-auto desktop:px-0 desktop:pt-0 desktop:dark:border-r-0 desktop:forced-colors:border-r-0 desktop:transition-none desktop:translate-x-0"
+      class="flex flex-col fixed inset-0 z-20 overflow-y-auto desktop:overflow-y-hidden gap-12 px-4 pt-4 motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-in-out forced-colors:border-r-2 forced-colors:border-systemColors-ButtonBorder dark:shadow-none dark:border-r-2 dark:border-grey-400 bg-white dark:bg-zinc-800 shadow-card desktop:shadow-none h-screen w-1/2 min-w-80 desktop:static desktop:h-auto desktop:w-auto desktop:px-0 desktop:pt-0 desktop:dark:border-r-0 desktop:forced-colors:border-r-0 desktop:transition-none desktop:translate-x-0"
       :class="{
         '-translate-x-full -z-10 dark:border-r-0 forced-colors:border-r-0 shadow-none':
           !isNavMenuExpanded,
@@ -32,7 +36,7 @@
       @keyup.escape="closeNavMenu"
     >
       <button
-        class="group visible self-start desktop:hidden"
+        class="group visible self-start shadow-card rounded-lg p-2 dark:shadow-none dark:border-2 dark:border-grey-400 hover:bg-grey-50 focus:bg-grey-50 active:bg-grey-100 dark:hover:bg-zinc-700 dark:focus:bg-zinc-700 dark:active:bg-zinc-600 desktop:hidden"
         :class="{ 'invisible desktop:visible': !isNavMenuExpanded }"
         @click="closeNavMenu"
         ref="closeNavMenuButton"
@@ -53,7 +57,7 @@
         </svg>
       </button>
       <ul
-        class="visible flex flex-col gap-6 tablet:gap-12 pl-12 desktop:flex-row desktop:justify-between desktop:pl-0 desktop:gap-7"
+        class="visible flex flex-col gap-6 tablet:gap-12 pl-12 desktop:flex-row desktop:justify-between desktop:px-1 desktop:gap-7"
         :class="{ 'invisible desktop:visible': !isNavMenuExpanded }"
       >
         <li>
@@ -102,7 +106,7 @@ export default {
         return;
       }
 
-      this.isNavMenuExpanded = false;
+      this.closeNavMenu();
     },
     handleTab(event) {
       if (!this.isNavMenuExpanded) return;

components/PageHeader.vue

@@ -0,0 +1,18 @@
+<template>
+  <h1
+    class="text-3xl tablet:text-5xl font-bold tracking-wider w-fit pr-10 tablet:pr-0 tablet:w-2/3 pl-2 py-4 my-4 border-b-2 border-grey-900 dark:border-grey-400 desktop:px-4"
+  >
+    {{ text }}
+  </h1>
+</template>
+
+<script>
+export default {
+  name: 'PageHeader',
+  props: {
+    text: {
+      type: String,
+    },
+  },
+};
+</script>

components/ProjectCard.vue

@@ -1,35 +1,35 @@
 <template>
   <section
-    class="relative overflow-hidden rounded-lg shadow-card forced-colors:border-4 forced-colors:border-systemColors-ButtonBorder dark:shadow-none dark:border-4 dark:border-grey-400"
+    class="group relative cursor-pointer overflow-hidden rounded-lg shadow-card forced-colors:border-4 forced-colors:border-systemColors-ButtonBorder dark:shadow-none dark:border-4 dark:border-grey-400"
+    @click="openLink($event, link)"
   >
-    <ExternalLink
-      :url="link"
-      class="group text-grey dark:text-white hover:text-grey dark:hover:text-white hover:no-underline focus:text-grey dark:focus:text-white focus:no-underline"
+    <img :src="imgSrc" :alt="imgAlt" />
+    <div
+      class="min-h-1/6 w-full tablet:absolute tablet:bottom-0 bg-white dark:bg-zinc-800 forced-colors:group-hover:text-systemColors-SelectedItemText forced-colors:focus-within:text-systemColors-SelectedItemText forced-colors:group-active:text-systemColors-SelectedItemText forced-colors:group-hover:bg-systemColors-SelectedItem forced-colors:focus-within:bg-systemColors-SelectedItem forced-colors:group-active:bg-systemColors-SelectedItem group-hover:bg-grey-50 focus-within:bg-grey-50 group-active:bg-grey-100 dark:group-hover:bg-zinc-700 dark:focus-within:bg-zinc-700 dark:group-active:bg-zinc-600 px-4 pt-2 pb-8 tablet:px-8 tablet:pt-3 tablet:pb-10"
     >
-      <img :src="imgSrc" :alt="imgAlt" class="h-full w-full" />
-      <div
-        class="min-h-1/6 w-full absolute bottom-0 flex flex-col justify-center gap-2 bg-white dark:bg-zinc-800 forced-colors:group-hover:text-systemColors-SelectedItemText forced-colors:group-focus:text-systemColors-SelectedItemText forced-colors:group-active:text-systemColors-SelectedItemText forced-colors:group-hover:bg-systemColors-SelectedItem forced-colors:group-focus:bg-systemColors-SelectedItem forced-colors:group-active:bg-systemColors-SelectedItem group-hover:bg-grey-50 group-focus:bg-grey-50 group-active:bg-grey-100 dark:group-hover:bg-zinc-700 dark:group-focus:bg-zinc-700 dark:group-active:bg-zinc-600 px-4 pt-2 pb-8 tablet:px-8 tablet:pt-3 tablet:pb-10"
-      >
+      <InlineLink :url="link" class="group/link no-underline">
         <h2
-          class="text-xl tracking-widest text-green-baseLarge dark:text-greenDarkMode-baseLarge tablet:text-2xl desktop:text-4xl"
+          ref="cardTitle"
+          class="inline text-xl underline decoration-2 underline-offset-4 group-hover:decoration-4 group-focus/link:decoration-4 tracking-widest text-blue-baseLarge dark:text-blueDarkMode-baseLarge tablet:text-3xl desktop:text-4xl"
         >
           {{ title }}
         </h2>
-        <h3
-          class="text-sm tracking-wider tablet:text-base tablet:leading-8 desktop:text-xl"
+      </InlineLink>
+      <p
+        class="text-sm tracking-wider my-2 tablet:text-base tablet:leading-8 desktop:text-xl"
+      >
+        {{ subtitle }}
+      </p>
+      <ul class="mt-4 flex flex-row flex-wrap gap-4">
+        <li
+          v-for="(tag, index) in tags"
+          :key="index"
+          class="rounded-md bg-primary-base forced-colors:border-2 forced-colors:border-systemColors-ButtonBorder dark:bg-primaryDarkMode-base font-normal forced-colors:group-focus:text-systemColors-SelectedItemText forced-colors:group-focus:bg-systemColors-SelectedItem dark:font-bold tracking-wide p-2 align-middle leading-4 text-white dark:text-grey tablet:text-lg tablet:leading-4 desktop:text-xl"
         >
-          {{ subtitle }}
-        </h3>
-        <div class="mt-4 flex flex-row flex-wrap gap-4">
-          <span
-            v-for="(tag, index) in tags"
-            :key="index"
-            class="rounded-md bg-primary-base forced-colors:border-2 forced-colors:border-systemColors-ButtonBorder dark:bg-primaryDarkMode-base font-normal forced-colors:group-hover:text-systemColors-SelectedItemText forced-colors:group-focus:text-systemColors-SelectedItemText forced-colors:group-active:text-systemColors-SelectedItemText forced-colors:group-hover:bg-systemColors-SelectedItem forced-colors:group-focus:bg-systemColors-SelectedItem forced-colors:group-active:bg-systemColors-SelectedItem dark:font-bold tracking-wide p-2 align-middle leading-4 text-white dark:text-grey tablet:text-lg tablet:leading-4 desktop:text-xl"
-            >{{ tag }}</span
-          >
-        </div>
-      </div>
-    </ExternalLink>
+          {{ tag }}
+        </li>
+      </ul>
+    </div>
   </section>
 </template>
 
@@ -64,5 +64,13 @@ export default {
       },
     },
   },
+  methods: {
+    openLink(event, url) {
+      if (this.$refs.cardTitle === event.target) return;
+
+      event.preventDefault();
+      location.href = url;
+    },
+  },
 };
 </script>

components/ThemeSwitcher.vue

@@ -5,23 +5,26 @@
       @click="toggleThemeSwitcher"
       aria-controls="themeSwitcher"
       :aria-expanded="isExpanded ? 'true' : 'false'"
-      class="group"
+      class="group flex flex-row items-center gap-1 tablet:gap-2 shadow-card rounded-lg p-2 dark:shadow-none dark:border-2 dark:border-grey-400 hover:bg-grey-50 focus:bg-grey-50 active:bg-grey-100 dark:hover:bg-zinc-700 dark:focus:bg-zinc-700 dark:active:bg-zinc-600"
     >
       <svg
         :viewBox="themeIconViewboxList[selectedTheme]"
-        class="h-12 stroke-none fill-grey forced-colors:fill-systemColors-CanvasText dark:fill-white group-hover:fill-green-highlight group-focus:fill-green-highlight forced-colors:group-hover:fill-systemColors-Highlight forced-colors:group-focus:fill-systemColors-Highlight dark:group-hover:fill-greenDarkMode-highlight dark:group-focus:fill-greenDarkMode-highlight"
+        class="h-8 w-8 tablet:h-12 tablet:w-12 stroke-none fill-grey forced-colors:fill-systemColors-CanvasText dark:fill-white group-hover:fill-green-highlight group-focus:fill-green-highlight forced-colors:group-hover:fill-systemColors-Highlight forced-colors:group-focus:fill-systemColors-Highlight dark:group-hover:fill-greenDarkMode-highlight dark:group-focus:fill-greenDarkMode-highlight"
       >
-        <title>
-          Toggle theme switcher menu - {{ selectedTheme }} theme icon
-        </title>
         <use :xlink:href="`/icons/${selectedTheme}ThemeIcon.svg#svg5`"></use>
       </svg>
+      <span
+        class="text-md tablet:text-xl font-bold tracking-wide group-hover:text-green-highlight group-focus:text-green-highlight forced-colors:group-hover:text-systemColors-Highlight forced-colors:group-focus:text-systemColors-Highlight dark:group-hover:text-greenDarkMode-highlight dark:group-focus:text-greenDarkMode-highlight"
+      >
+        Set Theme
+        <span class="sr-only"> {{ selectedTheme }} theme active </span>
+      </span>
     </button>
     <fieldset
       ref="themeSwitcher"
       id="themeSwitcher"
       v-if="isExpanded"
-      class="absolute mt-4 z-10 right-5 flex flex-col shadow-card rounded-lg forced-colors:border-2 forced-colors:border-systemColors-ButtonBorder dark:shadow-none dark:border-2 dark:border-grey-400 bg-white dark:bg-zinc-800"
+      class="absolute mt-8 z-10 right-4 desktop:right-8 flex flex-col shadow-card rounded-lg forced-colors:border-2 forced-colors:border-systemColors-ButtonBorder dark:shadow-none dark:border-2 dark:border-grey-400 bg-white dark:bg-zinc-800"
     >
       <label
         for="system"
@@ -234,7 +237,7 @@ export default {
         ? localStorage.selectedTheme
         : 'system',
       themeIconViewboxList: {
-        system: '-50 -50 534.92682 534.9278',
+        system: '-20 -20 470 470',
         light: '0 0 561.66656 561.66669',
         dark: '-50 -50 388.37381 395.4344',
       },