From 84b9bcdbfbb17b7d83dbaaa4c13a6180f51d9391 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 16 Dec 2025 09:24:00 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20accessibili?=
 =?UTF-8?q?ty=20of=20StationRow=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What:
- Made the delete button visible when focused via keyboard.
- Added descriptive ARIA labels to "Arm", "Name", and "Weight" inputs.

🎯 Why:
- The delete button was invisible to keyboard users (opacity: 0) until hovered, making it inaccessible.
- Inputs in the "StationRow" component lacked accessible names, especially for custom rows where the visual label is replaced by an input.

♿ Accessibility:
- Keyboard users can now see the delete button when focusing on it.
- Screen reader users will now hear "Arm for [Item Name]" and "Weight for [Item Name]" instead of generic or unlabelled inputs.
---
 .Jules/palette.md         | 3 +++
 components/StationRow.tsx | 9 ++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..9f74deb
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-24 - Accessibility of Interactive Custom Rows
+**Learning:** Icon-only delete buttons hidden via opacity (to reduce clutter) are completely inaccessible to keyboard users unless they have a focus state that restores opacity.
+**Action:** Always pair `opacity-0 group-hover:opacity-100` with `focus:opacity-100` for interactive elements.
diff --git a/components/StationRow.tsx b/components/StationRow.tsx
index 29dba40..5852700 100644
--- a/components/StationRow.tsx
+++ b/components/StationRow.tsx
@@ -52,8 +52,8 @@ export default function StationRow({
       {isCustom && onDelete && (
         <button 
           onClick={onDelete}
-          className="absolute top-2 right-2 text-red-300 hover:text-red-500 p-1 opacity-0 group-hover:opacity-100 transition-opacity"
-          aria-label="Remove item"
+          className="absolute top-2 right-2 text-red-300 hover:text-red-500 p-1 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity"
+          aria-label={`Remove ${name || 'item'}`}
         >
           ×
         </button>
@@ -69,6 +69,7 @@ export default function StationRow({
              value={name}
              onChange={(e) => onNameChange(e.target.value)}
              className="text-sm font-medium text-gray-700 dark:text-gray-200 bg-transparent border-b border-transparent hover:border-orange-200 focus:border-orange-500 focus:outline-none w-full mb-1 transition-colors"
+             aria-label="Item Name"
            />
           ) : (
             <label htmlFor={id} className="text-sm font-medium text-gray-700 dark:text-gray-200">{name}</label>
@@ -88,12 +89,13 @@ export default function StationRow({
         {/* Metadata Area (Arm & Moment) */}
         <div className="flex flex-wrap items-center gap-2 text-xs text-gray-400 dark:text-gray-500 mt-1">
           <div className="flex items-center gap-1">
-            <span>Arm:</span>
+            <span id={`arm-label-${id}`}>Arm:</span>
             <input 
               type="number" 
               value={arm}
               onChange={(e) => onArmChange(e.target.value)}
               className={`w-10 bg-transparent border-b border-gray-300 dark:border-gray-600 text-center text-gray-600 dark:text-gray-400 focus:outline-none focus:bg-white dark:focus:bg-gray-800 transition-colors ${isCustom ? 'focus:border-orange-500' : 'focus:border-blue-500'}`}
+              aria-label={`Arm for ${name}`}
             />
           </div>
           {/* Moment Display */}
@@ -118,6 +120,7 @@ export default function StationRow({
             ${isCustom ? 'focus:ring-orange-500' : 'focus:ring-blue-500'}`}
           value={weight || ""}
           onChange={(e) => onWeightChange(e.target.value)}
+          aria-label={isCustom ? `Weight for ${name}` : undefined}
         />
         <span className="text-xs text-gray-400 font-medium w-6">
           {isFuel && useGallons ? "Gals" : "Lbs"}