docs: Reformat TextArea Accessibility#4058
Conversation
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
| ensure proper labeling, error handling, and help text association. See | ||
| [FormField's accessibility documentation](/components/inputs/form-field/#accessibility) | ||
| for comprehensive guidance on form accessibility best practices. | ||
| The primary accessibility goal for `TextArea` is to give every user a visible, persistent label and |
There was a problem hiding this comment.
Missing component-choice guidance: Per the a11y-docs template, add 1–2 sentences in the intro on when to use TextArea vs TextInput (multi-line vs single-line).
| <FormField.Field> | ||
| <FormField.Input as={TextArea} maxLength={MAX_CHARACTERS} onChange={handleChange} value={value} /> | ||
| <FormField.Hint>{`${value.length} of ${MAX_CHARACTERS} characters`}</FormField.Hint> | ||
| <AriaLiveRegion as={AccessibleHide}>{liveUpdateStr}</AriaLiveRegion> |
There was a problem hiding this comment.
Incomplete codegen example: The character-limit snippet references liveUpdateStr and handleChange without defining debounce logic. Add a brief comment (e.g. // debounce into liveUpdateStr) or trim the snippet to only show FormField.Hint count + link to the full guide example.
| debounce `AriaLiveRegion` updates so screen reader users are not interrupted while typing. | ||
| - **Disabling resize unnecessarily**: Do not set `resize` to `none` unless there is a strong design or | ||
| layout requirement; users lose a visual comfort affordance that supports low-vision and motor needs. | ||
| - **Standalone `TextArea` without `FormField`**: Do not render `<TextArea />` outside `FormField.Input`; |
There was a problem hiding this comment.
Redundant anti-patterns: "Unlabeled text areas" (line 295) and "Standalone TextArea without FormField" overlap — consider merging into one bullet.
Summary
Fixes: #1234
Release Category
Components
Release Note
Optional release note message. Changelog and release summaries will contain a pull request title. This section will add additional notes under that title. This section is not a summary, but something extra to point out in release notes. An example might be calling out breaking changes in a labs component or minor visual changes that need visual regression updates. Remove this section if no additional release notes are required.
BREAKING CHANGES
Optional breaking changes message. If your PR includes breaking changes. It is extremely rare to put breaking changes outside a
prerelease/majorbranch. Anything in this section will show up in release notes. Remove this section if no breaking changes are present.Checklist
ready for reviewhas been added to PRFor the Reviewer
Where Should the Reviewer Start?
Areas for Feedback? (optional)
Testing Manually
Screenshots or GIFs (if applicable)
Thank You Gif (optional)