From 275ff51523176e2b9d23d2844ef763d55090f4e1 Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Tue, 29 Sep 2026 04:00:54 +0000 Subject: [PATCH] The tree legend's tabs, info buttons and carets are 24px tap targets rega measured 13 controls under the 24px minimum in the country map's legend at 390px: the tier tabs at 22px tall, their info buttons at 18x22, and the row carets. The tabs take a 24px minimum height and the info buttons a 24px square. The carets grow to 24x24 while a -5px margin returns the extra space, so the tree's indentation (which shares the caret width) does not move. One library component, so every map with this legend gets it. --- library/components/legends/SemanticTreeLegend.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/library/components/legends/SemanticTreeLegend.vue b/library/components/legends/SemanticTreeLegend.vue index 9e1f84408..9f412de6d 100644 --- a/library/components/legends/SemanticTreeLegend.vue +++ b/library/components/legends/SemanticTreeLegend.vue @@ -767,13 +767,14 @@ useShadowStyles(` color: #8b949e; font: 600 10px ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 8px; cursor: pointer; white-space: nowrap; + min-height: 24px; /* 24px tap target (WCAG 2.5.8); measured 22px at 390 */ } .stl-tab:hover { color: #c9d1d9; } .stl-tab-chip.active .stl-tab { color: #fff; } .stl-tab-info { background: rgba(110,118,129,0.15); border: none; border-inline-start: 1px solid #30363d; color: #6e7681; cursor: pointer; - width: 18px; padding: 0; font: 700 9px ui-monospace, monospace; + width: 24px; min-height: 24px; padding: 0; font: 700 9px ui-monospace, monospace; /* was 18x22 */ } .stl-tab-info:hover { background: rgba(59,70,61,0.2); color: #73A17F; } .stl-tab-chip.active .stl-tab-info { @@ -930,6 +931,9 @@ useShadowStyles(` color: #6e7681; width: var(--stl-caret-w); height: var(--stl-caret-w); flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 3px; + /* A 24px tap target that keeps the caret's 14px footprint: the box grows by 10px and a -5px margin + on every side gives the space back, so the tree's indentation (also --stl-caret-w) is unchanged. */ + box-sizing: border-box; width: 24px; height: 24px; margin: -5px; } .stl-caret svg { transition: transform 0.15s; } .stl-caret.open svg { transform: rotate(90deg); }