openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/budget.css
+8 -2
View File
@@ -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 {
public/styles/calendar.css
+9 -1
View File
@@ -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 {
public/styles/contacts.css
+1 -1
View File
@@ -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;
}
public/styles/layout.css
+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 {
public/styles/meals.css
+16 -4
View File
@@ -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 */
public/styles/notes.css
+22 -2
View File
@@ -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); }
public/styles/reset.css
-5
View File
@@ -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);
public/styles/shopping.css
+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;
public/styles/tasks.css
+16 -4
View File
@@ -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);
}
public/styles/tokens.css
+7
View File
@@ -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
* -------------------------------------------------------- */