mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
docs: improve accessibility
This commit is contained in:
@@ -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: [
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user