From 0bca5d3bb7d8de327bc5e087b0b9d379c616033d Mon Sep 17 00:00:00 2001
From: Chris Amow <chris@amow.com>
Date: Tue, 11 Aug 2026 19:10:12 -0500
Subject: [PATCH] color palette improved handling

---
 static/app.js               |  9 ++++++++-
 static/index.html           | 10 ++++++----
 tests/e2e/drawings.test.mjs |  8 ++++++--
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/static/app.js b/static/app.js
index 6c4ba38..0753b9e 100644
--- a/static/app.js
+++ b/static/app.js
@@ -141,6 +141,13 @@ createApp({
       '#d96073', '#b07ad6', '#7d67c9', '#4f6fae',
       '#9fb0c4', '#746c60', '#2c2924', '#c8992f',
     ];
+    const drawingColorNames = {
+      '#65b7cf': 'Cyan', '#27825c': 'Green', '#45c39b': 'Mint', '#a8c85d': 'Lime',
+      '#efb643': 'Amber', '#e0a34a': 'Gold', '#d97a3a': 'Orange', '#bd4545': 'Red',
+      '#d96073': 'Rose', '#b07ad6': 'Purple', '#7d67c9': 'Violet', '#4f6fae': 'Blue',
+      '#9fb0c4': 'Slate', '#746c60': 'Taupe', '#2c2924': 'Charcoal', '#c8992f': 'Ochre',
+    };
+    const drawingColorName = color => drawingColorNames[color] || color;
     const now = ref(Date.now());
     let chartApi = null;
     let socket = null;
@@ -777,6 +784,6 @@ createApp({
       window.removeEventListener('keydown', handleKeydown);
     });
 
-    return { status, price, barAge, dataUpdatedAt, timeframe, timeframes, drawingColors, prefs, clusters, events, diagnosticMode, captureBusy, captureDiagnostic, armedTool, drawName, drawColor, drawWidth, drawSide, snap, selectedDrawing, selectedDrawings, manualLines, hasDrawingSelection, allManualSelected, alertPrice, alertNote, levelColor, levelWidth, addPriceAlert, armTool, selectTimeframe, allEnabled, toggleGroup, deleteSelected, deleteLine, focusDrawing, toggleDrawingSelection, toggleSelectAll, deleteSelectedLines, renameLine, updateLineStyle, setArmed, commentText, commentFloat, comments, drawings, filteredDrawings, drawingFilter, drawingKind, deleteDrawing, deleteFilteredDrawings, toggleComment, togglePinned };
+    return { status, price, barAge, dataUpdatedAt, timeframe, timeframes, drawingColors, drawingColorName, prefs, clusters, events, diagnosticMode, captureBusy, captureDiagnostic, armedTool, drawName, drawColor, drawWidth, drawSide, snap, selectedDrawing, selectedDrawings, manualLines, hasDrawingSelection, allManualSelected, alertPrice, alertNote, levelColor, levelWidth, addPriceAlert, armTool, selectTimeframe, allEnabled, toggleGroup, deleteSelected, deleteLine, focusDrawing, toggleDrawingSelection, toggleSelectAll, deleteSelectedLines, renameLine, updateLineStyle, setArmed, commentText, commentFloat, comments, drawings, filteredDrawings, drawingFilter, drawingKind, deleteDrawing, deleteFilteredDrawings, toggleComment, togglePinned };
   },
 }).mount('#app');
diff --git a/static/index.html b/static/index.html
index 212e924..875f734 100644
--- a/static/index.html
+++ b/static/index.html
@@ -164,12 +164,13 @@
 
                 <div class="drawing-controls" @click.stop v-if="item.kind !== 'comment'">
                   <details class="color-picker">
-                    <summary aria-label="Choose drawing color" title="Choose color"
+                    <summary :aria-label="`Choose drawing color; current color ${drawingColorName(item.line.color || '#65b7cf')}`"
+                             :title="drawingColorName(item.line.color || '#65b7cf')"
                              :style="{ backgroundColor: item.line.color || '#65b7cf' }"></summary>
                     <div class="color-popover">
                       <button v-for="color in drawingColors" :key="color" type="button"
                               :class="{selected: color === item.line.color}" :style="{backgroundColor: color}"
-                              :aria-label="`Use color ${color}`"
+                              :title="drawingColorName(color)" :aria-label="`Use ${drawingColorName(color)} (${color})`"
                               @click.stop="updateLineStyle(item.line, {color}); $event.currentTarget.closest('details').open = false"></button>
                       <label class="custom-color" title="Custom color">
                         <i class="fa-solid fa-palette"></i>
@@ -189,12 +190,13 @@
                 </div>
                 <div class="drawing-controls" @click.stop v-else>
                   <details class="color-picker">
-                    <summary aria-label="Choose comment color" title="Choose color"
+                    <summary :aria-label="`Choose comment color; current color ${drawingColorName(item.comment.color || '#c8992f')}`"
+                             :title="drawingColorName(item.comment.color || '#c8992f')"
                              :style="{ backgroundColor: item.comment.color || '#c8992f' }"></summary>
                     <div class="color-popover">
                       <button v-for="color in drawingColors" :key="color" type="button"
                               :class="{selected: color === item.comment.color}" :style="{backgroundColor: color}"
-                              :aria-label="`Use color ${color}`"
+                              :title="drawingColorName(color)" :aria-label="`Use ${drawingColorName(color)} (${color})`"
                               @click.stop="updateLineStyle(item.comment, {color}); $event.currentTarget.closest('details').open = false"></button>
                       <label class="custom-color" title="Custom color">
                         <i class="fa-solid fa-palette"></i>
diff --git a/tests/e2e/drawings.test.mjs b/tests/e2e/drawings.test.mjs
index 9fadaf3..338d899 100644
--- a/tests/e2e/drawings.test.mjs
+++ b/tests/e2e/drawings.test.mjs
@@ -40,6 +40,8 @@ test('editing a drawing name with Backspace or Delete cannot delete the drawing'
       assert.ok(rowBox.height <= 48, `drawing row is still ${rowBox.height}px tall`);
       assert.equal(await row.locator('.drawing-state .fa-bell').count(), 1,
         'the armed state is not represented by a bell');
+      assert.equal(await row.locator('.color-picker>summary').getAttribute('title'), 'Cyan',
+        'the current-color swatch does not name its color');
       const checkbox = row.locator('.line-select');
       if (await checkbox.isChecked()) await checkbox.click();
       await row.locator('.drawing-secondary>span').click();
@@ -47,8 +49,10 @@ test('editing a drawing name with Backspace or Delete cannot delete the drawing'
       assert.equal(await page.locator('.chart-line-focus').isVisible(), true,
         'selecting the drawing did not point out its trendline on the chart');
       await row.locator('.color-picker>summary').click();
-      assert.equal(await row.locator('.color-popover>button[aria-label^="Use color"]').count(), 16,
+      assert.equal(await row.locator('.color-popover>button[aria-label^="Use "]').count(), 16,
         'the preset palette does not contain 16 colors');
+      assert.equal(await row.locator('.color-popover>button[title="Cyan"]').count(), 1,
+        'palette colors do not expose readable names');
       assert.equal(await row.locator('.custom-color input[type="color"]').count(), 1,
         'the custom color choice is missing');
       assert.equal(await row.locator('.palette-close').count(), 1,
@@ -61,7 +65,7 @@ test('editing a drawing name with Backspace or Delete cannot delete the drawing'
       assert.equal(await row.locator('.color-popover').isVisible(), false,
         'the close control did not close the color palette');
       await row.locator('.color-picker>summary').click();
-      await row.locator('button[aria-label="Use color #bd4545"]').click();
+      await row.locator('button[aria-label="Use Red (#bd4545)"]').click();
       await page.waitForFunction(([id, color]) =>
         window.__chart.levels.find(level => level.id === id)?.color === color,
       [created, '#bd4545']);