a11y: Touch-Target System mit Token-basierter Sizing (Redesign Phase E)

- Neue Tokens: --target-sm (32px), --target-md (40px), --target-lg (48px)
- Globale min-height:44px Regel aus reset.css entfernt
- Alle 28 min-height:unset Overrides eliminiert
- Strategy A: Buttons, Nav-Items, Inputs → 48px mobile, 40px desktop
- Strategy B: Kleine Elemente (Checkboxen, Swatches, Delete-Buttons)
  → ::before Pseudo-Element expandiert Touch-Area auf 48×48px

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ulsklyc
2026-03-26 13:43:12 +01:00
parent 73cd322a71
commit 152246185e
10 changed files with 124 additions and 39 deletions
+18 -6
View File
@@ -90,7 +90,7 @@
cursor: pointer;
flex-shrink: 0;
transition: all var(--transition-fast);
min-height: unset;
min-height: var(--target-lg);
}
.list-tab__new:hover {
@@ -182,8 +182,8 @@
color: var(--color-text-secondary);
font-size: var(--text-sm);
text-align: center;
min-height: unset;
height: 30px;
min-height: var(--target-lg);
height: auto;
}
.quick-add__qty:focus {
@@ -223,7 +223,7 @@
cursor: pointer;
flex-shrink: 0;
transition: background-color var(--transition-fast);
min-height: unset;
min-height: var(--target-lg);
}
.quick-add__btn:hover { background-color: var(--color-accent-hover); }
@@ -325,7 +325,13 @@
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
min-height: unset;
position: relative;
}
.item-check::before {
content: '';
position: absolute;
inset: -12px;
}
.item-check--checked {
@@ -387,11 +393,17 @@
cursor: pointer;
opacity: 0;
transition: opacity var(--transition-fast), color var(--transition-fast);
min-height: unset;
position: relative;
border: none;
flex-shrink: 0;
}
.item-delete::before {
content: '';
position: absolute;
inset: -8px;
}
.shopping-item:hover .item-delete,
.shopping-item:focus-within .item-delete {
opacity: 1;