Workers P2: Auswahl aus der Liste holt die Karte ins Bild und setzt den Fokus (Handy und Tablet)

Endprüfung P2. Unter 1100 px steht die Karte über der Liste mit 19 Einträgen, aus der man wählt (die Liste ist dort die
Alternative zur Leinwand). Ein Klick in der Liste änderte nichts Sichtbares: die Karte öffnete sich oberhalb des
Fensters, Screenreader hörten nichts, und „Karte schließen“ ließ den Fokus ins Leere fallen.

Bei neuer Auswahl nimmt jetzt der Name in der Karte den Fokus (tabIndex -1), und liegt der Kartenanfang außerhalb des
Fensters, wird die Karte an den oberen Rand geholt (scroll-margin-top: unter der festen Leiste der Handy-Ansicht 64 px).
„Karte schließen“ gibt den Fokus an den Listeneintrag des Workers zurück.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Sonnet 5.5 committed 2026-10-18 05:41:03 +00:00
1 parent 9ebc562c83
commit 84fb37a98e
5 files changed
+63 -5

No files matched your search

+3 -1
View File
@@ -73,7 +73,7 @@
/* ---------- Worker-Karte ---------- */
.wk-card { position: relative; padding-bottom: 20px; }
.wk-card { position: relative; padding-bottom: 20px; scroll-margin-top: 12px; }
.wk-card > .btn-quiet { position: absolute; top: 0; right: 0; }
.wk-card h3 { margin: 20px 0 8px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--text-2); }
.wk-portrait {
@@ -180,6 +180,8 @@
}
@media (max-width: 860px) {
/* unter der festen Leiste der Handy-Ansicht (52 px) */
.wk-card { scroll-margin-top: 64px; }
.wk-kpis.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.wk-zoom { gap: 6px; }
.wk-zoom .btn { min-width: 36px; min-height: 36px; }