diff --git a/src/display/editor/color_picker.js b/src/display/editor/color_picker.js
index 0ef44a5ef..f01c1d52e 100644
--- a/src/display/editor/color_picker.js
+++ b/src/display/editor/color_picker.js
@@ -36,6 +36,8 @@ class ColorPicker {
 
   #uiManager = null;
 
+  #type;
+
   static get _keyboardManager() {
     return shadow(
       this,
@@ -61,7 +63,13 @@ class ColorPicker {
   }
 
   constructor({ editor = null, uiManager = null }) {
-    this.#isMainColorPicker = !editor;
+    if (editor) {
+      this.#isMainColorPicker = false;
+      this.#type = AnnotationEditorParamsType.HIGHLIGHT_COLOR;
+    } else {
+      this.#isMainColorPicker = true;
+      this.#type = AnnotationEditorParamsType.HIGHLIGHT_DEFAULT_COLOR;
+    }
     this.#uiManager = editor?._uiManager || uiManager;
     this.#eventBus = this.#uiManager._eventBus;
     this.#defaultColor =
@@ -85,16 +93,14 @@ class ColorPicker {
   }
 
   renderMainDropdown() {
-    const dropdown = (this.#dropdown = this.#getDropdownRoot(
-      AnnotationEditorParamsType.HIGHLIGHT_DEFAULT_COLOR
-    ));
+    const dropdown = (this.#dropdown = this.#getDropdownRoot());
     dropdown.setAttribute("aria-orientation", "horizontal");
     dropdown.setAttribute("aria-labelledby", "highlightColorPickerLabel");
 
     return dropdown;
   }
 
-  #getDropdownRoot(paramType) {
+  #getDropdownRoot() {
     const div = document.createElement("div");
     div.addEventListener("contextmenu", noContextMenu);
     div.className = "dropdown";
@@ -114,10 +120,7 @@ class ColorPicker {
       swatch.className = "swatch";
       swatch.style.backgroundColor = color;
       button.setAttribute("aria-selected", color === this.#defaultColor);
-      button.addEventListener(
-        "click",
-        this.#colorSelect.bind(this, paramType, color)
-      );
+      button.addEventListener("click", this.#colorSelect.bind(this, color));
       div.append(button);
     }
 
@@ -126,11 +129,11 @@ class ColorPicker {
     return div;
   }
 
-  #colorSelect(type, color, event) {
+  #colorSelect(color, event) {
     event.stopPropagation();
     this.#eventBus.dispatch("switchannotationeditorparams", {
       source: this,
-      type,
+      type: this.#type,
       value: color,
     });
   }
diff --git a/test/integration/highlight_editor_spec.mjs b/test/integration/highlight_editor_spec.mjs
index b28eec628..61f8dd9cd 100644
--- a/test/integration/highlight_editor_spec.mjs
+++ b/test/integration/highlight_editor_spec.mjs
@@ -331,4 +331,100 @@ describe("Highlight Editor", () => {
       );
     });
   });
+
+  describe("Color picker and keyboard", () => {
+    let pages;
+
+    beforeAll(async () => {
+      pages = await loadAndWait(
+        "tracemonkey.pdf",
+        ".annotationEditorLayer",
+        null,
+        null,
+        {
+          highlightEditorColors:
+            "yellow=#FFFF00,green=#00FF00,blue=#0000FF,pink=#FF00FF,red=#FF0000",
+        }
+      );
+    });
+
+    afterAll(async () => {
+      await closePages(pages);
+    });
+
+    it("must be correctly serialized", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await page.click("#editorHighlight");
+          await page.waitForSelector(".annotationEditorLayer.highlightEditing");
+          const sel = getEditorSelector(0);
+
+          const rect = await getSpanRectFromText(page, 1, "Abstract");
+          const x = rect.x + rect.width / 2;
+          const y = rect.y + rect.height / 2;
+          await page.mouse.click(x, y, { count: 2 });
+
+          await page.waitForSelector(sel);
+          await page.waitForSelector(
+            `.page[data-page-number = "1"] svg.highlightOutline.selected`
+          );
+
+          await page.waitForSelector(`${sel} .editToolbar button.colorPicker`);
+          await page.click(`${sel} .editToolbar button.colorPicker`);
+          await page.waitForSelector(
+            `${sel} .editToolbar button[title = "Red"]`
+          );
+          await page.click(`${sel} .editToolbar button[title = "Red"]`);
+          await page.waitForSelector(
+            `.page[data-page-number = "1"] svg.highlight[fill = "#FF0000"]`
+          );
+
+          await page.keyboard.press("ArrowUp");
+          await page.waitForSelector(
+            `${sel} .editToolbar button[title = "Pink"]:focus`
+          );
+          await page.keyboard.press("Enter");
+          await page.waitForSelector(
+            `.page[data-page-number = "1"] svg.highlight[fill = "#FF00FF"]`
+          );
+
+          await page.keyboard.press("ArrowUp");
+          await page.waitForSelector(
+            `${sel} .editToolbar button[title = "Blue"]:focus`
+          );
+          await page.keyboard.press(" ");
+          await page.waitForSelector(
+            `.page[data-page-number = "1"] svg.highlight[fill = "#0000FF"]`
+          );
+
+          await page.keyboard.press("ArrowLeft");
+          await page.waitForSelector(
+            `${sel} .editToolbar button[title = "Green"]:focus`
+          );
+          await page.keyboard.press("Enter");
+          await page.waitForSelector(
+            `.page[data-page-number = "1"] svg.highlight[fill = "#00FF00"]`
+          );
+
+          await page.keyboard.press("ArrowRight");
+          await page.waitForSelector(
+            `${sel} .editToolbar button[title = "Blue"]:focus`
+          );
+          await page.keyboard.press("Enter");
+          await page.waitForSelector(
+            `.page[data-page-number = "1"] svg.highlight[fill = "#0000FF"]`
+          );
+
+          await page.keyboard.press("ArrowDown");
+          await page.waitForSelector(
+            `${sel} .editToolbar button[title = "Pink"]:focus`
+          );
+          await page.keyboard.press(" ");
+          await page.waitForSelector(
+            `.page[data-page-number = "1"] svg.highlight[fill = "#FF00FF"]`
+          );
+        })
+      );
+    });
+  });
 });