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"> <div class="space-y-4 reveal">
<!-- FAQ 1 --> <!-- 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"> <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 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"> <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>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"> <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> <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> </span>
</summary> </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. 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> </div>
</details> </details>
<!-- FAQ 2 --> <!-- 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"> <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 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"> <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>Kann ich meine bestehende Domain mitnehmen?</span>
<span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400"> <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> <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> </span>
</summary> </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. Selbstverständlich. Wir übernehmen den kompletten Domain-Umzug für Sie. Ihre Website bleibt währenddessen unterbrechungsfrei erreichbar.
</div> </div>
</details> </details>
<!-- FAQ 3 --> <!-- 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"> <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 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"> <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>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"> <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> <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> </span>
</summary> </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. 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> </div>
</details> </details>
<!-- FAQ 4 --> <!-- 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"> <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 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"> <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>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"> <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> <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> </span>
</summary> </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. 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> </div>
</details> </details>
@@ -317,4 +317,18 @@
}); });
revealElements.forEach(el => observer.observe(el)); 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> </script>