From 3af59037138790a4837324ffabf659d6735a0109 Mon Sep 17 00:00:00 2001
From: Leo Torres <leo@leotrs.com>
Date: Fri, 27 Mar 2026 12:12:39 +0100
Subject: [PATCH 1/2] fix: add radiogroup ARIA semantics to ColorPicker
 component

Swatches now use role=radiogroup/radio with aria-checked, aria-label,
roving tabindex, and arrow-key navigation for WCAG 4.1.2 compliance.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/forms/ColorPicker.vue |  55 ++++++---
 .../src/tests/components/ColorPicker.test.js  | 104 +++++++++++++++++-
 .../workspace-input-isolation.test.js         |   6 +-
 3 files changed, 144 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/forms/ColorPicker.vue b/frontend/src/components/forms/ColorPicker.vue
index 7952bfc93..7e1314732 100644
--- a/frontend/src/components/forms/ColorPicker.vue
+++ b/frontend/src/components/forms/ColorPicker.vue
@@ -30,12 +30,13 @@
    *   default-active="brand-b"
    * />
    */
-  import { ref, watch } from "vue";
+  import { ref, watch, computed } from "vue";
 
   const props = defineProps({
     colors: { type: Object, required: true },
     defaultActive: { type: String, default: "" },
     labels: { type: Boolean, default: true },
+    groupLabel: { type: String, default: "Color" },
   });
   const emit = defineEmits(["change"]);
 
@@ -47,28 +48,53 @@
     }
   );
 
+  const colorNames = computed(() => Object.keys(props.colors));
+
+  const tabbableColor = computed(() => {
+    if (activeColor.value && colorNames.value.includes(activeColor.value)) {
+      return activeColor.value;
+    }
+    return colorNames.value[0] || "";
+  });
+
   const onClick = (name) => {
     activeColor.value = name;
     emit("change", name);
   };
+
+  const onKeydown = (e) => {
+    const names = colorNames.value;
+    const idx = names.indexOf(activeColor.value || names[0]);
+    let next;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      e.preventDefault();
+      next = names[(idx + 1) % names.length];
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      e.preventDefault();
+      next = names[(idx - 1 + names.length) % names.length];
+    }
+    if (next !== undefined) {
+      onClick(next);
+    }
+  };
 </script>
 
 <template>
-  <span class="cp-wrapper">
+  <span class="cp-wrapper" role="radiogroup" :aria-label="groupLabel" @keydown="onKeydown">
     <div
       v-for="(color, name) in colors"
       :key="name"
+      role="radio"
       class="swatch"
       :class="[name, activeColor === name ? 'active' : '']"
+      :aria-checked="activeColor === name ? 'true' : 'false'"
+      :aria-label="name"
+      :tabindex="tabbableColor === name ? 0 : -1"
       @click="onClick(name)"
+      @keydown.enter.prevent="onClick(name)"
+      @keydown.space.prevent="onClick(name)"
     >
-      <button
-        type="button"
-        class="circle"
-        :style="{ 'background-color': color }"
-        @keydown.enter.prevent="onClick(name)"
-        @keydown.space.prevent="onClick(name)"
-      />
+      <span class="circle" :style="{ 'background-color': color }" />
       <span v-if="labels" class="label text-caption">{{ name }}</span>
     </div>
   </span>
@@ -92,6 +118,7 @@
     padding: 8px;
     width: 60px;
     transition: var(--transition-bg-color);
+    outline: none;
 
     &:active {
       background-color: var(--blue-400) !important;
@@ -106,6 +133,11 @@
         box-shadow: var(--shadow-strong);
       }
     }
+
+    &:focus-visible {
+      outline: 2px solid var(--border-action, var(--blue-500));
+      outline-offset: 2px;
+    }
   }
 
   .swatch.active {
@@ -129,11 +161,6 @@
     border-radius: 16px;
     border: var(--border-thin) solid var(--gray-700);
     pointer-events: none;
-
-    &:focus-visible {
-      border-color: var(--almost-black);
-      box-shadow: var(--shadow-strong);
-    }
   }
 
   .label {
diff --git a/frontend/src/tests/components/ColorPicker.test.js b/frontend/src/tests/components/ColorPicker.test.js
index 75486da5a..cf4f7058c 100644
--- a/frontend/src/tests/components/ColorPicker.test.js
+++ b/frontend/src/tests/components/ColorPicker.test.js
@@ -13,7 +13,7 @@ describe("ColorPicker.vue", () => {
     swatches.forEach((swatch, idx) => {
       const name = Object.keys(colors)[idx];
       expect(swatch.classes()).toContain(name);
-      const circle = swatch.find("button.circle");
+      const circle = swatch.find(".circle");
       expect(circle.exists()).toBe(true);
       expect(circle.attributes("style")).toMatch(/background-color:/);
       expect(circle.element.style.backgroundColor).toBeTruthy();
@@ -41,13 +41,13 @@ describe("ColorPicker.vue", () => {
 
   it("emits change and toggles active class on keyboard Enter/Space", async () => {
     const wrapper = mount(ColorPicker, { props: { colors } });
-    const circles = wrapper.findAll("button.circle");
+    const swatches = wrapper.findAll(".swatch");
 
-    await circles[0].trigger("keydown.enter");
+    await swatches[0].trigger("keydown", { key: "Enter" });
     expect(wrapper.emitted("change")?.[0]).toEqual(["red"]);
     expect(wrapper.findAll(".swatch")[0].classes()).toContain("active");
 
-    await circles[2].trigger("keydown.space");
+    await swatches[2].trigger("keydown", { key: " " });
     expect(wrapper.emitted("change")?.[1]).toEqual(["blue"]);
     expect(wrapper.findAll(".swatch")[2].classes()).toContain("active");
   });
@@ -80,4 +80,100 @@ describe("ColorPicker.vue", () => {
       expect(swatch.classes()).not.toContain("active");
     });
   });
+
+  describe("ARIA radiogroup semantics", () => {
+    it("has role=radiogroup on the container with aria-label", () => {
+      const wrapper = mount(ColorPicker, { props: { colors } });
+      const container = wrapper.find('[role="radiogroup"]');
+      expect(container.exists()).toBe(true);
+      expect(container.attributes("aria-label")).toBe("Color");
+    });
+
+    it("accepts custom aria-label via groupLabel prop", () => {
+      const wrapper = mount(ColorPicker, {
+        props: { colors, groupLabel: "Highlight color" },
+      });
+      const container = wrapper.find('[role="radiogroup"]');
+      expect(container.attributes("aria-label")).toBe("Highlight color");
+    });
+
+    it("sets role=radio and aria-checked on each swatch", () => {
+      const wrapper = mount(ColorPicker, {
+        props: { colors, defaultActive: "green" },
+      });
+      const radios = wrapper.findAll('[role="radio"]');
+      expect(radios).toHaveLength(3);
+
+      expect(radios[0].attributes("aria-checked")).toBe("false");
+      expect(radios[1].attributes("aria-checked")).toBe("true");
+      expect(radios[2].attributes("aria-checked")).toBe("false");
+    });
+
+    it("sets aria-label on each radio with the color name", () => {
+      const wrapper = mount(ColorPicker, { props: { colors } });
+      const radios = wrapper.findAll('[role="radio"]');
+      expect(radios[0].attributes("aria-label")).toBe("red");
+      expect(radios[1].attributes("aria-label")).toBe("green");
+      expect(radios[2].attributes("aria-label")).toBe("blue");
+    });
+
+    it("uses roving tabindex — only active swatch is tabbable", () => {
+      const wrapper = mount(ColorPicker, {
+        props: { colors, defaultActive: "green" },
+      });
+      const radios = wrapper.findAll('[role="radio"]');
+      expect(radios[0].attributes("tabindex")).toBe("-1");
+      expect(radios[1].attributes("tabindex")).toBe("0");
+      expect(radios[2].attributes("tabindex")).toBe("-1");
+    });
+
+    it("makes first swatch tabbable when no defaultActive is set", () => {
+      const wrapper = mount(ColorPicker, { props: { colors } });
+      const radios = wrapper.findAll('[role="radio"]');
+      expect(radios[0].attributes("tabindex")).toBe("0");
+      expect(radios[1].attributes("tabindex")).toBe("-1");
+      expect(radios[2].attributes("tabindex")).toBe("-1");
+    });
+
+    it("updates aria-checked on click", async () => {
+      const wrapper = mount(ColorPicker, { props: { colors } });
+      const swatches = wrapper.findAll(".swatch");
+
+      await swatches[2].trigger("click");
+      await wrapper.vm.$nextTick();
+
+      const radios = wrapper.findAll('[role="radio"]');
+      expect(radios[0].attributes("aria-checked")).toBe("false");
+      expect(radios[2].attributes("aria-checked")).toBe("true");
+    });
+
+    it("navigates with arrow keys (ArrowRight/ArrowDown moves forward, wraps)", async () => {
+      const wrapper = mount(ColorPicker, {
+        props: { colors, defaultActive: "red" },
+      });
+
+      const container = wrapper.find('[role="radiogroup"]');
+      await container.trigger("keydown", { key: "ArrowRight" });
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.emitted("change")?.[0]).toEqual(["green"]);
+      const radios = wrapper.findAll('[role="radio"]');
+      expect(radios[1].attributes("aria-checked")).toBe("true");
+      expect(radios[1].attributes("tabindex")).toBe("0");
+    });
+
+    it("navigates with ArrowLeft/ArrowUp (wraps around)", async () => {
+      const wrapper = mount(ColorPicker, {
+        props: { colors, defaultActive: "red" },
+      });
+
+      const container = wrapper.find('[role="radiogroup"]');
+      await container.trigger("keydown", { key: "ArrowLeft" });
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.emitted("change")?.[0]).toEqual(["blue"]);
+      const radios = wrapper.findAll('[role="radio"]');
+      expect(radios[2].attributes("aria-checked")).toBe("true");
+    });
+  });
 });
diff --git a/frontend/src/tests/components/workspace-input-isolation.test.js b/frontend/src/tests/components/workspace-input-isolation.test.js
index 41383b82a..a20204511 100644
--- a/frontend/src/tests/components/workspace-input-isolation.test.js
+++ b/frontend/src/tests/components/workspace-input-isolation.test.js
@@ -145,9 +145,9 @@ describe("Workspace Input Isolation @regression", () => {
         props: { colors },
       });
 
-      // ColorPicker has keydown handlers on its buttons, but they should be scoped
-      const buttons = wrapper.findAll("button");
-      expect(buttons.length).toBeGreaterThan(0);
+      // ColorPicker has keydown handlers on its radio swatches, but they should be scoped
+      const radios = wrapper.findAll('[role="radio"]');
+      expect(radios.length).toBeGreaterThan(0);
 
       // Verify no global keyboard listeners were added
       const globalKeyboardListeners = globalListeners.filter(

From b46a74f4d48f0127241d3a4c0336d733d8a18dad Mon Sep 17 00:00:00 2001
From: Leo Torres <leo@leotrs.com>
Date: Fri, 27 Mar 2026 13:51:04 +0100
Subject: [PATCH 2/2] fix: move focus to next swatch on arrow key navigation in
 ColorPicker

Arrow key handler updated activeColor but never called .focus() on the
new element, so keyboard navigation appeared broken in the browser.
Added focus management and a sequential navigation test.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/forms/ColorPicker.vue | 12 ++++---
 .../src/tests/components/ColorPicker.test.js  | 32 +++++++++++++++++++
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/forms/ColorPicker.vue b/frontend/src/components/forms/ColorPicker.vue
index 7e1314732..385887d85 100644
--- a/frontend/src/components/forms/ColorPicker.vue
+++ b/frontend/src/components/forms/ColorPicker.vue
@@ -65,16 +65,18 @@
   const onKeydown = (e) => {
     const names = colorNames.value;
     const idx = names.indexOf(activeColor.value || names[0]);
-    let next;
+    let nextIdx;
     if (e.key === "ArrowRight" || e.key === "ArrowDown") {
       e.preventDefault();
-      next = names[(idx + 1) % names.length];
+      nextIdx = (idx + 1) % names.length;
     } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
       e.preventDefault();
-      next = names[(idx - 1 + names.length) % names.length];
+      nextIdx = (idx - 1 + names.length) % names.length;
     }
-    if (next !== undefined) {
-      onClick(next);
+    if (nextIdx !== undefined) {
+      onClick(names[nextIdx]);
+      const swatches = e.currentTarget.querySelectorAll('[role="radio"]');
+      swatches[nextIdx]?.focus();
     }
   };
 </script>
diff --git a/frontend/src/tests/components/ColorPicker.test.js b/frontend/src/tests/components/ColorPicker.test.js
index cf4f7058c..2409939c3 100644
--- a/frontend/src/tests/components/ColorPicker.test.js
+++ b/frontend/src/tests/components/ColorPicker.test.js
@@ -150,6 +150,7 @@ describe("ColorPicker.vue", () => {
     it("navigates with arrow keys (ArrowRight/ArrowDown moves forward, wraps)", async () => {
       const wrapper = mount(ColorPicker, {
         props: { colors, defaultActive: "red" },
+        attachTo: document.body,
       });
 
       const container = wrapper.find('[role="radiogroup"]');
@@ -160,11 +161,15 @@ describe("ColorPicker.vue", () => {
       const radios = wrapper.findAll('[role="radio"]');
       expect(radios[1].attributes("aria-checked")).toBe("true");
       expect(radios[1].attributes("tabindex")).toBe("0");
+      expect(radios[1].element).toBe(document.activeElement);
+
+      wrapper.unmount();
     });
 
     it("navigates with ArrowLeft/ArrowUp (wraps around)", async () => {
       const wrapper = mount(ColorPicker, {
         props: { colors, defaultActive: "red" },
+        attachTo: document.body,
       });
 
       const container = wrapper.find('[role="radiogroup"]');
@@ -174,6 +179,33 @@ describe("ColorPicker.vue", () => {
       expect(wrapper.emitted("change")?.[0]).toEqual(["blue"]);
       const radios = wrapper.findAll('[role="radio"]');
       expect(radios[2].attributes("aria-checked")).toBe("true");
+      expect(radios[2].element).toBe(document.activeElement);
+
+      wrapper.unmount();
+    });
+
+    it("moves focus through multiple arrow presses sequentially", async () => {
+      const wrapper = mount(ColorPicker, {
+        props: { colors, defaultActive: "red" },
+        attachTo: document.body,
+      });
+
+      const container = wrapper.find('[role="radiogroup"]');
+
+      await container.trigger("keydown", { key: "ArrowRight" });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.findAll('[role="radio"]')[1].element).toBe(document.activeElement);
+
+      await container.trigger("keydown", { key: "ArrowRight" });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.findAll('[role="radio"]')[2].element).toBe(document.activeElement);
+
+      // Wraps to first
+      await container.trigger("keydown", { key: "ArrowRight" });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.findAll('[role="radio"]')[0].element).toBe(document.activeElement);
+
+      wrapper.unmount();
     });
   });
 });