Refactor Accordion component to use buttons for accessibility

Ilyesbdlala · J12934 · commit 82652755e1d7 · 2025-01-31T17:54:22.000+01:00
Signed-off-by: Ilyes Ben Dlala &lt;ilyes.bendlala@iteratec.com&gt;
diff --git a/documentation/src/components/Accoordion.tsx b/documentation/src/components/Accoordion.tsx
@@ -39,13 +39,13 @@ export default function Accordion({ items, fullWidth = false }: AccordionProps)
             className={styles.accordionItem}
             onClick={() => handleToggle(i)}
           >
-            <div
+            <button
               className={clsx(styles.accordionButton, {
                 [styles.dark]: isDarkTheme,
               })}
             >
               {item.title}
-            </div>
+            </button>
 
             {isExpanded && (
               <div className={styles.accordionPanel}>{item.content}</div>
diff --git a/documentation/src/css/accordion.module.scss b/documentation/src/css/accordion.module.scss
@@ -20,6 +20,13 @@
   cursor: pointer;
   padding: 10px;
   font-weight: bold;
+  background-color: transparent;
+  border:none;
+  box-shadow: none;
+  display: block;
+  width: 100%;
+  text-align: left;
+  font-size: medium;
 }
 
 .accordionButton:hover {
