feat(ux): add aria-labels and loading state to config table buttons

Co-authored-by: jmbish04 <26469722+jmbish04@users.noreply.github.com>

Author: google-labs-jules[bot]

.Jules/palette.md

@@ -0,0 +1,4 @@
+
+## 2024-05-18 - Icon-Only Button Accessibility in Config Table
+**Learning:** Config tables often rely heavily on icon-only buttons (like Edit/Save/Cancel) to save horizontal space, which frequently lack proper ARIA labels and tooltips, causing severe accessibility and usability issues for screen reader users and those navigating complex settings.
+**Action:** Always ensure icon-only buttons in dense data tables or lists include `aria-label` and `title` attributes. Additionally, include visual loading states directly within the button for async actions (like Save) to prevent user confusion.

src/frontend/src/components/config/ConfigTable.tsx

@@ -16,7 +16,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Pencil, Check, X, Eye, EyeOff } from "lucide-react";
+import { Pencil, Check, X, Eye, EyeOff, Loader2 } from "lucide-react";
 
 export type ConfigFieldType = "string" | "number" | "boolean" | "secret";
 
@@ -132,15 +132,15 @@ export function ConfigTable({ data, fields, onSave }: ConfigTableProps) {
                 <TableCell className="text-right">
                   {isEditing ? (
                     <div className="flex justify-end gap-2">
-                      <Button size="icon" variant="ghost" onClick={() => handleSave(field.key, field.type)} disabled={isSaving}>
-                        <Check className="h-4 w-4 text-green-500" />
+                      <Button size="icon" variant="ghost" onClick={() => handleSave(field.key, field.type)} disabled={isSaving} aria-label="Save configuration" title="Save configuration">
+                        {isSaving ? <Loader2 className="h-4 w-4 animate-spin text-green-500" /> : <Check className="h-4 w-4 text-green-500" />}
                       </Button>
-                      <Button size="icon" variant="ghost" onClick={handleCancel} disabled={isSaving}>
+                      <Button size="icon" variant="ghost" onClick={handleCancel} disabled={isSaving} aria-label="Cancel editing" title="Cancel editing">
                         <X className="h-4 w-4 text-red-500" />
                       </Button>
                     </div>
                   ) : (
-                    <Button size="icon" variant="ghost" onClick={() => handleEdit(field.key, currentValue)}>
+                    <Button size="icon" variant="ghost" onClick={() => handleEdit(field.key, currentValue)} aria-label="Edit configuration" title="Edit configuration">
                       <Pencil className="h-4 w-4" />
                     </Button>
                   )}