Textarea

A multi-line text input for longer freeform content. Supports validation states, labels, descriptions, and resizing.

Keyboard interaction

Key	Action
`Tab`	Moves focus to the textarea.
`Type`	Enters text at the current cursor position.
`Shift + Tab`	Moves focus away from the textarea.

Attribute / Property	Value / Behaviour
`aria-invalid`	"true" when state is "error". Signals to screen readers that the field has a validation error.
`aria-required`	"true" when required is set.
`aria-describedby`	Points to the message element (when state is set) or the description element, so screen readers announce the associated text after the label.
`aria-label`	Set automatically when hideLabel is true and a label prop is provided, maintaining an accessible name without a visible label.

✓

1.4.3 Contrast (Minimum) — AAPass

Label and textarea text foreground colours use --diwa-text-primary; meet the 4.5:1 minimum ratio against the field background in both themes.

✓

1.4.11 Non-text Contrast — AAPass

The textarea border (--diwa-border) is validated to have ≥ 3:1 contrast against adjacent surface colours.

✓

2.1.1 Keyboard — APass

Tab navigates to and from the textarea; all text entry is fully keyboard-operable.

✓

2.4.7 Focus Visible — AAPass

A tokenized focus outline (var(--diwa-focus-ring-width) solid --diwa-border-focus) is shown on keyboard focus via :focus-visible.

✓

4.1.2 Name, Role, Value — APass

aria-invalid, aria-required, aria-describedby, and aria-label are managed internally. Role is implicit from the native <textarea> element.

Label association — the label is associated with the native textarea via htmlFor/id. Focus the textarea by clicking the label.
Error messaging — always pair state="error" with a meaningful message prop — colour alone is insufficient for users who cannot distinguish red from green.