FR: add <label> to menuSelect

[j3ll3yfi5h]

A <select> without a <label> is not very user friendly and not good from a a11y perspective.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

Please add a parameter to the userSelect widget, that outputs this.

CURRENT OUTPUT

menuSelect({
	container: '#menu-select',
	attribute: 'brand'
})

<div class="ais-MenuSelect">
	<select class="ais-MenuSelect-select">
		<option class="ais-MenuSelect-option" value="">See all</option>
		<option class="ais-MenuSelect-option" value="Brand1">Brand1</option>
		<option class="ais-MenuSelect-option" value="Brand2">Brand2</option>
	</select>
</div>

FUTURE OUTPUT 1

menuSelect({
	container: '#menu-select',
	attribute: 'brand',
	label: 'Brands'
})

<div class="ais-MenuSelect">
	<label>
		Brands
		<select class="ais-MenuSelect-select">
			<option class="ais-MenuSelect-option" value="">See all</option>
			<option class="ais-MenuSelect-option" value="Brand1">Brand1</option>
			<option class="ais-MenuSelect-option" value="Brand2">Brand2</option>
		</select>
	</label>
</div>

FUTURE OUTPUT 2

menuSelect({
	container: '#menu-select',
	attribute: 'brand',
	label: 'Brands',
	id: 'brands'
})

<div class="ais-MenuSelect">
	<label for="brands">Brands</label>
	<select class="ais-MenuSelect-select" id="brands">
		<option class="ais-MenuSelect-option" value="">See all</option>
		<option class="ais-MenuSelect-option" value="Brand1">Brand1</option>
		<option class="ais-MenuSelect-option" value="Brand2">Brand2</option>
	</select>
</div>

[Haroenv]

This is a good point, and should either be solved on the menu select (plus other select widgets) or symbiotically through the panel widget.

For the time being you could wrap the container div in a label already like this:

menuSelect({
	container: '#menu-select',
	attribute: 'brand'
})

<label>
Brands
<div id="menu-select"></div>
</label>

That would act like this: https://codesandbox.io/s/sharp-cerf-c8gz8w?file=/index.html

[j3ll3yfi5h]

Hi @Haroenv

div inside a label is unfortunately not valid HTML.

The select is always wrapped with a div.ais-MenuSelect.

[Haroenv]

For now, the workaround can be either manually add the attribute to the select with js after rendering the first time (nothing should make the dom element change), or creating a custom widget