docs: improve accessibility

This commit is contained in:
Benjamin Canac
2023-09-11 11:25:23 +02:00
parent 87fd85ec3f
commit bc2315b7d9
5 changed files with 8 additions and 10 deletions

View File

@@ -56,7 +56,7 @@ const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
// Head // Head
useHead({ useHead({
meta: [ 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 } { key: 'theme-color', name: 'theme-color', content: color }
], ],
link: [ link: [

View File

@@ -1,7 +1,7 @@
<template> <template>
<UPopover mode="hover"> <UPopover mode="hover">
<template #default="{ open }"> <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" /> <UIcon name="i-heroicons-swatch-20-solid" class="w-5 h-5 text-primary-500 dark:text-primary-400" />
</UButton> </UButton>
</template> </template>

View File

@@ -2,8 +2,7 @@
const links = [{ const links = [{
avatar: { avatar: {
src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/benjamincanac', 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', label: 'benjamincanac',
to: 'https://github.com/benjamincanac', to: 'https://github.com/benjamincanac',
@@ -11,8 +10,7 @@ const links = [{
}, { }, {
avatar: { avatar: {
src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/Atinux', 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', label: 'Atinux',
to: 'https://github.com/Atinux', to: 'https://github.com/Atinux',
@@ -20,8 +18,7 @@ const links = [{
}, { }, {
avatar: { avatar: {
src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/smarroufin', 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', label: 'smarroufin',
to: 'https://github.com/smarroufin', to: 'https://github.com/smarroufin',

View File

@@ -2,7 +2,7 @@
<Transition appear name="fade"> <Transition appear name="fade">
<ULandingGrid class="lg:grid-cols-10 lg:gap-8"> <ULandingGrid class="lg:grid-cols-10 lg:gap-8">
<div class="col-span-8 flex items-center"> <div class="col-span-8 flex items-center">
<RangeExample /> <RangeExample aria-label="Range" />
</div> </div>
<div class="col-span-2 row-span-2 flex items-center"> <div class="col-span-2 row-span-2 flex items-center">

View File

@@ -19,6 +19,7 @@
autocomplete="off" autocomplete="off"
icon="i-heroicons-command-line" icon="i-heroicons-command-line"
input-class="select-none" input-class="select-none"
aria-label="Install @nuxt/ui"
size="lg" size="lg"
:ui="{ base: 'disabled:cursor-default', icon: { trailing: { pointer: '' } } }" :ui="{ base: 'disabled:cursor-default', icon: { trailing: { pointer: '' } } }"
> >
@@ -149,7 +150,7 @@
height="40" height="40"
size="md" 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" /> <span class="absolute inset-0" aria-hidden="true" />
</NuxtLink> </NuxtLink>
</UAvatar> </UAvatar>