Skip to content

feat: textarea/Datepicker updates#2471

Open
Ricardo-Tele wants to merge 8 commits intotelekom:mainfrom
Ricardo-Tele:feat/add-hide-label-visually-2
Open

feat: textarea/Datepicker updates#2471
Ricardo-Tele wants to merge 8 commits intotelekom:mainfrom
Ricardo-Tele:feat/add-hide-label-visually-2

Conversation

@Ricardo-Tele
Copy link
Copy Markdown
Contributor

  • 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.

Copilot AI review requested due to automatic review settings March 5, 2026 08:02
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 hideLabel prop and CSS rule on scale-textarea to visually hide the label via the sr-only pattern
  • New hideLabel prop and CSS rule on scale-date-picker to 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;
Copy link

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
Copy link
Copy Markdown
Collaborator

@amir-ba amir-ba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please apply the suggestions from copilot and run linter and formatter to fix the pipeline failure.

Ricardo-Tele and others added 6 commits March 9, 2026 09:38
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants