Custom select: add button semantics (#12279)

assets/js/components/BatterySettingsModal.vue

@@ -558,6 +558,7 @@ export default {
 	top: 0;
 	bottom: 0;
 	right: 0;
+	cursor: pointer;
 	position: absolute;
 	opacity: 0;
 	-webkit-appearance: menulist-button;

assets/js/components/CustomSelect.vue

@@ -1,5 +1,5 @@
 <template>
-	<label class="position-relative d-block" :for="id">
+	<label class="position-relative d-block" :for="id" role="button">
 		<select :id="id" :value="selected" class="custom-select" @change="change">
 			<option
 				v-for="{ name, value, count, disabled } in options"
@@ -42,6 +42,7 @@ export default {
 	top: 0;
 	bottom: 0;
 	width: 100%;
+	cursor: pointer;
 	position: absolute;
 	opacity: 0;
 	-webkit-appearance: menulist-button;

assets/js/components/LimitEnergySelect.vue

@@ -6,7 +6,7 @@
 		data-testid="limit-energy"
 	>
 		<h3 class="value m-0">
-			<label class="position-relative">
+			<label class="position-relative" role="button">
 				<select :value="limitEnergy" class="custom-select" @change="change">
 					<option
 						v-for="{ energy, text, disabled } in options"
@@ -94,6 +94,7 @@ export default {
 	top: 0;
 	bottom: 0;
 	right: 0;
+	cursor: pointer;
 	position: absolute;
 	opacity: 0;
 }

assets/js/components/LimitSocSelect.vue

@@ -1,7 +1,7 @@
 <template>
 	<LabelAndValue class="flex-grow-1" :label="title" align="end" data-testid="limit-soc">
 		<h3 class="value m-0">
-			<label class="position-relative">
+			<label class="position-relative" role="button">
 				<select :value="limitSoc" class="custom-select" @change="change">
 					<option v-for="{ soc, text } in options" :key="soc" :value="soc">
 						{{ text }}
@@ -89,6 +89,7 @@ export default {
 	top: 0;
 	bottom: 0;
 	right: 0;
+	cursor: pointer;
 	position: absolute;
 	opacity: 0;
 }