bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Enhance FormMessage and styleguide for improved accessibility and user feedback

Browse Source 
- Add orange AlertCircle icon to FormMessage component for better visibility of validation errors.
- Update styleguide to demonstrate new alert components with icons for error, success, and warning messages.
- Refactor CSS for status messages and form error messages to improve layout and accessibility compliance.
This commit is contained in:
Bastian Masanek
2025-10-31 17:40:10 +01:00
parent d9f08bbef2
commit c385779221
3 changed files with 134 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/components/ui/form/FormMessage.vue
View File

@@ -2,6 +2,7 @@
import type { HTMLAttributes } from 'vue'
import { inject } from 'vue'
import { useFieldError } from 'vee-validate'
import { AlertCircle } from 'lucide-vue-next'
import { cn } from '~/lib/utils'
import type { FormItemContext } from '.'
import { FORM_ITEM_INJECT_KEY } from '.'
@@ -9,6 +10,7 @@ import { FORM_ITEM_INJECT_KEY } from '.'
/**
* FormMessage component - Displays validation error messages
* Only renders when there is an error for the associated field
* Includes orange AlertCircle icon for better accessibility
*/
interface Props {
@@ -38,7 +40,8 @@ const error = useFieldError()
:id="`${formItemContext?.id}-message`"
:class="cn('form-error', props.class)"
>
{{ error }}
<AlertCircle class="h-6 w-6 text-warning flex-shrink-0" />
<span>{{ error }}</span>
</p>
</Transition>
</template>

99
app/pages/internal/styleguide.vue
View File

@@ -5,6 +5,8 @@
* Protected by Basic Auth via server/middleware/internal-auth.ts
*/
import { AlertCircle, CheckCircle } from 'lucide-vue-next'
definePageMeta({
layout: 'styleguide',
})
@@ -442,9 +444,21 @@ const copyCode = async (code: string) => {
<!-- Error Message Styles -->
<div class="space-y-3 mt-6">
<h4 class="text-lg font-semibold text-white">Fehlermeldungen (.form-error)</h4>
<p class="form-error">Dies ist eine Fehlermeldung mit gutem Kontrast</p>
<p class="form-error">Required</p>
<p class="form-error">Das Passwort muss mindestens 8 Zeichen lang sein</p>
<p class="text-sm text-white/70 mb-4">
Orange Border (WCAG AA konform) mit Icon für bessere Barrierefreiheit. Icon optional.
</p>
<p class="form-error">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-warning flex-shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
Dies ist eine Fehlermeldung mit gutem Kontrast
</p>
<p class="form-error">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-warning flex-shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
Dieses Feld ist erforderlich
</p>
<p class="form-error">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-warning flex-shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
Das Passwort muss mindestens 8 Zeichen lang sein
</p>
</div>
</div>
@@ -495,26 +509,29 @@ const copyCode = async (code: string) => {
<div class="card-glass">
<h3 class="text-2xl font-semibold mb-6 text-white">Status Indicators</h3>
<p class="text-sm text-white/70 mb-6">
Einheitlicher Stil mit orange/grünem Border für bessere Barrierefreiheit. Alle verwenden den gleichen Hintergrund mit farbigem Icon.
</p>
<div class="space-y-4">
<div class="status-message status-success">
<span class="status-icon">✓</span>
<span>Success message</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="status-icon"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
<span>Erfolgsmeldung - Aktion wurde ausgeführt</span>
</div>
<div class="status-message status-warning">
<span class="status-icon">⚠</span>
<span>Warning message</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="status-icon"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
<span>Warnung - Bitte beachten</span>
</div>
<div class="status-message status-error">
<span class="status-icon">✕</span>
<span>Error message</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="status-icon"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
<span>Fehlermeldung - Etwas ist schiefgelaufen</span>
</div>
<div class="status-message status-info">
<span class="status-icon">ⓘ</span>
<span>Info message</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="status-icon"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
<span>Information - Nützlicher Hinweis</span>
</div>
</div>
@@ -528,6 +545,66 @@ const copyCode = async (code: string) => {
</div>
</section>
<!-- Alert Components Section -->
<section id="alerts" class="mb-16">
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Alert Components</h2>
<div class="card-glass">
<h3 class="text-2xl font-semibold mb-6 text-white">shadcn-nuxt Alert Variants</h3>
<p class="text-sm text-white/70 mb-6">
Alert-Komponenten für Benachrichtigungen und Fehlermeldungen. Die "error" Variante verwendet Orange für bessere Barrierefreiheit (WCAG AA konform).
</p>
<div class="space-y-4">
<!-- Error Alert -->
<Alert variant="error">
<AlertCircle class="h-6 w-6" />
<AlertDescription>
Ungültige E-Mail-Adresse oder Passwort
</AlertDescription>
</Alert>
<!-- Success Alert -->
<Alert class="bg-white/15 border-l-4 border-success text-white">
<CheckCircle class="h-6 w-6 text-success" />
<AlertTitle class="text-success font-medium">Registrierung erfolgreich!</AlertTitle>
<AlertDescription>
Bitte bestätige deine E-Mail-Adresse über den Link, den wir dir gesendet haben.
</AlertDescription>
</Alert>
<!-- Destructive Alert (original red) -->
<Alert variant="destructive">
<AlertCircle class="h-5 w-5" />
<AlertTitle>Warnung</AlertTitle>
<AlertDescription>
Dies ist die ursprüngliche "destructive" Variante mit rotem Border.
</AlertDescription>
</Alert>
</div>
<details class="bg-white/5 p-4 rounded-lg mt-6">
<summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;!-- Error Alert (empfohlen für Fehler) --&gt;
&lt;Alert variant="error"&gt;
&lt;AlertCircle class="h-6 w-6" /&gt;
&lt;AlertDescription&gt;
Ungültige E-Mail-Adresse oder Passwort
&lt;/AlertDescription&gt;
&lt;/Alert&gt;
&lt;!-- Success Alert --&gt;
&lt;Alert class="bg-white/15 border-l-4 border-success text-white"&gt;
&lt;CheckCircle class="h-6 w-6 text-success" /&gt;
&lt;AlertTitle class="text-success font-medium"&gt;Erfolg!&lt;/AlertTitle&gt;
&lt;AlertDescription&gt;
Deine Nachricht...
&lt;/AlertDescription&gt;
&lt;/Alert&gt;</code></pre>
</details>
</div>
</section>
<!-- Progress Bars Section -->
<section id="progress" class="mb-16">
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Progress Bars</h2>