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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user