feat(FormField): set aria-describedby and aria-invalid attributes (#3123)

This commit is contained in:
Romain Hamel
2025-01-20 11:46:09 +01:00
committed by GitHub
parent b8d99726ef
commit b95b91391a
21 changed files with 275 additions and 135 deletions

View File

@@ -40,7 +40,7 @@ exports[`FormField > renders with description slot correctly 1`] = `
"<div class="text-sm">
<div class="">
<!--v-if-->
<p class="text-[var(--ui-text-muted)]">Description slot</p>
<p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Description slot</p>
</div>
<div class="mt-1 relative">
<!--v-if-->
@@ -55,7 +55,7 @@ exports[`FormField > renders with error correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<p class="mt-2 text-[var(--ui-error)]">Username is already taken</p>
<p id="v-0-0-error" class="mt-2 text-[var(--ui-error)]">Username is already taken</p>
</div>
</div>"
`;
@@ -67,7 +67,7 @@ exports[`FormField > renders with error slot correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<p class="mt-2 text-[var(--ui-error)]">Error slot</p>
<p id="v-0-0-error" class="mt-2 text-[var(--ui-error)]">Error slot</p>
</div>
</div>"
`;
@@ -126,7 +126,7 @@ exports[`FormField > renders with label and description correctly 1`] = `
<div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Username</label>
<!--v-if-->
</div>
<p class="text-[var(--ui-text-muted)]">Enter your username</p>
<p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p>
</div>
<div class="mt-1 relative">
<!--v-if-->
@@ -168,7 +168,7 @@ exports[`FormField > renders with size lg correctly 1`] = `
<div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Username</label>
<!--v-if-->
</div>
<p class="text-[var(--ui-text-muted)]">Enter your username</p>
<p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p>
</div>
<div class="mt-1 relative">
<!--v-if-->
@@ -182,7 +182,7 @@ exports[`FormField > renders with size md correctly 1`] = `
<div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Username</label>
<!--v-if-->
</div>
<p class="text-[var(--ui-text-muted)]">Enter your username</p>
<p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p>
</div>
<div class="mt-1 relative">
<!--v-if-->
@@ -196,7 +196,7 @@ exports[`FormField > renders with size sm correctly 1`] = `
<div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Username</label>
<!--v-if-->
</div>
<p class="text-[var(--ui-text-muted)]">Enter your username</p>
<p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p>
</div>
<div class="mt-1 relative">
<!--v-if-->
@@ -210,7 +210,7 @@ exports[`FormField > renders with size xl correctly 1`] = `
<div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Username</label>
<!--v-if-->
</div>
<p class="text-[var(--ui-text-muted)]">Enter your username</p>
<p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p>
</div>
<div class="mt-1 relative">
<!--v-if-->
@@ -224,7 +224,7 @@ exports[`FormField > renders with size xs correctly 1`] = `
<div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Username</label>
<!--v-if-->
</div>
<p class="text-[var(--ui-text-muted)]">Enter your username</p>
<p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p>
</div>
<div class="mt-1 relative">
<!--v-if-->