From 12e7e68866272295af107442a6274502bfc2045c Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 28 Jun 2026 23:26:43 +0000
Subject: [PATCH] UX: Add ARIA labels to icon-only buttons in ArrivalChipBar

---
 .Jules/palette.md                             | 3 +++
 vessel/src/components/chat/ArrivalChipBar.tsx | 3 +++
 2 files changed, 6 insertions(+)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 000000000..3954c8c6c
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-02-12 - Added ARIA labels to icon-only buttons
+**Learning:** Found several icon-only buttons (`<Plus />`, `<X />`) used for managing state input tags in the `ArrivalChipBar.tsx` component that lacked `aria-label`s. This is a common pattern to watch out for.
+**Action:** When finding inline controls that look like tags or chips, verify that any interactive, icon-only buttons within them have clear, descriptive `aria-label`s.
diff --git a/vessel/src/components/chat/ArrivalChipBar.tsx b/vessel/src/components/chat/ArrivalChipBar.tsx
index 98ab98b51..9c073e660 100644
--- a/vessel/src/components/chat/ArrivalChipBar.tsx
+++ b/vessel/src/components/chat/ArrivalChipBar.tsx
@@ -234,6 +234,7 @@ export function ArrivalChipBar({
               <button
                 type="button"
                 disabled={disabled}
+                aria-label="Remove custom state"
                 onClick={handleRemoveCustom}
                 className="text-emerald-400 hover:text-emerald-200 focus-visible:outline-none"
                 title="Remove custom state"
@@ -256,6 +257,7 @@ export function ArrivalChipBar({
               />
               <button
                 type="button"
+                aria-label="Add custom state"
                 onClick={handleCustomSubmit}
                 className="text-slate-400 hover:text-slate-200"
               >
@@ -263,6 +265,7 @@ export function ArrivalChipBar({
               </button>
               <button
                 type="button"
+                aria-label="Cancel custom state"
                 onClick={() => setIsTypingCustom(false)}
                 className="text-slate-500 hover:text-slate-400"
               >