From 24a2cfc7298d1d4f7d807d3c345d6c9d8eed0706 Mon Sep 17 00:00:00 2001
From: Artem Sushchev <Suschev.Artem+github@gmail.com>
Date: Thu, 25 Sep 2025 12:13:10 +0200
Subject: [PATCH] feat: Accessibility Fixes for Custom Field Forms (#48)

* fix: add IDs and ARIA labels to custom field forms

- Add id propagation to FormInput/FormTextarea based on name prop for proper label association
- Enhance FormSelect with hidden input for form submission, aria-labelledby for labeling, and controlled/uncontrolled state management
- Add aria-label attributes to inline inputs/selects/checkboxes in CrudTable settings editor

These changes improve accessibility for screen readers and ensure custom field forms are fully navigable via keyboard. Also critical for AI browsers like Comet that rely on semantic HTML/ARIA for form parsing and automation.

* fix: add aria-labels to CRUD table action buttons

- Add aria-label to edit buttons: 'Edit [item name]'
- Add aria-label to delete buttons: 'Delete [item name]'
- Add aria-label to save/cancel buttons in edit/add modes
- Add aria-label to 'Add New' button

Fixes unlabeled icon buttons that were inaccessible to screen readers and AI browsers.
---
 components/forms/simple.tsx  | 43 +++++++++++++++++++++++++------
 components/settings/crud.tsx | 49 +++++++++++++++++++++++-------------
 2 files changed, 67 insertions(+), 25 deletions(-)

diff --git a/components/forms/simple.tsx b/components/forms/simple.tsx
index c2e9a39..cf92333 100644
--- a/components/forms/simple.tsx
+++ b/components/forms/simple.tsx
@@ -32,6 +32,7 @@ export function FormInput({ title, hideIfEmpty = false, isRequired = false, ...p
       {title && <span className="text-sm font-medium">{title}</span>}
       <Input
         {...props}
+        id={props.id || (props as { name?: string }).name}
         className={cn("bg-background", isRequired && isEmpty && "bg-yellow-50", props.className)}
         data-1p-ignore
       />
@@ -74,6 +75,7 @@ export function FormTextarea({ title, hideIfEmpty = false, isRequired = false, .
       <Textarea
         ref={textareaRef}
         {...props}
+        id={props.id || (props as { name?: string }).name}
         className={cn("bg-background", isRequired && isEmpty && "bg-yellow-50", props.className)}
         data-1p-ignore
       />
@@ -89,6 +91,8 @@ export const FormSelect = ({
   hideIfEmpty = false,
   isRequired = false,
   onValueChange,
+  name,
+  id,
   ...props
 }: {
   items: Array<{ code: string; name: string; color?: string; badge?: string; logo?: string }>
@@ -97,8 +101,23 @@ export const FormSelect = ({
   placeholder?: string
   hideIfEmpty?: boolean
   isRequired?: boolean
+  name?: string
+  id?: string
 } & SelectProps) => {
-  const isEmpty = (!props.defaultValue || props.defaultValue.toString().trim() === "") && !props.value
+  const [internalValue, setInternalValue] = useState<string | undefined>(
+    (props.value as string | undefined) || (props.defaultValue as string | undefined)
+  )
+  const isControlled = props.value !== undefined
+  const selectValue = (isControlled ? (props.value as string | undefined) : internalValue) || ""
+  const isEmpty = !selectValue || selectValue.toString().trim() === ""
+
+  const labelId = title ? `${id || name || "select"}-label` : undefined
+  const controlId = id || name
+
+  const handleChange = (v: string) => {
+    if (!isControlled) setInternalValue(v)
+    onValueChange?.(v)
+  }
 
   if (hideIfEmpty && isEmpty) {
     return null
@@ -106,13 +125,23 @@ export const FormSelect = ({
 
   return (
     <span className="flex flex-col gap-1">
-      {title && <span className="text-sm font-medium">{title}</span>}
+      {title && (
+        <span className="text-sm font-medium" id={labelId}>
+          {title}
+        </span>
+      )}
+      {/* Hidden input to ensure form submissions include this value */}
+      {name && <input type="hidden" name={name} value={selectValue} />}
       <Select
-        value={props.value}
-        onValueChange={onValueChange}
         {...props}
+        onValueChange={handleChange}
+        {...(isControlled ? { value: props.value as string } : { defaultValue: props.defaultValue as string })}
       >
-        <SelectTrigger className={cn("w-full min-w-[150px] bg-background", isRequired && isEmpty && "bg-yellow-50")}>
+        <SelectTrigger
+          id={controlId}
+          aria-labelledby={labelId}
+          className={cn("w-full min-w-[150px] bg-background", isRequired && isEmpty && "bg-yellow-50")}
+        >
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
         <SelectContent>
@@ -120,9 +149,7 @@ export const FormSelect = ({
           {items.map((item) => (
             <SelectItem key={item.code} value={item.code}>
               <div className="flex items-center gap-2 text-base pr-2">
-                {item.logo && (
-                  <Image src={item.logo} alt={item.name} width={20} height={20} className="rounded-full" />
-                )}
+                {item.logo && <Image src={item.logo} alt={item.name} width={20} height={20} className="rounded-full" />}
                 {item.badge && <Badge className="px-2">{item.badge}</Badge>}
                 {!item.badge && item.color && (
                   <div className="w-2 h-2 rounded-full" style={{ backgroundColor: item.color }} />
diff --git a/components/settings/crud.tsx b/components/settings/crud.tsx
index ab0cd7d..4ffa6e8 100644
--- a/components/settings/crud.tsx
+++ b/components/settings/crud.tsx
@@ -52,6 +52,7 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on
         <input
           type="checkbox"
           checked={editingItem[column.key]}
+          aria-label={String(column.label)}
           onChange={(e) =>
             setEditingItem({
               ...editingItem,
@@ -65,6 +66,7 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on
         <select
           value={editingItem[column.key]}
           className="p-2 rounded-md border bg-transparent"
+          aria-label={String(column.label)}
           onChange={(e) =>
             setEditingItem({
               ...editingItem,
@@ -102,6 +104,7 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on
           <Input
             type="text"
             value={(editingItem[column.key] as string) || ""}
+            aria-label={String(column.label)}
             onChange={(e) =>
               setEditingItem({
                 ...editingItem,
@@ -118,6 +121,7 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on
       <Input
         type="text"
         value={editingItem[column.key] || ""}
+        aria-label={String(column.label)}
         onChange={(e) =>
           setEditingItem({
             ...editingItem,
@@ -134,6 +138,7 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on
         <input
           type="checkbox"
           checked={Boolean(newItem[column.key] || column.defaultValue)}
+          aria-label={String(column.label)}
           onChange={(e) =>
             setNewItem({
               ...newItem,
@@ -147,6 +152,7 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on
         <select
           value={String(newItem[column.key] || column.defaultValue || "")}
           className="p-2 rounded-md border bg-transparent"
+          aria-label={String(column.label)}
           onChange={(e) =>
             setNewItem({
               ...newItem,
@@ -181,24 +187,26 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on
               }
             />
           </div>
-            <Input
-              type="text"
-              value={String(newItem[column.key] || column.defaultValue || "")}
-              onChange={(e) =>
-                setNewItem({
-                  ...newItem,
-                  [column.key]: e.target.value,
-                })
-              }
-              placeholder="#FFFFFF"
-            />
-          </div>
+          <Input
+            type="text"
+            value={String(newItem[column.key] || column.defaultValue || "")}
+            aria-label={String(column.label)}
+            onChange={(e) =>
+              setNewItem({
+                ...newItem,
+                [column.key]: e.target.value,
+              })
+            }
+            placeholder="#FFFFFF"
+          />
+        </div>
       )
     }
     return (
       <Input
         type={column.type || "text"}
         value={String(newItem[column.key] || column.defaultValue || "")}
+        aria-label={String(column.label)}
         onChange={(e) =>
           setNewItem({
             ...newItem,
@@ -279,10 +287,10 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on
                 <div className="flex gap-2">
                   {editingId === (item.code || item.id) ? (
                     <>
-                      <Button size="sm" onClick={() => handleEdit(item.code || item.id)}>
+                      <Button size="sm" onClick={() => handleEdit(item.code || item.id)} aria-label="Save changes">
                         Save
                       </Button>
-                      <Button size="sm" variant="outline" onClick={() => setEditingId(null)}>
+                      <Button size="sm" variant="outline" onClick={() => setEditingId(null)} aria-label="Cancel editing">
                         Cancel
                       </Button>
                     </>
@@ -296,12 +304,18 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on
                             startEditing(item)
                             setIsAdding(false)
                           }}
+                          aria-label={`Edit ${String(item.name || item.code || 'item')}`}
                         >
                           <Edit />
                         </Button>
                       )}
                       {item.isDeletable && (
-                        <Button variant="ghost" size="icon" onClick={() => handleDelete(item.code || item.id)}>
+                        <Button 
+                          variant="ghost" 
+                          size="icon" 
+                          onClick={() => handleDelete(item.code || item.id)}
+                          aria-label={`Delete ${String(item.name || item.code || 'item')}`}
+                        >
                           <Trash2 />
                         </Button>
                       )}
@@ -320,10 +334,10 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on
               ))}
               <TableCell>
                 <div className="flex gap-2">
-                  <Button size="sm" onClick={handleAdd}>
+                  <Button size="sm" onClick={handleAdd} aria-label="Save new item">
                     Save
                   </Button>
-                  <Button size="sm" variant="outline" onClick={() => setIsAdding(false)}>
+                  <Button size="sm" variant="outline" onClick={() => setIsAdding(false)} aria-label="Cancel adding new item">
                     Cancel
                   </Button>
                 </div>
@@ -338,6 +352,7 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on
             setIsAdding(true)
             setEditingId(null)
           }}
+          aria-label="Add new item"
         >
           Add New
         </Button>