chore: add accessibility enhancements
This commit is contained in:
3
app.vue
3
app.vue
@@ -10,6 +10,9 @@ useSeoMeta({
|
|||||||
});
|
});
|
||||||
|
|
||||||
useHead({
|
useHead({
|
||||||
|
htmlAttrs: {
|
||||||
|
lang: "en",
|
||||||
|
},
|
||||||
bodyAttrs: {
|
bodyAttrs: {
|
||||||
class: "dark:bg-slate-900",
|
class: "dark:bg-slate-900",
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -5,6 +5,9 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const props = defineProps<Props>();
|
const props = defineProps<Props>();
|
||||||
|
|
||||||
|
const titleRef = ref();
|
||||||
|
const altContent = computed(() => titleRef.value?.$el.textContent);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -13,6 +16,7 @@ const props = defineProps<Props>();
|
|||||||
<NuxtImg
|
<NuxtImg
|
||||||
placeholder
|
placeholder
|
||||||
:src="props.logo"
|
:src="props.logo"
|
||||||
|
:alt="altContent"
|
||||||
class="block rounded min-w-[50px]"
|
class="block rounded min-w-[50px]"
|
||||||
format="webp"
|
format="webp"
|
||||||
height="50"
|
height="50"
|
||||||
@@ -25,6 +29,7 @@ const props = defineProps<Props>();
|
|||||||
:href="props.href"
|
:href="props.href"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="md:text-xl text-lg font-semibold hover:underline hover:underline-offset-4"
|
class="md:text-xl text-lg font-semibold hover:underline hover:underline-offset-4"
|
||||||
|
ref="titleRef"
|
||||||
>
|
>
|
||||||
<slot name="title">Company</slot>
|
<slot name="title">Company</slot>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
<UContainer class="flex flex-col md:gap-12 gap-5">
|
<UContainer class="flex flex-col md:gap-12 gap-5">
|
||||||
<nuxt-img
|
<nuxt-img
|
||||||
placeholder
|
placeholder
|
||||||
|
alt="Marios Antonoudiou"
|
||||||
src="mariosant.webp"
|
src="mariosant.webp"
|
||||||
width="64"
|
width="64"
|
||||||
height="64"
|
height="64"
|
||||||
|
|||||||
Reference in New Issue
Block a user