feat: make faq accordion accessible

Author: Code-Victor

src/components/Faq.astro

@@ -39,14 +39,21 @@ const faqs = [
     {
       faqs.map((faq, i) => (
         <div class="accordion cursor-pointer bg-[#1E1E1E] border border-[#37363C] rounded-3xl w-full">
-          <div
+          <button
+            id={`faq-${i}`}
             aria-expanded="false"
+            aria-controls={`faq-${i}-content`}
             class="accordion-trigger flex justify-between p-6"
           >
             <h2 class="font-semibold">{faq.question}</h2>
             <Icon name="chevron" class="chevron w-4 " />
-          </div>
-          <div class="accordion-content">
+          </button>
+          <div
+            class="accordion-content"
+            role="region"
+            id={`faq-${i}-content`}
+            aria-labelledby={`faq-${i}`}
+          >
             <div>
               <p class="text-sm p-6 pt-0 ">{faq.answer}</p>
             </div>
@@ -70,7 +77,7 @@ const faqs = [
   .accordion-content[aria-hidden="false"] {
     grid-template-rows: 1fr;
   }
-  .accordion-trigger svg{
+  .accordion-trigger svg {
     transition: transform 500ms ease-in-out;
   }