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

Legend progress bar segments are 24px touch targets while the bar still paints 10px

Browse source 
Each segment was a 10px-tall button, under the 24px minimum (WCAG 2.5.8). The
track is now 24px with a centred 10px painted band, the segment buttons clip
their colour to that band, and negative margins keep the legend's layout
unchanged.
This commit is contained in:
Doxa Maps 2026-09-27 22:34:59 +00:00
parent 8afea17c6b
commit b347310ef4
1 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
library/components/legends/LegendProgressBar.vue
View file

@ -67,9 +67,13 @@ useShadowStyles(`
part of the legend chrome. Dark is the STL default; .lpb-light mirrors the
.stl-panel[data-theme="light"] palette. ── */
.lpb{position:relative;display:flex;align-items:center;gap:8px;min-width:0;width:100%;box-sizing:border-box;}
.lpb-track{position:relative;flex:1 1 auto;min-width:60px;display:flex;height:10px;border-radius:5px;overflow:hidden;background:rgba(110,118,129,0.25);}
/* Hit area vs paint (WCAG 2.5.8, rega at 390: every segment was a 10px-tall button). The track is 24px
tall so each segment button is a 24px target, but it paints only a 10px band: the track's background is
a centred 10px strip and each segment clips its colour to its content box inside 7px of padding. The
-7px margins keep the legend's layout exactly 10px tall, as before. */
.lpb-track{position:relative;flex:1 1 auto;min-width:60px;display:flex;height:24px;margin:-7px 0;overflow:hidden;background:linear-gradient(rgba(110,118,129,0.25),rgba(110,118,129,0.25)) center/100% 10px no-repeat;}
.lpb-span{display:flex;height:100%;min-width:0;flex:0 0 auto;}
.lpb-seg{appearance:none;-webkit-appearance:none;border:none;margin:0;padding:0;height:100%;display:block;flex:0 0 auto;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transition:filter 0.12s,box-shadow 0.12s;}
.lpb-seg{appearance:none;-webkit-appearance:none;border:none;margin:0;padding:7px 0;box-sizing:border-box;background-clip:content-box !important;height:100%;display:block;flex:0 0 auto;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transition:filter 0.12s,box-shadow 0.12s;}
.lpb-seg-rest{flex:1 1 auto;}
.lpb-seg:focus{outline:none;}
/* Hover / keyboard-focus / active highlight — brighter + a 1px inset ring (inset