From bc2315b7d96e2eb7a5accd6a613ad41a463291c4 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 11 Sep 2023 11:25:23 +0200
Subject: [PATCH] docs: improve accessibility

---
 docs/app.vue                                             | 2 +-
 docs/components/color-picker/ColorPicker.vue             | 2 +-
 .../examples/VerticalNavigationExampleAvatarSlot.vue     | 9 +++------
 docs/components/home/HomeDemo.vue                        | 2 +-
 docs/pages/index.vue                                     | 3 ++-
 5 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/docs/app.vue b/docs/app.vue
index dffcddaf..eddd110e 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -56,7 +56,7 @@ const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
 // Head
 useHead({
   meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' },
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
     { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [
diff --git a/docs/components/color-picker/ColorPicker.vue b/docs/components/color-picker/ColorPicker.vue
index f33d04af..8a1bfb1c 100644
--- a/docs/components/color-picker/ColorPicker.vue
+++ b/docs/components/color-picker/ColorPicker.vue
@@ -1,7 +1,7 @@
 <template>
   <UPopover mode="hover">
     <template #default="{ open }">
-      <UButton color="gray" variant="ghost" square :class="[open && 'bg-gray-50 dark:bg-gray-800']">
+      <UButton color="gray" variant="ghost" square :class="[open && 'bg-gray-50 dark:bg-gray-800']" aria-label="Color picker">
         <UIcon name="i-heroicons-swatch-20-solid" class="w-5 h-5 text-primary-500 dark:text-primary-400" />
       </UButton>
     </template>
diff --git a/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue b/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
index a39b471d..9d0c35c9 100644
--- a/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
+++ b/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
@@ -2,8 +2,7 @@
 const links = [{
   avatar: {
     src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/benjamincanac',
-    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x',
-    alt: 'benjamincanac'
+    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x'
   },
   label: 'benjamincanac',
   to: 'https://github.com/benjamincanac',
@@ -11,8 +10,7 @@ const links = [{
 }, {
   avatar: {
     src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/Atinux',
-    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x',
-    alt: 'Atinux'
+    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x'
   },
   label: 'Atinux',
   to: 'https://github.com/Atinux',
@@ -20,8 +18,7 @@ const links = [{
 }, {
   avatar: {
     src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/smarroufin',
-    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x',
-    alt: 'smarroufin'
+    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x'
   },
   label: 'smarroufin',
   to: 'https://github.com/smarroufin',
diff --git a/docs/components/home/HomeDemo.vue b/docs/components/home/HomeDemo.vue
index b5bb0b80..9eaed9d2 100644
--- a/docs/components/home/HomeDemo.vue
+++ b/docs/components/home/HomeDemo.vue
@@ -2,7 +2,7 @@
   <Transition appear name="fade">
     <ULandingGrid class="lg:grid-cols-10 lg:gap-8">
       <div class="col-span-8 flex items-center">
-        <RangeExample />
+        <RangeExample aria-label="Range" />
       </div>
 
       <div class="col-span-2 row-span-2 flex items-center">
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index 38d3ccfa..428f885e 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -19,6 +19,7 @@
           autocomplete="off"
           icon="i-heroicons-command-line"
           input-class="select-none"
+          aria-label="Install @nuxt/ui"
           size="lg"
           :ui="{ base: 'disabled:cursor-default', icon: { trailing: { pointer: '' } } }"
         >
@@ -149,7 +150,7 @@
                   height="40"
                   size="md"
                 >
-                  <NuxtLink :to="`https://github.com/${contributor.username}`" target="_blank" class="focus:outline-none" tabindex="-1">
+                  <NuxtLink :to="`https://github.com/${contributor.username}`" :aria-label="contributor.username" target="_blank" class="focus:outline-none" tabindex="-1">
                     <span class="absolute inset-0" aria-hidden="true" />
                   </NuxtLink>
                 </UAvatar>