make accordion component more accessible

This commit is contained in:
2024-07-14 04:32:41 +02:00
parent 5d0c5c0742
commit 2dd94b3d1d

View File

@ -1,18 +1,30 @@
"use client"; "use client";
import { useState } from "react"; import { useId, useState } from "react";
import styles from "./accordion.module.scss"; import styles from "./accordion.module.scss";
export const Accordion = ({ heading }: any) => { export const Accordion = ({ heading }: any) => {
const labelId = useId();
const contentId = useId();
const [showContent, setShowContent] = useState(false); const [showContent, setShowContent] = useState(false);
function toggleContent() { function toggleContent() {
setShowContent(!showContent); setShowContent(!showContent);
} }
return ( return (
<section className={styles.accordion} data-open={showContent}> <section className={styles.accordion} data-open={showContent}>
<div className={styles.accordionHeader} onClick={toggleContent}> <div
id={labelId}
className={styles.accordionHeader}
onClick={toggleContent}
aria-expanded={showContent}
aria-controls={contentId}
>
<span>{heading}</span> <span>{heading}</span>
</div> </div>
<div className={styles.accordionContent}> <div
id={contentId}
className={styles.accordionContent}
aria-labelledby={labelId}
>
<p>Åpent trekkspill!</p> <p>Åpent trekkspill!</p>
</div> </div>
</section> </section>