feat: add hide-label-visually #2452
Conversation
obstmi
left a comment
obstmi
left a comment
There was a problem hiding this comment.
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
| class={classNames( | ||
| 'textarea__label', | ||
| this.hideLabelVisually && 'textarea__label--visually-hidden' |
There was a problem hiding this comment.
I would like to suggest bundling variable (optional) CSS classes in one place, as the getCssClassMap() method does in line 261.
textarea__label--visually-hidden is then used as a CSS class in the parent (the entire component), which you then narrow down in the CSS definition using a descendant selector. (See comment there).
| border-color: var(--border-color-disabled); | ||
| background-color: var(--background-color-disabled); | ||
| } | ||
| .textarea__label--visually-hidden { |
There was a problem hiding this comment.
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:
| class={classNames( | ||
| 'date-picker__label', | ||
| this.hideLabelVisually && 'date-picker__label--visually-hidden' | ||
| )} |
There was a problem hiding this comment.
Similar to my comment for textarea.tsxyou should add the new css class in line 437f
| max-width: none; | ||
| } | ||
| } | ||
| .date-picker__label--visually-hidden { |
There was a problem hiding this comment.
Similar to my comment in textarea.cssyou should use a descendant selector (if you follow my proposal).
2 participants
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.