From 738002073fd2d16e21cfba11b251feae779e2f53 Mon Sep 17 00:00:00 2001
From: Noah Hernandez <63211322+oahnh@users.noreply.github.com>
Date: Thu, 11 Jan 2024 17:34:33 -0800
Subject: [PATCH] refactor(faq): adjusts container width, updates keydown
 functionality

---
 src/components/FAQ.astro                     | 4 ++--
 src/components/FAQDropdown/index.tsx         | 8 +++++++-
 src/components/FAQDropdown/style.module.scss | 4 +++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/FAQ.astro b/src/components/FAQ.astro
index c5df346..94b07ae 100644
--- a/src/components/FAQ.astro
+++ b/src/components/FAQ.astro
@@ -127,9 +127,9 @@ const faqsCol2 = faqs.slice(split);
   .faq-content {
     display: flex;
     gap: 32px;
-    width: 100%;
+    width: 62rem;
     align-items: flex-start;
-    padding: 0 15%;
+    margin: 0 auto;
   }
   .faq-container {
     display: flex;
diff --git a/src/components/FAQDropdown/index.tsx b/src/components/FAQDropdown/index.tsx
index 4103cff..534d687 100644
--- a/src/components/FAQDropdown/index.tsx
+++ b/src/components/FAQDropdown/index.tsx
@@ -46,13 +46,19 @@ const FAQDropdown = ({ question, defaultOpen }: FAQDropdownProps) => {
     );
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleToggle();
+    }
+  };
+
   return (
     <div className={styles.container}>
       <div
         className={styles.labelContainer}
         onClick={handleToggle}
         tabIndex={0}
-        onKeyUp={handleToggle}
+        onKeyDown={e => handleKeyDown(e)}
       >
         <div className={styles.statusIcon}>{isOpen ? '-' : '+'}</div>
         <b>{label}</b>
diff --git a/src/components/FAQDropdown/style.module.scss b/src/components/FAQDropdown/style.module.scss
index 426abef..50f0dd7 100644
--- a/src/components/FAQDropdown/style.module.scss
+++ b/src/components/FAQDropdown/style.module.scss
@@ -18,6 +18,8 @@
   .statusIcon {
     font-size: 1.5rem;
     text-align: center;
+    user-select: none;
+    width: 1rem;
   }
 
   b {
@@ -27,7 +29,7 @@
 
 .content {
   display: flex;
-  margin-left: 2.5rem;
+  margin-left: 2.75rem;
 
   p {
     font-style: normal;