fix(ui): touch and tablet compatibility for field infobox buttons #12

Merged

andre merged 2 commits from a1/touch-infobox-fix into main

2026-09-27 17:58:55 +02:00

andre commented

2026-09-27 17:57:21 +02:00

Owner

Problem

Auf Android Tablets im Chrome-Browser reagierten die Fragezeichen-Infoboxen (.field-info-btn) nicht zuverlässig:

Touch Target Size: Der Button war lediglich 18×18 px klein. Durch die durchschnittliche Touch-Fläche eines Fingers auf Tablets (~44–48 px) fielen Touches oft auf benachbarte Labels oder darunterliegende Input-Felder, wodurch Chrome den Input fokussierte und den Button-Click verwarf.
Scroll- & Micro-Movement-Kollision: Bei minimaler Bewegung des Fingers während des Taps verwarf mobile Chrome den Click ohne touch-action: manipulation.
SVG Event-Targeting: Der innenliegende SVG fing Events ab ohne pointer-events: none.
Fehlendes Touchend: Mobile Geräte profitierten nicht von einer direkten touchend-Verarbeitung.

Lösung

CSS Hit-Target-Erweiterung:
- Button-Größe auf 26×26 px angehoben (min-width: 26px, min-height: 26px).
- Unsichtbare Touch-Fläche via ::before-Pseudoelement auf mindestens 44×44 px vergrößert (WCAG / Material Design Standard).
- touch-action: manipulation, -webkit-tap-highlight-color: transparent und user-select: none ergänzt.
- pointer-events: none auf die SVG-Grafik gelegt.
JavaScript Touch-Optimierung:
- setupInfoBoxes reagiert nun auf click (Maus/Tastatur) UND touchend (Touchscreen).
- 300 ms Debounce-Guard (lastTrigger) verhindert doppeltes Auslösen.
- pointerdown und touchstart stoppen die Propagation, sodass benachbarte Formularfelder nicht fälschlich den Fokus erhalten.
- initStudio fängt auch readyState === 'interactive' / 'complete' ab.
Automatisierte Tests:
- tests/server-and-api.test.mjs um Assertions für touch-action: manipulation, erweiterten Touch-Bereich (::before) und touchend-Handling erweitert. Alle 49 Tests grün.

## Problem Auf Android Tablets im Chrome-Browser reagierten die Fragezeichen-Infoboxen (`.field-info-btn`) nicht zuverlässig: 1. **Touch Target Size**: Der Button war lediglich 18×18 px klein. Durch die durchschnittliche Touch-Fläche eines Fingers auf Tablets (~44–48 px) fielen Touches oft auf benachbarte Labels oder darunterliegende Input-Felder, wodurch Chrome den Input fokussierte und den Button-Click verwarf. 2. **Scroll- & Micro-Movement-Kollision**: Bei minimaler Bewegung des Fingers während des Taps verwarf mobile Chrome den Click ohne `touch-action: manipulation`. 3. **SVG Event-Targeting**: Der innenliegende SVG fing Events ab ohne `pointer-events: none`. 4. **Fehlendes Touchend**: Mobile Geräte profitierten nicht von einer direkten `touchend`-Verarbeitung. ## Lösung 1. **CSS Hit-Target-Erweiterung**: - Button-Größe auf 26×26 px angehoben (`min-width: 26px`, `min-height: 26px`). - Unsichtbare Touch-Fläche via `::before`-Pseudoelement auf mindestens 44×44 px vergrößert (WCAG / Material Design Standard). - `touch-action: manipulation`, `-webkit-tap-highlight-color: transparent` und `user-select: none` ergänzt. - `pointer-events: none` auf die SVG-Grafik gelegt. 2. **JavaScript Touch-Optimierung**: - `setupInfoBoxes` reagiert nun auf `click` (Maus/Tastatur) UND `touchend` (Touchscreen). - 300 ms Debounce-Guard (`lastTrigger`) verhindert doppeltes Auslösen. - `pointerdown` und `touchstart` stoppen die Propagation, sodass benachbarte Formularfelder nicht fälschlich den Fokus erhalten. - `initStudio` fängt auch `readyState === 'interactive' / 'complete'` ab. 3. **Automatisierte Tests**: - `tests/server-and-api.test.mjs` um Assertions für `touch-action: manipulation`, erweiterten Touch-Bereich (`::before`) und `touchend`-Handling erweitert. Alle 49 Tests grün.

andre added 1 commit

2026-09-27 17:57:22 +02:00