Textarea accessibility

WCAG 2.1 AA requirements

Semantics

• Renders a native <textarea> element, which is inherently accessible.
• aria-invalid is set automatically when the invalid prop is true.
• aria-required is set when the required prop is true.

Label pairing

• Always pair with a Label linked via htmlFor / id. Screen readers announce the label as the field's accessible name.
• If a visible label is not possible, set aria-label on the Textarea directly.

Keyboard interaction

No custom key handling needed — native <textarea> behaviour.

Focus ring

• A 2px focus ring (ring-ring) appears on focus-visible with ring-offset-2.
• The border also changes on focus to border-ring for additional visibility.

Error state

• The destructive variant changes border and text colour. The aria-invalid attribute tells screen readers the field has an error.
• Always pair with a visible error message. Connect it via aria-describedby for screen reader announcement:

<Textarea id="notes" invalid aria-describedby="notes-error" />
<p id="notes-error" className="text-sm text-destructive">This field is required.</p>

Disabled state

• disabled sets native disabled attribute, implying aria-disabled.
• Visual treatment: 50% opacity and cursor-not-allowed.

Audit checklist

• Paired with a Label via htmlFor
• aria-invalid set on error
• aria-required set on required fields
• Error message connected via aria-describedby
• Visible focus ring on keyboard navigation
• 4.5:1 contrast on text and placeholder in both themes