demo-charger: fix warning (#23679)

Co-authored-by: Michael Geers <michael@geers.tv>

assets/js/components/Config/PropertyEntry.vue

@@ -17,6 +17,7 @@
 			:unit="Unit"
 			:required="Required"
 			:choice="Choice"
+			:label="label"
 		/>
 	</FormRow>
 </template>

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: () => {

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;
 };
 

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>

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>
 

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

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);

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();