make accordion component more accessible
This commit is contained in:
@ -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>
|
||||||
|
Reference in New Issue
Block a user