From 308cdd342c14cf8aa4d33cf3e579841cc35462ae Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Thu, 15 Feb 2024 19:56:58 +0100
Subject: [PATCH] Custom select: add button semantics (#12279)

---
 assets/js/components/BatterySettingsModal.vue | 1 +
 assets/js/components/CustomSelect.vue         | 3 ++-
 assets/js/components/LimitEnergySelect.vue    | 3 ++-
 assets/js/components/LimitSocSelect.vue       | 3 ++-
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/assets/js/components/BatterySettingsModal.vue b/assets/js/components/BatterySettingsModal.vue
index e08fb9303..ccfd5b66b 100644
--- a/assets/js/components/BatterySettingsModal.vue
+++ b/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;
diff --git a/assets/js/components/CustomSelect.vue b/assets/js/components/CustomSelect.vue
index ba5fcac25..7a38b3dc8 100644
--- a/assets/js/components/CustomSelect.vue
+++ b/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;
diff --git a/assets/js/components/LimitEnergySelect.vue b/assets/js/components/LimitEnergySelect.vue
index f976c95c4..27a1a3d8a 100644
--- a/assets/js/components/LimitEnergySelect.vue
+++ b/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;
 }
diff --git a/assets/js/components/LimitSocSelect.vue b/assets/js/components/LimitSocSelect.vue
index 30ed76b98..753bf111a 100644
--- a/assets/js/components/LimitSocSelect.vue
+++ b/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;
 }