From 152246185e99a73fac2422c2eed61e5400b20f68 Mon Sep 17 00:00:00 2001 From: ulsklyc Date: Thu, 26 Mar 2026 13:43:12 +0100 Subject: [PATCH] a11y: Touch-Target System mit Token-basierter Sizing (Redesign Phase E) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- public/styles/budget.css | 10 ++++++++-- public/styles/calendar.css | 10 +++++++++- public/styles/contacts.css | 2 +- public/styles/layout.css | 41 +++++++++++++++++++++++++------------- public/styles/meals.css | 20 +++++++++++++++---- public/styles/notes.css | 24 ++++++++++++++++++++-- public/styles/reset.css | 5 ----- public/styles/shopping.css | 24 ++++++++++++++++------ public/styles/tasks.css | 20 +++++++++++++++---- public/styles/tokens.css | 7 +++++++ 10 files changed, 124 insertions(+), 39 deletions(-) diff --git a/public/styles/budget.css b/public/styles/budget.css index 75a5f7f..0fd918a 100644 --- a/public/styles/budget.css +++ b/public/styles/budget.css @@ -259,7 +259,13 @@ justify-content: center; opacity: 0; transition: opacity var(--transition-fast), color var(--transition-fast); - min-height: unset; + position: relative; +} + +.budget-entry__delete::before { + content: ''; + position: absolute; + inset: -10px; } .budget-entry:hover .budget-entry__delete { @@ -308,7 +314,7 @@ background: none; color: var(--color-text-secondary); transition: all var(--transition-fast); - min-height: unset; + min-height: var(--target-lg); } .amount-type-btn--income.amount-type-btn--active { diff --git a/public/styles/calendar.css b/public/styles/calendar.css index 5515d38..9f669a8 100644 --- a/public/styles/calendar.css +++ b/public/styles/calendar.css @@ -79,7 +79,7 @@ color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); - min-height: unset; + min-height: var(--target-lg); white-space: nowrap; } @@ -530,6 +530,14 @@ border: 2px solid transparent; cursor: pointer; transition: transform var(--transition-fast), border-color var(--transition-fast); + position: relative; +} + +.color-swatch::before { + content: ''; + position: absolute; + inset: -10px; + border-radius: var(--radius-full); } .color-swatch:hover { diff --git a/public/styles/contacts.css b/public/styles/contacts.css index 312ee97..02067d7 100644 --- a/public/styles/contacts.css +++ b/public/styles/contacts.css @@ -203,7 +203,7 @@ justify-content: center; color: var(--color-text-secondary); transition: background-color var(--transition-fast), color var(--transition-fast); - min-height: unset; + min-height: var(--target-lg); text-decoration: none; } diff --git a/public/styles/layout.css b/public/styles/layout.css index a01e439..99c209c 100644 --- a/public/styles/layout.css +++ b/public/styles/layout.css @@ -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 { diff --git a/public/styles/meals.css b/public/styles/meals.css index 109e23c..a6a04da 100644 --- a/public/styles/meals.css +++ b/public/styles/meals.css @@ -161,7 +161,7 @@ font-size: var(--text-sm); padding: var(--space-2); transition: color var(--transition-fast); - min-height: unset; + min-height: var(--target-lg); } .meal-slot__add-btn:hover { @@ -230,10 +230,16 @@ display: flex; align-items: center; justify-content: center; - min-height: unset; + position: relative; transition: color var(--transition-fast), background-color var(--transition-fast); } +.meal-card__action-btn::before { + content: ''; + position: absolute; + inset: -12px; +} + .meal-card__action-btn:hover { color: var(--color-danger); background-color: var(--color-surface-2); @@ -310,10 +316,16 @@ align-items: center; justify-content: center; flex-shrink: 0; - min-height: unset; + position: relative; transition: color var(--transition-fast); } +.ingredient-row__remove::before { + content: ''; + position: absolute; + inset: -8px; +} + .ingredient-row__remove:hover { color: var(--color-danger); } @@ -328,7 +340,7 @@ border: none; cursor: pointer; padding: var(--space-1) 0; - min-height: unset; + min-height: var(--target-lg); } /* Einkaufsliste-Auswahl im Modal */ diff --git a/public/styles/notes.css b/public/styles/notes.css index 15326df..b944cec 100644 --- a/public/styles/notes.css +++ b/public/styles/notes.css @@ -98,12 +98,18 @@ display: flex; align-items: center; justify-content: center; - min-height: unset; + position: relative; opacity: 0; transition: opacity var(--transition-fast), background-color var(--transition-fast); color: var(--color-text-primary); } +.note-card__pin::before { + content: ''; + position: absolute; + inset: -12px; +} + .note-card--pinned .note-card__pin { opacity: 1; background: var(--color-overlay-light); @@ -177,12 +183,18 @@ display: flex; align-items: center; justify-content: center; - min-height: unset; + position: relative; color: var(--color-text-tertiary); opacity: 0; transition: opacity var(--transition-fast), background-color var(--transition-fast); } +.note-card__delete::before { + content: ''; + position: absolute; + inset: -12px; +} + .note-card:hover .note-card__delete { opacity: 1; } @@ -229,10 +241,18 @@ height: 28px; border-radius: var(--radius-full); border: 2px solid transparent; + position: relative; cursor: pointer; transition: transform var(--transition-fast), border-color var(--transition-fast); } +.note-color-swatch::before { + content: ''; + position: absolute; + inset: -10px; + border-radius: var(--radius-full); +} + .note-color-swatch:hover { transform: scale(1.15); } .note-color-swatch--active { border-color: var(--color-text-primary); transform: scale(1.1); } diff --git a/public/styles/reset.css b/public/styles/reset.css index 7f79aa6..54a8e2f 100644 --- a/public/styles/reset.css +++ b/public/styles/reset.css @@ -59,11 +59,6 @@ h1, h2, h3, h4, h5, h6 { line-height: var(--line-height-tight); } -/* Touch-Targets: Mindestgröße 44px */ -button, [role="button"], input[type="checkbox"], input[type="radio"] { - min-height: 44px; -} - /* Fokus-Styles (Accessibility) */ :focus-visible { outline: 2px solid var(--color-accent); diff --git a/public/styles/shopping.css b/public/styles/shopping.css index b577ff7..421a108 100644 --- a/public/styles/shopping.css +++ b/public/styles/shopping.css @@ -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; diff --git a/public/styles/tasks.css b/public/styles/tasks.css index 12038e9..be742bb 100644 --- a/public/styles/tasks.css +++ b/public/styles/tasks.css @@ -61,7 +61,7 @@ font-weight: var(--font-weight-medium); color: var(--color-text-secondary); transition: background-color var(--transition-fast), color var(--transition-fast); - min-height: unset; + min-height: var(--target-lg); cursor: pointer; } @@ -265,7 +265,13 @@ align-items: center; justify-content: center; transition: border-color var(--transition-fast), background-color var(--transition-fast); - min-height: unset; + position: relative; +} + +.task-status-btn::before { + content: ''; + position: absolute; + inset: -13px; } .task-status-btn--done { @@ -433,7 +439,13 @@ align-items: center; justify-content: center; transition: all var(--transition-fast); - min-height: unset; + position: relative; +} + +.subtask-item__checkbox::before { + content: ''; + position: absolute; + inset: -15px; } .subtask-item__checkbox--done { @@ -463,7 +475,7 @@ cursor: pointer; text-align: left; margin-top: var(--space-2); - min-height: unset; + min-height: var(--target-lg); transition: border-color var(--transition-fast), color var(--transition-fast); } diff --git a/public/styles/tokens.css b/public/styles/tokens.css index fb7bc52..40e1b0e 100644 --- a/public/styles/tokens.css +++ b/public/styles/tokens.css @@ -199,6 +199,13 @@ --space-12: 48px; --space-16: 64px; + /* -------------------------------------------------------- + * 11b. Touch-Target Sizes + * -------------------------------------------------------- */ + --target-sm: 32px; + --target-md: 40px; + --target-lg: 48px; + /* -------------------------------------------------------- * 12. Layout * -------------------------------------------------------- */