From 5d661558850f799ed93cc78d8a80cb0571ff6612 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 7 Sep 2023 17:51:02 +0200
Subject: [PATCH] docs: improve accessibility

---
 docs/components/Header.vue                               | 4 ++--
 .../examples/VerticalNavigationExampleAvatarSlot.vue     | 9 ++++++---
 docs/pages/index.vue                                     | 6 +++---
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/docs/components/Header.vue b/docs/components/Header.vue
index cfb45a8b..bc6153d4 100644
--- a/docs/components/Header.vue
+++ b/docs/components/Header.vue
@@ -7,7 +7,7 @@
     }"
   >
     <template #left>
-      <NuxtLink to="/" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
+      <NuxtLink to="/" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white" aria-label="Nuxt UI">
         <Logo class="w-auto h-6" />
       </NuxtLink>
     </template>
@@ -23,7 +23,7 @@
 
       <UColorModeButton v-if="!$colorMode.forced" />
 
-      <USocialButton to="https://github.com/nuxt/ui" target="_blank" icon="i-simple-icons-github" class="hidden lg:inline-flex" />
+      <USocialButton to="https://github.com/nuxt/ui" target="_blank" icon="i-simple-icons-github" aria-label="GitHub" class="hidden lg:inline-flex" />
     </template>
 
     <template #panel>
diff --git a/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue b/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
index 9d0c35c9..a39b471d 100644
--- a/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
+++ b/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
@@ -2,7 +2,8 @@
 const links = [{
   avatar: {
     src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/benjamincanac',
-    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x'
+    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x',
+    alt: 'benjamincanac'
   },
   label: 'benjamincanac',
   to: 'https://github.com/benjamincanac',
@@ -10,7 +11,8 @@ const links = [{
 }, {
   avatar: {
     src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/Atinux',
-    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x'
+    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x',
+    alt: 'Atinux'
   },
   label: 'Atinux',
   to: 'https://github.com/Atinux',
@@ -18,7 +20,8 @@ const links = [{
 }, {
   avatar: {
     src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/smarroufin',
-    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x'
+    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x',
+    alt: 'smarroufin'
   },
   label: 'smarroufin',
   to: 'https://github.com/smarroufin',
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index 9f692981..f3df8127 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ULandingHero v-bind="page.hero" :ui="{ base: 'relative z-[1]' }" class="mb-[calc(var(--header-height)*2)]">
+    <ULandingHero v-bind="page.hero" :ui="{ base: 'relative z-[1]', container: 'max-w-3xl' }" class="mb-[calc(var(--header-height)*2)]">
       <template #title>
         <span v-html="page.hero?.title" />
       </template>
@@ -71,7 +71,7 @@
             class="flex flex-col"
           >
             <div v-if="feature.image">
-              <UColorModeImage :light="`${feature.image}-light.svg`" :dark="`${feature.image}-dark.svg`" class="object-cover w-full" />
+              <UColorModeImage :light="`${feature.image}-light.svg`" :dark="`${feature.image}-dark.svg`" :alt="feature.title" class="object-cover w-full" />
             </div>
           </ULandingCard>
         </ULandingGrid>
@@ -85,7 +85,7 @@
             :to="category.to"
             class="hover:bg-gradient-to-b hover:from-gray-200/50 dark:hover:from-gray-800/50 rounded-lg"
           >
-            <UColorModeImage :light="`${category.image}-light.svg`" :dark="`${category.image}-dark.svg`" class="object-cover w-full" />
+            <UColorModeImage :light="`${category.image}-light.svg`" :dark="`${category.image}-dark.svg`" :alt="category.label" class="object-cover w-full" />
 
             <div class="flex items-center justify-center gap-2 mt-1 mb-2">
               <span class="font-semibold text-lg">{{ category.label }}</span>