[select] style bug if no label

[yinonov]

Describe the bug
select with no label positions the selected option as if it considers a label present.

To Reproduce
Steps to reproduce the behavior:

1. Go to story
2. remove the label (from controls)
3. Select an option
4. See the bug

Expected behavior
style should be conditioned in css and align the selected option to vertical middle if no label.
note that dense select should not be affected

Screenshots

Additional context
Dense no label features a WCAG violation as form associated element must have a label.

These use cases should instruct consumers of this violation unless compensated by aria-label / aria-labeledby. should be added to guideline?

[jshenkman]

Notice, Select component - dense variant should have a placeholder text as well. It's not instead of having a label but it should be in addition.

here are some examples

1. Carbon
   
   

2. Spectrum
   
   

[rachelbt]

there's no place holder in the select component, it present the first option in the inside list.
@yinonov currently one can add a select with or without a label even it is is a violation.

[rachelbt]

StoryBook:
https://tmp.dev.vivid.vonage.com/1251/index.html?path=/story/components-select--default&args=label:;helper:Helper+Text

[rachelbt]

@yinonov maybe we need to add an option for "hideLabel" that hides visually the label but keeps the aria-label.

[yinonov]

select supports aria-label/labeledby. what's the benefit of it?

[RoyMenczerVonage]

Hi,
Can you please update me when this fix is released?
Thanks

[yinonov]

Hi, Can you please update me when this fix is released? Thanks

@RoyMenczerVonage it's out https://github.com/Vonage/vivid/blob/master/CHANGELOG.md#2260-2022-03-13

[RoyMenczerVonage]

Thanks