From 9e1c2b93cfc52b9c24371c66bd3b5dae9924febd Mon Sep 17 00:00:00 2001
From: VolkerK62 <99199865+VolkerK62@users.noreply.github.com>
Date: Wed, 24 Sep 2025 09:19:29 +0200
Subject: [PATCH] demo-charger: fix warning (#23679)

Co-authored-by: Michael Geers <michael@geers.tv>
---
 assets/js/components/Config/PropertyEntry.vue |  1 +
 assets/js/components/Config/PropertyField.vue |  2 ++
 assets/js/components/Config/VehicleModal.vue  |  3 ++-
 .../GlobalSettings/UserInterfaceSettings.vue  |  2 ++
 assets/js/components/Helper/SelectGroup.vue   | 19 +++++++++++++++++--
 .../definition/charger/demo-charger.yaml      |  2 +-
 tests/config-circuit.spec.ts                  |  1 +
 tests/config-vehicles.spec.ts                 |  2 +-
 8 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/assets/js/components/Config/PropertyEntry.vue b/assets/js/components/Config/PropertyEntry.vue
index 2f29f11b9..bda67ae43 100644
--- a/assets/js/components/Config/PropertyEntry.vue
+++ b/assets/js/components/Config/PropertyEntry.vue
@@ -17,6 +17,7 @@
 			:unit="Unit"
 			:required="Required"
 			:choice="Choice"
+			:label="label"
 		/>
 	</FormRow>
 </template>
diff --git a/assets/js/components/Config/PropertyField.vue b/assets/js/components/Config/PropertyField.vue
index bb23c763d..80d961bed 100644
--- a/assets/js/components/Config/PropertyField.vue
+++ b/assets/js/components/Config/PropertyField.vue
@@ -51,6 +51,7 @@
 		class="w-50"
 		equal-width
 		transparent
+		:aria-label="label"
 		:options="[
 			{ value: false, name: $t('config.options.boolean.no') },
 			{ value: true, name: $t('config.options.boolean.yes') },
@@ -115,6 +116,7 @@ export default {
 		invalid: Boolean,
 		choice: { type: Array, default: () => [] },
 		modelValue: [String, Number, Boolean, Object],
+		label: String,
 	},
 	emits: ["update:modelValue"],
 	data: () => {
diff --git a/assets/js/components/Config/VehicleModal.vue b/assets/js/components/Config/VehicleModal.vue
index 25ae1d56d..f0172ad21 100644
--- a/assets/js/components/Config/VehicleModal.vue
+++ b/assets/js/components/Config/VehicleModal.vue
@@ -78,6 +78,7 @@
 									{ name: '2-phases', value: '2' },
 									{ name: '3-phases', value: '' },
 								]"
+								:aria-label="$t('config.vehicle.maximumPhases')"
 								equal-width
 								transparent
 							/>
@@ -210,7 +211,7 @@ type VehicleDeviceValues = DeviceValues & {
 	minCurrent: number | undefined;
 	maxCurrent: number | undefined;
 	priority: number | undefined;
-	phases: number | undefined;
+	phases: string | undefined;
 	mode: string | undefined;
 };
 
diff --git a/assets/js/components/GlobalSettings/UserInterfaceSettings.vue b/assets/js/components/GlobalSettings/UserInterfaceSettings.vue
index 67541411e..098768e77 100644
--- a/assets/js/components/GlobalSettings/UserInterfaceSettings.vue
+++ b/assets/js/components/GlobalSettings/UserInterfaceSettings.vue
@@ -39,6 +39,7 @@
 						name: $t(`settings.unit.${value}`),
 					}))
 				"
+				:aria-label="$t('settings.unit.label')"
 				equal-width
 			/>
 		</FormRow>
@@ -54,6 +55,7 @@
 						name: $t(`settings.time.${value}h`),
 					}))
 				"
+				:aria-label="$t('settings.time.label')"
 				equal-width
 			/>
 		</FormRow>
diff --git a/assets/js/components/Helper/SelectGroup.vue b/assets/js/components/Helper/SelectGroup.vue
index 3b33a413b..eefccfa97 100644
--- a/assets/js/components/Helper/SelectGroup.vue
+++ b/assets/js/components/Helper/SelectGroup.vue
@@ -1,12 +1,15 @@
 <template>
-	<div class="mode-group border d-inline-flex" :class="{ large, transparent }" role="group">
+	<div class="mode-group border d-inline-flex" :class="{ large, transparent }" role="radiogroup">
 		<button
 			v-for="(option, i) in options"
 			:id="i === 0 ? id : undefined"
 			:key="option.value"
 			type="button"
+			role="radio"
+			:aria-checked="optionSelected(option)"
+			:aria-label="optionLabel(option)"
 			class="btn btn-sm flex-grow-1 flex-shrink-1"
-			:class="{ active: option.value === modelValue, 'btn--equal': equalWidth }"
+			:class="{ active: optionSelected(option), 'btn--equal': equalWidth }"
 			:disabled="option.disabled"
 			:data-testid="`${id}-${option.value}`"
 			tabindex="0"
@@ -30,8 +33,20 @@ export default defineComponent({
 		equalWidth: Boolean,
 		large: Boolean,
 		transparent: Boolean,
+		ariaLabel: String,
 	},
 	emits: ["update:modelValue"],
+	methods: {
+		optionSelected(option: SelectOption<string | number>) {
+			return (
+				option.value === this.modelValue ||
+				(this.modelValue === null && option.value === "")
+			);
+		},
+		optionLabel(option: SelectOption<string | number>) {
+			return this.ariaLabel ? `${this.ariaLabel}: ${option.name}` : option.name;
+		},
+	},
 });
 </script>
 
diff --git a/templates/definition/charger/demo-charger.yaml b/templates/definition/charger/demo-charger.yaml
index 3cee8efac..eb308611a 100644
--- a/templates/definition/charger/demo-charger.yaml
+++ b/templates/definition/charger/demo-charger.yaml
@@ -29,7 +29,7 @@ params:
       de: Ladebereit
       en: Enabled
     type: bool
-    default: true
+    default: false
   - name: maxcurrent
     description:
       de: Maximale Stromstärke
diff --git a/tests/config-circuit.spec.ts b/tests/config-circuit.spec.ts
index 2efbfb915..a52a35d13 100644
--- a/tests/config-circuit.spec.ts
+++ b/tests/config-circuit.spec.ts
@@ -72,6 +72,7 @@ test.describe("circuit", async () => {
     await chargerModal.getByLabel("Manufacturer").selectOption("Demo charger");
     await chargerModal.getByLabel("Charge status").selectOption("C");
     await chargerModal.getByLabel("Power").fill("1000");
+    await chargerModal.getByRole("radio", { name: "Enabled: Yes" }).click();
     await chargerModal.getByRole("button", { name: "Save" }).click();
     await expectModalHidden(chargerModal);
     await expectModalVisible(lpModal);
diff --git a/tests/config-vehicles.spec.ts b/tests/config-vehicles.spec.ts
index 859f66ab6..800a92bf1 100644
--- a/tests/config-vehicles.spec.ts
+++ b/tests/config-vehicles.spec.ts
@@ -156,7 +156,7 @@ test.describe("vehicles", async () => {
 
     await page.getByRole("button", { name: "Show advanced settings" }).click();
     await expect(vehicleModal.getByLabel("Default mode")).toBeVisible();
-    await expect(vehicleModal.getByLabel("Maximum phases")).toBeVisible();
+    await expect(vehicleModal.getByLabel("Maximum phases: 3-phases")).toBeVisible();
     await expect(vehicleModal.getByLabel("Minimum current")).toBeVisible();
     await expect(vehicleModal.getByLabel("Maximum current")).toBeVisible();
     await expect(vehicleModal.getByLabel("Priority")).toBeVisible();