[TextArea] Fix label-textarea association and add aria-invalid/aria-describedby #645
Description
Summary
TextArea is a custom HTML textarea wrapper with label, helper text, and error state support. Has critical accessibility gaps around label association and ARIA attributes.
Improvements
1. Add htmlFor/id association between label and textarea
The <label> element has no htmlFor attribute linked to the textarea. Screen readers cannot associate the label with the control. Should auto-generate an ID if not provided.
2. Add aria-invalid for error state
When error={true}, should set aria-invalid="true" on the textarea element.
3. Add aria-describedby for helper/error text
Helper text and error messages are not linked to the textarea. Should use aria-describedby for semantic connection.
4. Fix overflow: hidden on textarea
CSS has overflow: hidden which clips content. Should be overflow: auto or paired with explicit resize control.
5. Replace hardcoded icon dimensions
Helper icon has width: 12px; height: 12px hardcoded instead of design tokens.
6. Add minRows/maxRows props
No height control beyond fixed CSS. Should support row-based height constraints.
7. Align API with InputField
InputField has size and variant CVA variants. TextArea doesn't follow the same pattern.
Files
packages/raystack/raystack/components/text-area/