Pruefdurchgang ueber alle 26 Bildschirme - fuenf Fehler behoben, HIG nachgezogen
Gemessen statt geschaut: eine Pruefroutine lief auf jedem Bildschirm und
pruefte Ueberlauf, Tippziele, abgeschnittenen Text, Bilder ohne Quelle und
WCAG-Kontrast fuer jeden Textknoten. Dazu die Live-App mit echten Daten, die
Musterseite fuer Leerzustaende und das Panel zum Abgleich.
1. Deutsche Datumsangaben wurden falsch gelesen. new Date("01.03.2025")
liest amerikanisch: Tage bis 12 wurden still vertauscht, ab Tag 13 fiel
der Wert ganz weg. Die Erstzulassung stand auf zwei Bildschirmen
unterschiedlich da. alsZeitpunkt() erkennt jetzt ISO, TT.MM.JJJJ und
MM/JJJJ, weist unmoegliche Daten ab und fuehrt die Genauigkeit mit -
aus "08/2026" wird "August 2026", kein erfundener Erster.
2. Die Hauptuntersuchung war in beiden Oberflaechen unerreichbar. Das Panel
leitete sie aus der Erstzulassung ab, aber nur bei MM/JJJJ, und benutzte
den eingetragenen Wert gar nicht. Jetzt beide: eingetragene Faelligkeit
vor Servicebuch vor Erstzulassung + 24 Monate.
3. Die Tankstellenmarke stand zweimal da, wenn der Name kein Komma hat
("Shell München Ost"). ohneMarkeVorn() nimmt sie vorn ab.
4. Bilder wurden geholt, obwohl beide wussten, dass es sie nicht gibt -
fuenf 404 fuer dieselbe Datei in einem Ladevorgang. Jetzt gar keine
Adresse bei Stand 0; nachgemessen 4 Anfragen, alle 200.
5. Ein Bildelement ohne Quelle zeigte das kaputte Bildsymbol, und onerror
greift dort nicht: ohne src gibt es keinen Ladeversuch.
Dazu: leere Klammern beim Steuersatz, leere graue Kachel bei leerer
Leistungsgruppe, Umbruch auf dem Einrichtungsbildschirm, drei
Leerdarstellungen in einer Kachel, fehlende Grundschrift.
Apple HIG: Kontrast war an einer Stelle 3,18 statt 4,5, weisse Schrift auf
der Loeschflaeche 3,41/3,55. Rot als Schrift und Rot als Flaeche sind jetzt
getrennte Token (--bad / --bad-flaeche), beide Apples systemRed fuer
erhoehten Kontrast. Tippziele: unsichtbares 44x44-Overlay, wo die sichtbare
Groesse Teil des Bildes ist, echte Mindesthoehe, wo das Element Flaeche ist -
Formulare werden dadurch sichtbar hoeher.
Neu auf Wunsch: Wischen in der Bildergalerie (beide Richtungen) und die
HIG-konforme Loeschgeste - ein voller Wisch loescht ohne zweiten Tipp, ab
55 % der Zeilenbreite, mit wachsender roter Flaeche und erhaltener
Rueckfrage. Dabei fiel auf, dass der Zugwert aus dem React-Zustand gelesen
wurde und ein schneller Wisch dadurch verlorenging; er liegt jetzt in einer
Referenz.
Paritaet: alle 26 Routen und Titel decken sich, Fahrzeugstatus zeilengleich,
zwei ungeplante Abweichungen (Datumsformatierung, Herkunft der
Hauptuntersuchung) geschlossen.
tsc sauber, 271 Tests, vite build sauber, Design-System gebaut, Panel als
Modul geparst, audi_ha_test auf 2026.9.4.23 ohne Traceback. Live nachgemessen:
Datum auf beiden Bildschirmen gleich, keine 404 mehr, Zurueck-Pfeil sichtbar
34x34 und treffbar 44x44, Galerie wischt in beide Richtungen, voller Wisch
loest die Rueckfrage aus, keine Kontrast-Unterschreitung mehr.
This commit is contained in:
@@ -158,7 +158,11 @@ input[type="date"].dm-eingabe {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32px;
|
||||
/* Seitlich 20 statt 32: auf 375 px blieben fuer die Beschriftung nur
|
||||
87 px, und "Server-Adresse" brach dadurch am Bindestrich um -
|
||||
ausgerechnet auf dem allerersten Bildschirm (gemessen 04.09.2026).
|
||||
Oben und unten bleibt es bei 32. */
|
||||
padding: 32px 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@@ -397,7 +401,7 @@ input[type="date"].dm-eingabe {
|
||||
visibility: hidden;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: var(--bad);
|
||||
background: var(--bad-flaeche, var(--bad));
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
font-size: 15px;
|
||||
@@ -408,6 +412,13 @@ input[type="date"].dm-eingabe {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Voll durchgewischt: die Flaeche wird kraeftiger, damit vor dem Loslassen
|
||||
ablesbar ist, dass jetzt geloescht wird und nicht nur aufgeklappt.
|
||||
Wortgleich mit .ads-swipe-delete--armed im Design-System. */
|
||||
.dm-wisch__loeschen--scharf {
|
||||
filter: brightness(1.12);
|
||||
}
|
||||
|
||||
.dm-wisch__inhalt {
|
||||
position: relative;
|
||||
/* Deckend, NICHT --tile: die Zeile liegt auf einer Kachel, und die ist
|
||||
@@ -2176,3 +2187,58 @@ button.dm-listenzeile {
|
||||
.dm-debugknopf:active {
|
||||
color: var(--fg2);
|
||||
}
|
||||
|
||||
/* --- Apple HIG: 44x44 pt als kleinstes Tippziel -------------------------
|
||||
Am 04.09.2026 gemessen und hier nachgezogen. Zwei Wege, je nach Element:
|
||||
|
||||
(a) Unsichtbares Overlay, wo die sichtbare Groesse Teil des Bildes ist -
|
||||
der Griff des Standort-Blatts (36x4) und die Zahnrad-Knoepfe.
|
||||
(b) Echte Mindesthoehe, wo das Element ohnehin eine Flaeche ist und 44px
|
||||
nicht stoeren - Eingabefelder, Auswahlfelder, Pillen, Segmente.
|
||||
|
||||
(b) veraendert das Bild sichtbar: Formulare werden etwas hoeher. Das ist
|
||||
Absicht - 36px hohe Eingabefelder sind auf dem Telefon zu knapp. */
|
||||
|
||||
.dm-standortmenu__griff {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dm-standortmenu__griff::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 88px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.dm-standort-pille {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.dm-montiert {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.ads-feld input,
|
||||
.ads-feld select,
|
||||
input.dm-eingabe,
|
||||
select.dm-auswahl {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/* Das Druckfeld ist schmal (58px), aber die Hoehe gilt auch dort. */
|
||||
.ads-feld input.druckfeld {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.ads-seg button {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/* Der Schieberegler traegt seinen Daumen selbst; die Bahn ist duenn, das
|
||||
Element darum darf trotzdem 44px hoch treffen. */
|
||||
input[type="range"] {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user