From 29b70afd48d8cdfbbca3850fa344288c33b3c004 Mon Sep 17 00:00:00 2001
From: Marios Antonoudiou <m.antonoudiou@celonis.com>
Date: Mon, 4 Dec 2023 17:12:00 +0200
Subject: [PATCH] chore: add accessibility enhancements

---
 app.vue                     | 3 +++
 components/company.vue      | 5 +++++
 components/introduction.vue | 1 +
 3 files changed, 9 insertions(+)

diff --git a/app.vue b/app.vue
index 5178736..60e722f 100644
--- a/app.vue
+++ b/app.vue
@@ -10,6 +10,9 @@ useSeoMeta({
 });
 
 useHead({
+  htmlAttrs: {
+    lang: "en",
+  },
   bodyAttrs: {
     class: "dark:bg-slate-900",
   },
diff --git a/components/company.vue b/components/company.vue
index 747e728..22375b4 100644
--- a/components/company.vue
+++ b/components/company.vue
@@ -5,6 +5,9 @@ interface Props {
 }
 
 const props = defineProps<Props>();
+
+const titleRef = ref();
+const altContent = computed(() => titleRef.value?.$el.textContent);
 </script>
 
 <template>
@@ -13,6 +16,7 @@ const props = defineProps<Props>();
       <NuxtImg
         placeholder
         :src="props.logo"
+        :alt="altContent"
         class="block rounded min-w-[50px]"
         format="webp"
         height="50"
@@ -25,6 +29,7 @@ const props = defineProps<Props>();
         :href="props.href"
         target="_blank"
         class="md:text-xl text-lg font-semibold hover:underline hover:underline-offset-4"
+        ref="titleRef"
       >
         <slot name="title">Company</slot>
       </NuxtLink>
diff --git a/components/introduction.vue b/components/introduction.vue
index 9538709..911a642 100644
--- a/components/introduction.vue
+++ b/components/introduction.vue
@@ -2,6 +2,7 @@
   <UContainer class="flex flex-col md:gap-12 gap-5">
     <nuxt-img
       placeholder
+      alt="Marios Antonoudiou"
       src="mariosant.webp"
       width="64"
       height="64"