arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-29 03:10:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: improve accessibility

Browse Source
This commit is contained in:
Benjamin Canac
2023-09-07 17:51:02 +02:00
parent 02f3164af3
commit 5d66155885
3 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/components/Header.vue
View File

@@ -7,7 +7,7 @@
}" }"
> >
<template #left> <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" /> <Logo class="w-auto h-6" />
</NuxtLink> </NuxtLink>
</template> </template>
@@ -23,7 +23,7 @@
<UColorModeButton v-if="!$colorMode.forced" /> <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>
<template #panel> <template #panel>

9
docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
View File

@@ -2,7 +2,8 @@
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',
@@ -10,7 +11,8 @@ 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',
@@ -18,7 +20,8 @@ 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',

6
docs/pages/index.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <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> <template #title>
<span v-html="page.hero?.title" /> <span v-html="page.hero?.title" />
</template> </template>
@@ -71,7 +71,7 @@
class="flex flex-col" class="flex flex-col"
> >
<div v-if="feature.image"> <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> </div>
</ULandingCard> </ULandingCard>
</ULandingGrid> </ULandingGrid>
@@ -85,7 +85,7 @@
:to="category.to" :to="category.to"
class="hover:bg-gradient-to-b hover:from-gray-200/50 dark:hover:from-gray-800/50 rounded-lg" 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"> <div class="flex items-center justify-center gap-2 mt-1 mb-2">
<span class="font-semibold text-lg">{{ category.label }}</span> <span class="font-semibold text-lg">{{ category.label }}</span>