refactor(faq): adjusts container width, updates keydown functionality

calblueprint · Jan 12, 2024 · 7380020 · 7380020
1 parent 7815078
commit 7380020
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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;