doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

The tree legend's tabs, info buttons and carets are 24px tap targets

Browse source 
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.
This commit is contained in:
Doxa Maps 2026-09-29 04:00:54 +00:00
parent c83a9827ff
commit 275ff51523
1 changed files with 5 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
library/components/legends/SemanticTreeLegend.vue
View file

@ -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); }