Daniel/ndsolutionswebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: implement keyboard accessible FAQ accordions with aria attributes and adjust border thickness to border-[0.5px]

Browse Source
This commit is contained in:
DanielS
2026-07-18 04:17:09 +02:00
parent 03c37e592a
commit 16284b6f03
1 changed files with 26 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/HeroAndLiquidGlass.astro
View File

@@ -215,53 +215,53 @@
<div class="space-y-4 reveal">
<!-- FAQ 1 -->
<details class="group rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
<summary class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
<details id="faq-1" class="group rounded-2xl border-[0.5px] border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
<summary id="faq-summary-1" aria-controls="faq-content-1" aria-expanded="false" class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
<span>Ist die Erstellung der Website wirklich im Hosting-Abo inklusive?</span>
<span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
<svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
</span>
</summary>
<div class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
<div id="faq-content-1" class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
Ja. Wir erstellen Ihren neuen Internetauftritt passend zum Hosting direkt mit. Es gibt keine hohen einmaligen Einrichtungskosten – alles ist in der monatlichen Pauschale enthalten.
</div>
</details>
<!-- FAQ 2 -->
<details class="group rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
<summary class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
<details id="faq-2" class="group rounded-2xl border-[0.5px] border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
<summary id="faq-summary-2" aria-controls="faq-content-2" aria-expanded="false" class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
<span>Kann ich meine bestehende Domain mitnehmen?</span>
<span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
<svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
</span>
</summary>
<div class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
<div id="faq-content-2" class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
Selbstverständlich. Wir übernehmen den kompletten Domain-Umzug für Sie. Ihre Website bleibt währenddessen unterbrechungsfrei erreichbar.
</div>
</details>
<!-- FAQ 3 -->
<details class="group rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
<summary class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
<details id="faq-3" class="group rounded-2xl border-[0.5px] border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
<summary id="faq-summary-3" aria-controls="faq-content-3" aria-expanded="false" class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
<span>Wie laufen spätere Änderungen an meiner Website ab?</span>
<span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
<svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
</span>
</summary>
<div class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
<div id="faq-content-3" class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
Senden Sie uns einfach eine kurze Nachricht mit Ihren Änderungswünschen (z. B. neue Öffnungszeiten oder Bilder). Wir setzen diese zeitnah und zuverlässig für Sie um – ohne Zusatzkosten.
</div>
</details>
<!-- FAQ 4 -->
<details class="group rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
<summary class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
<details id="faq-4" class="group rounded-2xl border-[0.5px] border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
<summary id="faq-summary-4" aria-controls="faq-content-4" aria-expanded="false" class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
<span>Wie flexibel ist das Sorgenfrei-Paket und wie sind die Laufzeiten?</span>
<span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
<svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
</span>
</summary>
<div class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
<div id="faq-content-4" class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
Unser Angebot richtet sich ganz nach Ihrem Bedarf. Die Preise und genauen Konditionen kalkulieren wir auf Anfrage. Jede Anfrage ist für Sie vollkommen unverbindlich.
</div>
</details>
@@ -317,4 +317,18 @@
});
revealElements.forEach(el => observer.observe(el));
// A11y FAQ Details Sync
const faqDetails = document.querySelectorAll('details');
faqDetails.forEach((details) => {
const summary = details.querySelector('summary');
if (summary) {
// Set initial state
summary.setAttribute('aria-expanded', details.open ? 'true' : 'false');
details.addEventListener('toggle', () => {
summary.setAttribute('aria-expanded', details.open ? 'true' : 'false');
});
}
});
</script>