rename index file for collection and added accessiblity for some components

src/layouts/shortcodes/Accordion.tsx

@@ -13,7 +13,7 @@ const Accordion = ({
 
   return (
     <div className={`accordion ${show && "active"} ${className}`}>
-      <div className="accordion-header" onClick={() => setShow(!show)}>
+      <button className="accordion-header" onClick={() => setShow(!show)}>
         {title}
         <svg
           className="accordion-icon"
@@ -27,7 +27,7 @@ const Accordion = ({
             d="M505.755,123.592c-8.341-8.341-21.824-8.341-30.165,0L256.005,343.176L36.421,123.592c-8.341-8.341-21.824-8.341-30.165,0 s-8.341,21.824,0,30.165l234.667,234.667c4.16,4.16,9.621,6.251,15.083,6.251c5.462,0,10.923-2.091,15.083-6.251l234.667-234.667 C514.096,145.416,514.096,131.933,505.755,123.592z"
           ></path>
         </svg>
-      </div>
+      </button>
       <div className="accordion-content">{children}</div>
     </div>
   );

src/layouts/shortcodes/Tabs.tsx

@@ -1,44 +1,63 @@
 import { marked } from "marked";
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
-function Tabs({ children }: { children: any }) {
-  const [active, setAvtive] = useState(0);
+const Tabs = ({ children }: any) => {
+  const [active, setActive] = useState(0);
+  const [defaultFocus, setDefaultFocus] = useState(false);
 
-  const tabItems = Array.from(
+  const tabRefs: any = useRef([]);
+  useEffect(() => {
+    if (defaultFocus) {
+      tabRefs.current[active]?.focus();
+    } else {
+      setDefaultFocus(true);
+    }
+  }, [active]);
+
+  const tabLinks = Array.from(
     children.props.value.matchAll(
       /<div\s+data-name="([^"]+)"[^>]*>(.*?)<\/div>/gs
     ),
     (match: RegExpMatchArray) => ({ name: match[1], children: match[0] })
   );
 
+  const handleKeyDown = (event: any, index: number) => {
+    if (event.key === "Enter" || event.key === " ") {
+      setActive(index);
+    } else if (event.key === "ArrowRight") {
+      setActive((active + 1) % tabLinks.length);
+    } else if (event.key === "ArrowLeft") {
+      setActive((active - 1 + tabLinks.length) % tabLinks.length);
+    }
+  };
+
   return (
     <div className="tab">
       <ul className="tab-nav">
-        {tabItems.map((item: any, index: number) => (
+        {tabLinks.map((item: any, index: number) => (
           <li
             key={index}
             className={`tab-nav-item ${index === active && "active"}`}
-            onClick={() => setAvtive(index)}
+            role="tab"
+            tabIndex={index === active ? 0 : -1}
+            onKeyDown={(event) => handleKeyDown(event, index)}
+            onClick={() => setActive(index)}
+            ref={(ref) => (tabRefs.current[index] = ref)}
           >
             {item.name}
           </li>
         ))}
       </ul>
-
-      <div className="tab-content">
-        {tabItems.map((item, i) => (
-          <div
-            className={`tab-content-panel ${
-              active === i ? "active" : "hidden"
-            }`}
-            dangerouslySetInnerHTML={{
-              __html: marked.parse(item.children),
-            }}
-          />
-        ))}
-      </div>
+      {tabLinks.map((item, i) => (
+        <div
+          className={active === i ? "tab-content block px-5" : "hidden"}
+          dangerouslySetInnerHTML={{
+            __html: marked.parseInline(item.children),
+          }}
+        />
+      ))}
     </div>
   );
-}
+};
 
 export default Tabs;