Auf Entscheidung von Umut werden Tabs jetzt mit JavaScript umgesetzt. Die Regel "der Seiteninhalt braucht kein Browser-JavaScript" bleibt dabei eingehalten: der Server liefert eine Ankerliste und alle Panels mit eigenen Überschriften, versteckt nichts, und ohne Skript ist jeder Inhalt lesbar und über die Tastatur erreichbar. public/assets/tabs.js ergänzt tablist/tab/tabpanel, Auswahl per Pfeiltasten, Home und Ende sowie aria-selected und wählt bei einem passenden Sprungziel das zugehörige Panel. Die strenge Richtlinie bleibt Voreinstellung: öffentliche Seiten senden weiterhin script-src 'none'. Nur eine Seite mit Tab-Block sendet script-src 'self' und bindet die eine externe Datei ein; Inline-Skript ist nie erlaubt. Geprüft: 109 PHP-Tests / 395 Assertions unter PHP 8.2.12 und 8.4.22, 14 JavaScript-Modelltests, Lint/Format/Container. Das Skript selbst wurde nicht ausgeführt: Tastaturbedienung und ARIA-Verhalten sind ohne Browserlauf ungeprüft. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
44 lines
2.5 KiB
Twig
44 lines
2.5 KiB
Twig
<!doctype html>
|
||
<html lang="{{ page.locale }}">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>{{ page.document.title }}</title>
|
||
<meta name="description" content="{{ page.document.description }}">
|
||
<link rel="canonical" href="{{ canonical }}">
|
||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||
<link rel="stylesheet" href="/assets/site.css">
|
||
<link rel="alternate" type="application/rss+xml" title="Beiträge" href="/feed.xml">
|
||
{% if page.document.schemaVersion >= 2 %}<link rel="stylesheet" href="/assets/design.css">{% endif %}
|
||
{% if page.document.schemaVersion >= 3 %}<link rel="stylesheet" href="/assets/enhancements.css">{% endif %}
|
||
{% if needsTabs|default(false) %}<script src="/assets/tabs.js" defer></script>{% endif %}
|
||
</head>
|
||
<body>
|
||
<a class="skip-link" href="#main">Zum Inhalt springen</a>
|
||
<header class="site-header shell">
|
||
<a class="brand" href="/" aria-label="Kant CMS – Startseite"><span class="brand-icon" aria-hidden="true">k.</span> kant<span class="brand-light">cms</span></a>
|
||
{% if navigation.header|default([]) is not empty %}
|
||
<nav aria-label="Hauptnavigation">{% include 'nav.html.twig' with {links: navigation.header} only %}</nav>
|
||
{% endif %}
|
||
</header>
|
||
<main id="main" tabindex="-1">
|
||
{% if postMeta is defined and postMeta is not null %}
|
||
<p class="post-header shell">
|
||
{% if page.published_at %}<time datetime="{{ page.published_at|date('Y-m-d') }}">{{ page.published_at|date('d.m.Y') }}</time>{% endif %}
|
||
{% if page.author %}<span>von {{ page.author }}</span>{% endif %}
|
||
{% for term in postMeta.category %}<a href="{{ term.href }}">{{ term.name }}</a>{% endfor %}
|
||
{% for term in postMeta.tag %}<a class="post-tag" href="{{ term.href }}">#{{ term.name }}</a>{% endfor %}
|
||
</p>
|
||
{% endif %}
|
||
{% for block in page.document.blocks %}{% include 'blocks/block.html.twig' with {block: block, editing: editing|default(false), postLists: postLists|default({})} only %}{% endfor %}
|
||
</main>
|
||
<footer class="site-footer shell">
|
||
<a class="brand" href="/">kant<span class="brand-light">cms</span></a>
|
||
{% if navigation.footer|default([]) is not empty %}
|
||
<nav aria-label="Fußzeile">{% include 'nav.html.twig' with {links: navigation.footer} only %}</nav>
|
||
{% endif %}
|
||
<span>Lokaler Entwicklungsprototyp · 2026</span>
|
||
</footer>
|
||
</body>
|
||
</html>
|