From ba8acd410385bc4c98e6c73491edca6fd60bba08 Mon Sep 17 00:00:00 2001
From: Marika Mella <116084393+marikadeveloper@users.noreply.github.com>
Date: Tue, 7 May 2024 00:31:41 +0200
Subject: [PATCH] refactor(documentation-website): cleanup faq item (#779)
 (#1017)

Fix "Non-interactive elements should not be assigned mouse or keyboard event listeners."
Fix "Use <input type="button">, <input type="image">, <input type="reset">, <input type="submit">, or <button> instead of the "button" role to ensure accessibility across all devices."
Fix "Elements with the 'button' interactive role must be focusable."
Fix "Visible, non-interactive elements with click handlers must have at least one keyboard listener."
---
 .../src/components/faq-item.scss              |  7 ++--
 .../src/components/faq-item.tsx               | 34 ++++++++-----------
 2 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/documentation-website/src/components/faq-item.scss b/documentation-website/src/components/faq-item.scss
index 4a9971ff..078bf1fe 100644
--- a/documentation-website/src/components/faq-item.scss
+++ b/documentation-website/src/components/faq-item.scss
@@ -3,8 +3,11 @@
   list-style-type: none;
   width: 100%;
 
-  &:focus {
-    box-shadow: 0 0 2em var(--shadow);
+  & > button {
+    width: 100%;
+    &:focus {
+      box-shadow: 0 0 2em var(--shadow);
+    }
   }
 
   .accordion-section {
diff --git a/documentation-website/src/components/faq-item.tsx b/documentation-website/src/components/faq-item.tsx
index 85eb38ce..ca5a785e 100644
--- a/documentation-website/src/components/faq-item.tsx
+++ b/documentation-website/src/components/faq-item.tsx
@@ -19,39 +19,33 @@ const FaqItem = ({
     setIsOpen(! isOpen,);
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLLIElement>,) => {
-    if (e.key === 'Enter') {
-      toggleOpen();
-    }
-  };
-
   return (
-    <li tabIndex={index + ONE} onKeyDown={handleKeyDown} className={'faq-item'}>
-      <div onClick={() => toggleOpen()} role="button">
+    <li className={ 'faq-item' }>
+      <button tabIndex={ index + ONE } onClick={ () => toggleOpen() }>
         <div className="accordion-section">
           <h2>
             {
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
               // @ts-expect-error
-              <Lang lnkey={`faq.questions.title_${ index + ONE }`} />
+              <Lang lnkey={ `faq.questions.title_${ index + ONE }` }/>
             }
           </h2>
-          {isOpen ?
+          { isOpen ?
             <span className="up-arrow"></span>
             :
             <span className="down-arrow"></span>
           }
         </div>
-      </div>
-      {isOpen &&
-        <p>
-          {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            <Lang lnkey={`faq.questions.description_${ index + ONE }`} />
-          }
-        </p>
-      }
+        { isOpen &&
+          <p>
+            {
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-expect-error
+              <Lang lnkey={ `faq.questions.description_${ index + ONE }` }/>
+            }
+          </p>
+        }
+      </button>
     </li>
   );
 };