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
+27 -14
View File
@@ -152,7 +152,8 @@
color: var(--color-text-tertiary);
transition: color var(--transition-fast);
-webkit-tap-highlight-color: transparent;
min-height: unset;
min-height: var(--target-lg);
min-width: var(--target-lg);
text-decoration: none;
}
@@ -322,7 +323,7 @@
border-radius: var(--radius-sm);
padding: 8px var(--space-2);
gap: 0;
min-height: unset;
min-height: var(--target-lg);
font-size: var(--text-sm);
color: var(--color-text-secondary);
background: transparent;
@@ -629,6 +630,13 @@
border-radius: var(--radius-full);
color: var(--color-text-secondary);
transition: background-color var(--transition-fast);
position: relative;
}
.modal-panel__close::before {
content: '';
position: absolute;
inset: -8px;
}
.modal-panel__close:hover {
@@ -678,7 +686,7 @@
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
min-height: 36px;
min-height: var(--target-lg);
transition:
background-color var(--transition-fast),
box-shadow var(--transition-fast),
@@ -687,10 +695,9 @@
white-space: nowrap;
}
/* Touch-Targets: 44px auf Mobile */
@media (max-width: 1023px) {
@media (min-width: 1024px) {
.btn {
min-height: 44px;
min-height: var(--target-md);
}
}
@@ -747,15 +754,15 @@
.btn--icon {
padding: var(--space-2);
min-height: 36px;
min-width: 36px;
min-height: var(--target-lg);
min-width: var(--target-lg);
border-radius: var(--radius-sm);
}
@media (max-width: 1023px) {
@media (min-width: 1024px) {
.btn--icon {
min-height: 44px;
min-width: 44px;
min-height: var(--target-md);
min-width: var(--target-md);
}
}
@@ -807,12 +814,12 @@
color: var(--color-text-primary);
font-size: var(--text-md);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
min-height: 44px;
min-height: var(--target-lg);
}
@media (min-width: 1024px) {
.input {
min-height: 36px;
min-height: var(--target-md);
font-size: var(--text-base);
}
}
@@ -1172,7 +1179,13 @@
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
min-height: unset;
position: relative;
}
.rrule-day::before {
content: '';
position: absolute;
inset: -4px;
}
.rrule-day:hover {