make accordion component more accessible

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>