Skip to content

feat: add hide-label-visually #2452

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

feat: add hide-label-visually #2452
Ricardo-Tele wants to merge 5 commits intotelekom:mainfrom
Ricardo-Tele:feat/add-hide-label-visually

Conversation

@Ricardo-Tele
Copy link
Contributor

Adds a "hide-label-visually" prop to "scale-date-picker" and "scale-textarea".

The label is visually hidden while remaining accessible to screen readers, aligning these components with existing Scale APIs and improving accessibility.

Copy link
Contributor

@obstmi obstmi left a comment

Choose a reason for hiding this comment

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

Hi Ricardo,
good work! 👍
In addition to my code comments:

  • please add an example to the html-pages in order to test it (at least for the date picker, we have an HTML page)
  • please add the new props to the Storybook documentation

border-color: var(--border-color-disabled);
background-color: var(--background-color-disabled);
}
.textarea__label--visually-hidden {
Copy link
Contributor

Choose a reason for hiding this comment

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

If you use the getCssClassMap()-method as I proposed in my comment in textarea.tsx, then you should use a descendant selector here.
For an example see:

.text-field--hide-label .text-field__label {

max-width: none;
}
}
.date-picker__label--visually-hidden {
Copy link
Contributor

Choose a reason for hiding this comment

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

Similar to my comment in textarea.cssyou should use a descendant selector (if you follow my proposal).

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