From fa85e838173e858b0b3c062abd9c7e4dd424976b Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Fri, 28 Feb 2025 14:59:17 -0500
Subject: [PATCH] fix: connected labels to inputs, improving accessibility and
 testability

---
 src/components/Form/DynamicForm.tsx           | 39 ++++++++++---------
 src/components/Form/FormInput.tsx             |  1 +
 src/components/Form/FormPasswordGenerator.tsx |  2 +
 src/components/Form/FormSelect.tsx            |  2 +-
 src/components/Form/FormToggle.tsx            |  1 +
 src/components/Form/FormWrapper.tsx           |  4 +-
 .../Config/Security/Security.tsx              |  2 +
 src/components/UI/Generator.tsx               |  4 +-
 8 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/src/components/Form/DynamicForm.tsx b/src/components/Form/DynamicForm.tsx
index 7009c89a..e883b004 100644
--- a/src/components/Form/DynamicForm.tsx
+++ b/src/components/Form/DynamicForm.tsx
@@ -98,24 +98,27 @@ export function DynamicForm<T extends FieldValues>({
             <Subtle>{fieldGroup.description}</Subtle>
           </div>
 
-          {fieldGroup.fields.map((field) => (
-            <FieldWrapper
-              key={field.label}
-              label={field.label}
-              description={field.description}
-              valid={
-                field.validationText === undefined ||
-                field.validationText === ""
-              }
-              validationText={field.validationText}
-            >
-              <DynamicFormField
-                field={field}
-                control={control}
-                disabled={isDisabled(field.disabledBy, field.disabled)}
-              />
-            </FieldWrapper>
-          ))}
+          {fieldGroup.fields.map((field) => {
+            return (
+              <FieldWrapper
+                key={field.label}
+                label={field.label}
+                fieldName={field.name}
+                description={field.description}
+                valid={
+                  field.validationText === undefined ||
+                  field.validationText === ""
+                }
+                validationText={field.validationText}
+              >
+                <DynamicFormField
+                  field={field}
+                  control={control}
+                  disabled={isDisabled(field.disabledBy, field.disabled)}
+                />
+              </FieldWrapper>
+            );
+          })}
         </div>
       ))}
       {hasSubmitButton && <Button type="submit">Submit</Button>}
diff --git a/src/components/Form/FormInput.tsx b/src/components/Form/FormInput.tsx
index 5fef2794..d50af067 100644
--- a/src/components/Form/FormInput.tsx
+++ b/src/components/Form/FormInput.tsx
@@ -53,6 +53,7 @@ export function GenericInput<T extends FieldValues>({
           }
           step={field.properties?.step}
           value={field.type === "number" ? Number.parseFloat(value) : value}
+          id={field.name}
           onChange={(e) => {
             if (field.inputChange) field.inputChange(e);
             onChange(
diff --git a/src/components/Form/FormPasswordGenerator.tsx b/src/components/Form/FormPasswordGenerator.tsx
index 622e502e..6fc4aac7 100644
--- a/src/components/Form/FormPasswordGenerator.tsx
+++ b/src/components/Form/FormPasswordGenerator.tsx
@@ -11,6 +11,7 @@ import { Controller, type FieldValues } from "react-hook-form";
 
 export interface PasswordGeneratorProps<T> extends BaseFormBuilderProps<T> {
   type: "passwordGenerator";
+  id: string;
   hide?: boolean;
   bits?: { text: string; value: string; key: string }[];
   devicePSKBitCount: number;
@@ -41,6 +42,7 @@ export function PasswordGenerator<T extends FieldValues>({
       render={({ field: { value, ...rest } }) => (
         <Generator
           type={field.hide && !passwordShown ? "password" : "text"}
+          id={field.id}
           action={
             field.hide
               ? {
diff --git a/src/components/Form/FormSelect.tsx b/src/components/Form/FormSelect.tsx
index 98b4e6b0..3d32624c 100644
--- a/src/components/Form/FormSelect.tsx
+++ b/src/components/Form/FormSelect.tsx
@@ -50,7 +50,7 @@ export function SelectInput<T extends FieldValues>({
             {...remainingProperties}
             {...rest}
           >
-            <SelectTrigger>
+            <SelectTrigger id={field.name}>
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
diff --git a/src/components/Form/FormToggle.tsx b/src/components/Form/FormToggle.tsx
index e79bac76..d1b0567b 100644
--- a/src/components/Form/FormToggle.tsx
+++ b/src/components/Form/FormToggle.tsx
@@ -33,6 +33,7 @@ export function ToggleInput<T extends FieldValues>({
         <Switch
           checked={value}
           onCheckedChange={onChangeHandler(onChange)}
+          id={field.name}
           disabled={disabled}
           {...field.properties}
           {...rest}
diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx
index d6670fdd..8456e2bd 100644
--- a/src/components/Form/FormWrapper.tsx
+++ b/src/components/Form/FormWrapper.tsx
@@ -2,6 +2,7 @@ import { Label } from "@components/UI/Label.tsx";
 
 export interface FieldWrapperProps {
   label: string;
+  fieldName: string;
   description?: string;
   disabled?: boolean;
   children?: React.ReactNode;
@@ -11,6 +12,7 @@ export interface FieldWrapperProps {
 
 export const FieldWrapper = ({
   label,
+  fieldName,
   description,
   children,
   valid,
@@ -19,7 +21,7 @@ export const FieldWrapper = ({
   <div className="pt-6 sm:pt-5">
     <fieldset aria-labelledby="label-notifications">
       <div className="sm:grid sm:grid-cols-3 sm:items-baseline sm:gap-4">
-        <Label>{label}</Label>
+        <Label htmlFor={fieldName}>{label}</Label>
         <div className="sm:col-span-2">
           <div className="max-w-lg">
             <p className="text-sm text-slate-500">{description}</p>
diff --git a/src/components/PageComponents/Config/Security/Security.tsx b/src/components/PageComponents/Config/Security/Security.tsx
index 9a1c72e9..85ba36fd 100644
--- a/src/components/PageComponents/Config/Security/Security.tsx
+++ b/src/components/PageComponents/Config/Security/Security.tsx
@@ -164,6 +164,7 @@ export const Security = () => {
             fields: [
               {
                 type: "passwordGenerator",
+                id: "pskInput",
                 name: "privateKey",
                 label: "Private Key",
                 description: "Used to create a shared key with a remote device",
@@ -234,6 +235,7 @@ export const Security = () => {
               {
                 type: "passwordGenerator",
                 name: "adminKey",
+                id: "adminKeyInput",
                 label: "Admin Key",
                 description:
                   "The public key authorized to send admin messages to this node",
diff --git a/src/components/UI/Generator.tsx b/src/components/UI/Generator.tsx
index 6caf4ccc..80427c85 100644
--- a/src/components/UI/Generator.tsx
+++ b/src/components/UI/Generator.tsx
@@ -15,6 +15,7 @@ export interface GeneratorProps extends React.BaseHTMLAttributes<HTMLElement> {
   type: "text" | "password";
   devicePSKBitCount?: number;
   value: string;
+  id: string;
   variant: "default" | "invalid";
   actionButtons: {
     text: string;
@@ -37,6 +38,7 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
     {
       type,
       devicePSKBitCount,
+      id = "pskInput",
       variant,
       value,
       actionButtons,
@@ -73,7 +75,7 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
       <>
         <Input
           type={type}
-          id="pskInput"
+          id={id}
           variant={variant}
           value={value}
           onChange={inputChange}