Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <script setup lang="ts">
/**
* ErrorAlert Component
*
* Internal component that wraps FzAlert with proper ARIA attributes for error messages.
* Provides accessible error announcements for screen readers.
*
* @component
* @internal
*
* Features:
* - ARIA live region with assertive priority
* - Automatic role="alert" for immediate announcement
* - Atomic reading for complete error messages
*
* @example
* <ErrorAlert id="field-error" size="md">
* This field is required
* </ErrorAlert>
*/
import { FzAlert } from "@fiscozen/alert";
defineProps<{
/**
* Unique ID for the error alert element.
* Used for aria-describedby relationships.
*
* @example "checkbox-123-error"
*/
id: string;
}>();
</script>
<template>
<!--
Error message display with ARIA live region
Announces validation errors immediately to screen readers
- role="alert": High-priority message
- aria-live="assertive": Interrupts current announcements
- aria-atomic="true": Reads complete message
@TODO: When FzAlert supports automatic ARIA handling based on `type`
(e.g., via an `announce` prop or similar semantic API), we can remove
these manual attributes.
Proposed future API:
FzAlert with type="error" and announce prop
would automatically get role="alert" and aria-live="assertive"
-->
<FzAlert
:id="id"
type="error"
alertStyle="simple"
role="alert"
aria-live="assertive"
aria-atomic="true"
size="md"
>
<slot />
</FzAlert>
</template>
|