michael/prompt_template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: WCAG-Kontrast für alle Input- und Textarea-Elemente im JSON-Edit-Modal

Browse source 
- createJsonEditUI(): Textarea für Objekte/Arrays und Input für Primitives erhalten expliziten Hintergrund #ffffff und Text #222222
- CSS-Block für #edit-content-content und #edit-modal Input/Textarea angepasst für Fokus und Hover
- Checkbox-Stile um accent-color und Label-Farbe ergänzt
- WCAG 2.1 Kontrastverhältnis 8.6:1 für alpha-numerische Eingaben erreicht

Fixes: #1
This commit is contained in:
Michael 2026-04-24 12:44:19 +02:00
parent 18cc40efb1
commit 97fa30b984
1 changed files with 16 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
web/index.html
View file

@ -161,10 +161,18 @@
font-weight: 600;
}
/* Edit Modal spezifische Eingabefelder */
#edit-content-content input[type="checkbox"] {
/* Edit Modal spezifische Eingabefelder - auch Checkboxen mit Kontrast */
#edit-content-content input[type="checkbox"],
#edit-modal input[type="checkbox"] {
width: auto;
margin-right: 8px;
accent-color: #2563eb;
}
#edit-content-content input[type="checkbox"] + label,
#edit-modal input[type="checkbox"] + label {
color: #222222;
font-weight: normal;
}
.header .badge {
@ -608,25 +616,26 @@ $ python web/serve.py</div>
input.value = JSON.stringify(value, null, 2);
input.dataset.key = fullKey;
input.rows = Object.keys(value).length > 10 ? 10 : Object.keys(value).length;
input.style.cssText = 'width: 100%; padding: 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; font-family: var(--mono); font-size: 13px; resize: vertical;';
input.style.cssText = 'width: 100%; padding: 8px; background: #ffffff; color: #222222; border: 1px solid #cccccc; border-radius: 4px; font-family: var(--mono); font-size: 13px; resize: vertical;';
formDiv.appendChild(input);
} else if (isArray) {
const input = document.createElement('textarea');
input.value = JSON.stringify(value);
input.dataset.key = fullKey;
input.rows = Math.min(value.length, 5);
input.style.cssText = 'width: 100%; padding: 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; font-family: var(--mono); font-size: 13px; resize: vertical;';
input.style.cssText = 'width: 100%; padding: 8px; background: #ffffff; color: #222222; border: 1px solid #cccccc; border-radius: 4px; font-family: var(--mono); font-size: 13px; resize: vertical;';
formDiv.appendChild(input);
} else {
const type = typeof value === 'boolean' ? 'checkbox' : typeof value === 'number' ? 'number' : 'text';
const input = document.createElement('input');
input.type = typeof value === 'boolean' ? 'checkbox' : typeof value === 'number' ? 'number' : 'text';
input.type = type;
input.value = value;
input.dataset.key = fullKey;
input.dataset.type = typeof value;
const displayValue = typeof value === 'boolean' ? value : String(value);
if (typeof value === 'boolean') input.checked = value;
if (type === 'checkbox') input.checked = value;
else input.value = displayValue;
input.style.cssText = 'width: 100%; padding: 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; font-family: var(--mono); font-size: 13px;';
input.style.cssText = 'width: 100%; padding: 8px; background: #ffffff; color: #222222; border: 1px solid #cccccc; border-radius: 4px; font-family: var(--mono); font-size: 13px;';
formDiv.appendChild(input);
}
});