b0rbor4d/spiele-redaktion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

P2: Einheitliche Fokus-Ringe global

Browse Source 
- .focus-ring Utility via Tailwind-Play-CDN (@apply) in base.html
- Globaler :focus-visible-Fallback (emerald Outline) für alle
  Bedienelemente ohne explizite Fokus-Klassen
- Benutzer-Formular und Audit-Log-Filter nutzen .focus-ring
This commit is contained in:
Flo Hartmann
2026-08-26 09:04:45 +00:00
parent fee5f8b9a3
commit d6ed8fa56e
3 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/redaktionskern/templates/base.html
View File

@@ -8,6 +8,22 @@
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.9/dist/cdn.min.js"></script>
<style>[x-cloak] { display: none !important; }</style>
<style type="text/tailwindcss">
/* Einheitlicher Fokus-Ring für Formularelemente und Button-Links */
.focus-ring { @apply focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500; }
</style>
<style>
/* Fallback ohne Klassen-Anpassung: sichtbarer Fokus auf allen
Bedienelementen (Tailwind-Ring überlagert diesen, wo vorhanden). */
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, summary:focus-visible, a:focus-visible {
outline: 2px solid #10b981;
outline-offset: 1px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
border-color: #10b981;
}
</style>
</head>
<body class="bg-slate-100 text-slate-800 min-h-screen flex flex-col">
<header class="bg-white border-b border-slate-200" x-data="{ menue: false }">