From 8e628b941794d358a2f950211654f8da8c4b9d41 Mon Sep 17 00:00:00 2001 From: Umut Kantarci Date: Wed, 7 Oct 2026 22:39:57 +0200 Subject: [PATCH] Keep a checkbox from toggling when the empty part of its row is clicked Check labels spanned the full width, so a click in the empty middle of "Als Button darstellen" unticked it and folded the menu button settings. The label now ends after its text. Co-Authored-By: Claude Opus 5.5 --- public/assets/admin.css | 4 +++- scripts/menu-button-check.mjs | 8 +++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/public/assets/admin.css b/public/assets/admin.css index 07d3e02..5aaa708 100644 --- a/public/assets/admin.css +++ b/public/assets/admin.css @@ -70,7 +70,9 @@ textarea { resize: vertical; min-height: 110px; line-height: 1.6 } label { display: block; margin: 18px 0 7px; font-size: 13px; font-weight: 600 } .field-help { font-size: 11px; line-height: 1.55; color: var(--muted); margin: 7px 0 0 } .field-help code, .card code { background: #eef2ea; padding: 1px 5px; border-radius: 4px; font-size: .95em } -.check-label { display: flex; align-items: center; gap: 8px; font-weight: 500 } +/* Nur Häkchen und Text sind klickbar: über die volle Breite schaltete ein Klick in die leere Mitte + der Zeile das Häkchen um - in der Menüverwaltung klappten so die Button-Einstellungen zu. */ +.check-label { display: flex; align-items: center; gap: 8px; font-weight: 500; width: fit-content; max-width: 100% } .check-label input { width: 16px; min-height: 16px } /* A grid of fields that becomes one column when there is no room. */ .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 24px } diff --git a/scripts/menu-button-check.mjs b/scripts/menu-button-check.mjs index 7fd94e1..8fae81e 100644 --- a/scripts/menu-button-check.mjs +++ b/scripts/menu-button-check.mjs @@ -47,6 +47,12 @@ try { await row.getByLabel('Als Button darstellen').check(); const options = row.locator('[data-button-options]'); await options.waitFor(); + // Ein Klick in die leere Mitte der Häkchenzeile schaltet nichts um. + const box = await row.locator('[data-button-fields]').boundingBox(); + const label = await row.locator('label[for^="menu-button-"]').boundingBox(); + await page.mouse.click(box.x + box.width * 0.6, label.y + label.height / 2); + assert.equal(await row.getByLabel('Als Button darstellen').isChecked(), true, 'Klick in die Leere klappt die Einstellungen nicht zu'); + assert.equal(await options.isVisible(), true); await options.getByLabel('Form').selectOption('pill'); // Symbol über das Fenster. await row.getByRole('button', { name: /Symbol ändern/ }).click(); @@ -68,7 +74,7 @@ try { const axe = await new AxeBuilder({ page }).include('.menu-entry:last-child').analyze(); assert.deepEqual(axe.violations.map(v => v.id), [], 'axe in der Menüzeile'); await row.screenshot({ path: `${report}/verwaltung.png` }); - checks.push('Verwaltung: Häkchen zeigt Optionen, Pille, Symbol aus dem Fenster, Palettenfarbe als Verweis, Vorschau mit Symbol, axe ohne Befund'); + checks.push('Verwaltung: Häkchen zeigt Optionen, Klick in die leere Zeile schaltet nichts um, Pille, Symbol aus dem Fenster, Palettenfarbe als Verweis, Vorschau mit Symbol, axe ohne Befund'); // Zweiter Button bleibt auf dem Telefon im aufgeklappten Menü (Vorgabe). await page.locator('#link-label').fill('Rückruf');