From 2dd94b3d1d843cb246d5d9c83b2e91ee28824738 Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Sun, 14 Jul 2024 04:32:41 +0200
Subject: [PATCH] make accordion component more accessible

---
 web/src/components/blocks/Accordion.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/web/src/components/blocks/Accordion.tsx b/web/src/components/blocks/Accordion.tsx
index bcbd057..24966b8 100644
--- a/web/src/components/blocks/Accordion.tsx
+++ b/web/src/components/blocks/Accordion.tsx
@@ -1,18 +1,30 @@
 "use client";
-import { useState } from "react";
+import { useId, useState } from "react";
 import styles from "./accordion.module.scss";
 
 export const Accordion = ({ heading }: any) => {
+  const labelId = useId();
+  const contentId = useId();
   const [showContent, setShowContent] = useState(false);
   function toggleContent() {
     setShowContent(!showContent);
   }
   return (
     <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>
       </div>
-      <div className={styles.accordionContent}>
+      <div
+        id={contentId}
+        className={styles.accordionContent}
+        aria-labelledby={labelId}
+      >
         <p>Åpent trekkspill!</p>
       </div>
     </section>