Add ARIA labels and title attributes to icon buttons in ConfigTable

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

Author: google-labs-jules[bot]

.Jules/palette.md

@@ -0,0 +1,4 @@
+
+## 2024-03-24 - Accessibility for Icon-Only Buttons
+**Learning:** Found that multiple components (like ConfigTable) use icon-only buttons (`<Button size="icon">`) without providing `aria-label` or `title` attributes, making them inaccessible to screen readers and difficult to identify for sighted users who rely on tooltips.
+**Action:** When adding or reviewing icon-only buttons, always ensure they include an `aria-label` attribute for screen reader accessibility and a `title` attribute for hover tooltips.

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

@@ -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}>
+                      <Button size="icon" variant="ghost" onClick={() => handleSave(field.key, field.type)} disabled={isSaving} aria-label="Save" title="Save">
                         <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" title="Cancel">
                         <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" title="Edit">
                       <Pencil className="h-4 w-4" />
                     </Button>
                   )}