feat: textarea/Datepicker updates#2471
Conversation
Ricardo-Tele
commented
Mar 5, 2026
- Implements hide-label-visually for scale-date-picker and scale-textarea to visually hide labels while keeping them accessible for screen readers.
- Update of the original “Hidden Label Visually” implementation.
There was a problem hiding this comment.
Pull request overview
This PR adds hideLabel / hide-label prop support to scale-textarea and scale-date-picker components, allowing labels to be visually hidden while remaining accessible to screen readers. Unlike the existing hideLabelVisually implementation in scale-text-field, scale-dropdown, and scale-dropdown-select (which uses visibility: hidden), this implementation uses the standard "visually hidden" sr-only CSS technique, which is more accessible.
Changes:
- New
hideLabelprop and CSS rule onscale-textareato visually hide the label via the sr-only pattern - New
hideLabelprop and CSS rule onscale-date-pickerto visually hide the label via the sr-only pattern - New/updated HTML demo files and unit/e2e tests for both components
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
packages/components/src/components/textarea/textarea.tsx |
Adds hideLabel prop and wires it to the CSS class map |
packages/components/src/components/textarea/textarea.css |
Adds .textarea--hide-label .textarea__label sr-only CSS rule |
packages/components/src/components/textarea/textarea.spec.ts |
Adds snapshot and prop-check tests for hideLabel |
packages/components/src/components/textarea/textarea.e2e.ts |
Adds E2E tests for the textarea--hide-label class |
packages/components/src/components/date-picker/date-picker.tsx |
Adds hideLabel prop and wires it to the CSS class map |
packages/components/src/components/date-picker/date-picker.css |
Adds .scale-date-picker--hide-label .date-picker__label sr-only CSS rule |
packages/components/src/html/textarea.html |
New HTML demo file showing the hidden-label textarea example |
packages/components/src/html/date-picker.html |
Extends existing demo with a hidden-label date-picker example |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| /** (optional) Input label */ | ||
| @Prop() label: string = ''; | ||
| /** (optional) Visually hide the label */ | ||
| @Prop() hideLabel?: boolean; |
There was a problem hiding this comment.
The prop is named hideLabel (HTML attribute: hide-label), but the equivalent prop in the existing scale-dropdown, scale-dropdown-select, and scale-text-field components is named hideLabelVisually (HTML attribute: hide-label-visually). This inconsistency in the public API makes it harder for consumers who use multiple form components to predict the correct attribute name. The prop should be renamed to hideLabelVisually to align with the established convention across the codebase.
amir-ba
left a comment
There was a problem hiding this comment.
Please apply the suggestions from copilot and run linter and formatter to fix the pipeline failure.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Amir Baghdoust <baghdoust@gmail.com>