Accessible Accordion Component

src/components/ui/Accordion/Accordion.stories.js

@@ -7,7 +7,7 @@ export default {
     component: Accordion,
     render: (args) => <SandboxEditor>
         <div >
-            <div className='flex space-x-2'>
+            <div className='flex space-x-2 w-full flex-1'>
                 <Accordion {...args} />
 
             </div>
@@ -22,6 +22,8 @@ export const All = {
         items: [
             {title: 'Section 1', content: 'Content for Section 1'},
             {title: 'Section 2', content: 'Content for Section 2'},
+            {title: 'Section 3', content: 'Content for Section 3'},
+            {title: 'Section 4', content: 'Content for Section 4'},
             // Add more items as needed
         ],
     },

src/components/ui/Accordion/Accordion.tsx

@@ -10,21 +10,16 @@ export type AccordionProps = {
 }
 
 const Accordion = ({items} : AccordionProps) => {
-    const [activeIndex, setActiveIndex] = useState<number>(-1);
-    const handleClick = (index: number) => {
-        setActiveIndex(activeIndex === index ? -1 : index);
-    };
-
     return (
         <AccordionRoot>
             {items.map((item, index) => (
-                <AccordionItem value={index}>
+                <AccordionItem value={index} key={index} >
                     <AccordionHeader>
-                        <AccordionTrigger handleClick={handleClick} index={index} activeIndex={activeIndex} >
+                        <AccordionTrigger >
                             Item {index+1}
                         </AccordionTrigger>
                     </AccordionHeader>
-                    <AccordionContent index={index} activeIndex={activeIndex}>
+                    <AccordionContent>
                         {item.content}
                     </AccordionContent>
                 </AccordionItem>

src/components/ui/Accordion/contexts/AccordionContext.tsx

@@ -0,0 +1,3 @@
+import {createContext} from 'react';
+
+export const AccordionContext = createContext({});

src/components/ui/Accordion/contexts/AccordionItemContext.tsx

@@ -0,0 +1,3 @@
+import {createContext} from 'react';
+
+export const AccordionItemContext = createContext({});

src/components/ui/Accordion/shards/AccordionContent.tsx

@@ -1,27 +1,31 @@
-import React from 'react';
-// @ts-ignore
-import {customClassSwitcher} from '~/core';
+import React, {useContext} from 'react';
+import {AccordionContext} from '../contexts/AccordionContext';
+import {AccordionItemContext} from '../contexts/AccordionItemContext';
+
 
 type AccordionContentProps = {
   children: React.ReactNode;
   index: number,
   activeIndex: number,
-  customRootClass? :string
+  className? :string
 };
 
-const AccordionContent: React.FC<AccordionContentProps> = ({children, index, activeIndex, customRootClass}: AccordionContentProps) => {
-    const rootClass = customClassSwitcher(customRootClass, 'Accordion');
+const AccordionContent: React.FC<AccordionContentProps> = ({children, index, activeIndex, className=''}: AccordionContentProps) => {
+    const {activeItem, rootClass} = useContext(AccordionContext);
+
+    const {itemValue} = useContext(AccordionItemContext);
+
     return (
-        <span className={`${rootClass}-content`}>
-            <div
-                id={`content-${index}`}
-                role="region"
-                aria-labelledby={`section-${index}`}
-                hidden={activeIndex !== index}
-            >
-                {children}
-            </div>
-        </span>
+        <div
+            className={`${rootClass}-content ${className}`}
+            id={`content-${index}`}
+            role="region"
+            aria-labelledby={`section-${index}`}
+            hidden={itemValue !== activeItem}>
+
+            {children}
+
+        </div>
     );
 };
 

src/components/ui/Accordion/shards/AccordionHeader.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
-// @ts-ignore
-import {customClassSwitcher} from '~/core';
+
 
 export type AccordionHeaderProps = {
     children: React.ReactNode;
-    customHeaderClass?: string;
+    className?: string;
 }
 
-const AccordionHeader: React.FC<AccordionHeaderProps> = ({children, customHeaderClass=''}) => {
-    const rootClass = customClassSwitcher(customHeaderClass, 'Accordion');
+const AccordionHeader: React.FC<AccordionHeaderProps> = ({children, className=''}) => {
     return (
-        <div className={`${rootClass}-header`}>
+        <div className={className}>
             {children}
         </div>
     );

src/components/ui/Accordion/shards/AccordionItem.tsx

@@ -1,19 +1,44 @@
-import React from 'react';
-// @ts-ignore
-import {customClassSwitcher} from '~/core';
+import React, {useState, useContext, useId, useEffect} from 'react';
+
+import {AccordionContext} from '../contexts/AccordionContext';
+import {AccordionItemContext} from '../contexts/AccordionItemContext';
 
 export type AccordionItemProps = {
     children: React.ReactNode;
-    customItemClass?: string;
+    className?: string;
     value?: number;
 }
 
-const AccordionItem: React.FC<AccordionItemProps> = ({children, value, customItemClass=''}) => {
-    const rootClass = customClassSwitcher(customItemClass, 'Accordion');
+const AccordionItem: React.FC<AccordionItemProps> = ({children, value, className='', ...props}) => {
+    const [itemValue, setItemValue] = useState(value);
+    const {rootClass, activeItem} = useContext(AccordionContext);
+
+    const [isOpen, setIsOpen] = useState(false);
+    useEffect(() => {
+        if (itemValue === activeItem) {
+            setIsOpen(true);
+        } else {
+            setIsOpen(false);
+        }
+    }
+    , [itemValue, activeItem]);
+    const id = useId();
+
+
     return (
-        <div className={`${rootClass}-item`}>
-            {children}
-        </div>
+        <AccordionItemContext.Provider value={{itemValue, setItemValue}}>
+            <div
+                className={`${rootClass}-item ${className}`} {...props}
+                id={`accordion-data-item-${id}`}
+                role="region"
+                aria-labelledby={`accordion-trigger-${id}`}
+                aria-hidden={!isOpen}
+                data-state={isOpen ? 'open' : 'closed'}
+
+            >
+                {children}
+            </div>
+        </AccordionItemContext.Provider>
     );
 };
 

src/components/ui/Accordion/shards/AccordionRoot.tsx

@@ -1,18 +1,70 @@
-import React from 'react';
-// @ts-ignore
+import React, {useState, useRef} from 'react';
+
 import {customClassSwitcher} from '~/core';
+import {AccordionContext} from '../contexts/AccordionContext';
+
+const COMPONENT_NAME = 'Accordion';
 
 export type AccordionRootProps = {
     children: React.ReactNode;
     customRootClass?: string;
 }
 
 const AccordionRoot= ({children, customRootClass}: AccordionRootProps) => {
-    const rootClass = customClassSwitcher(customRootClass, 'Accordion');
+    const accordionRef = useRef(null);
+    const [activeItem, setActiveItem] = useState(null);
+    const [focusItem, setFocusItem] = useState(null);
+    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+
+
+    const getActiveItemId = () => {
+        let elem = accordionRef?.current;
+        // get children that have data-state open
+        if (focusItem) {
+            elem = focusItem;
+        } else {
+            elem = elem?.querySelector('[data-state="open"]');
+        }
+
+        return elem;
+    };
+
+    const focusNextItem = () => {
+        const elem = getActiveItemId();
+        const nextElem = elem.nextElementSibling;
+        setFocusItem(nextElem);
+        // get button
+        const button = nextElem.querySelector('button');
+        // focus button
+        button?.focus();
+    };
+    const focusPrevItem = () => {
+        const elem = getActiveItemId();
+        const prevElem = elem.previousElementSibling;
+        setFocusItem(prevElem);
+        // get button
+        const button = prevElem.querySelector('button');
+        // focus button
+        button?.focus();
+    };
+
     return (
-        <span className={`${rootClass}-root`}>
-            {children}
-        </span>
+        <AccordionContext.Provider
+            value={{
+                rootClass: rootClass,
+                activeItem,
+                setActiveItem,
+                focusNextItem,
+                focusPrevItem,
+                focusItem,
+                setFocusItem,
+
+            }}>
+            <div className={`${rootClass}-root`} ref={accordionRef} >
+                {children}
+            </div>
+        </AccordionContext.Provider>
+
     );
 };
 

src/components/ui/Accordion/shards/AccordionTrigger.tsx

@@ -1,29 +1,44 @@
-import React from 'react';
-// @ts-ignore
-import {customClassSwitcher} from '~/core';
+import React, {useContext, useState} from 'react';
+import {AccordionContext} from '../contexts/AccordionContext';
+import {AccordionItemContext} from '../contexts/AccordionItemContext';
+
 
 type AccordionTriggerProps = {
   children: React.ReactNode;
-  customRootClass?: string,
+  className?: string,
   index: number,
   activeIndex: number,
   handleClick: (index: number) => void
 };
 
-const AccordionTrigger: React.FC<AccordionTriggerProps> = ({children, handleClick, index, activeIndex, customRootClass}) => {
-    const rootClass = customClassSwitcher(customRootClass, 'Accordion');
+const AccordionTrigger: React.FC<AccordionTriggerProps> = ({children, index, activeIndex, className=''}) => {
+    const {setActiveItem, rootClass, focusNextItem, focusPrevItem, activeItem} = useContext(AccordionContext);
+
+    const {itemValue} = useContext(AccordionItemContext);
+    console.log(activeItem, itemValue);
+
     return (
-        <span className={`${rootClass}-trigger`}>
 
-            <button
-                onClick={() => handleClick(index)}
-                aria-expanded={activeIndex === index}
-                aria-controls={`content-${index}`}
-            >
-                {children}
-            </button>
+        <button
+            className={`${rootClass}-trigger ${className}`}
+            onKeyDown={(e) => {
+                if (e.key === 'ArrowDown') {
+                    focusNextItem();
+                }
+                if (e.key === 'ArrowUp') {
+                    focusPrevItem();
+                }
+            }}
+            onClick={() => {
+                setActiveItem(itemValue);
+            }}
+            aria-expanded={activeItem === itemValue}
+            aria-controls={`content-${index}`}
+        >
+            {children}
+        </button>
+
 
-        </span>
     );
 };
 

src/components/ui/Progress/shards/ProgressIndicator.tsx

@@ -26,17 +26,16 @@ export default function ProgressIndicator({
     }
 
 
-  return (
-    <div
-      role="progressbar"
-      className={`${rootClass}-indicator`}
-      style={{ transform: `translateX(-${maxValue - value}%)` }}
-      aria-valuenow={value}
-      aria-valuemax={maxValue}
-      aria-valuemin={minValue}
-    >
-      {renderLabel?.(value)}
-    </div>
-  )
-
+    return (
+        <div
+            role="progressbar"
+            className={`${rootClass}-indicator`}
+            style={{transform: `translateX(-${maxValue - value}%)`}}
+            aria-valuenow={value}
+            aria-valuemax={maxValue}
+            aria-valuemin={minValue}
+        >
+            {renderLabel?.(value)}
+        </div>
+    );
 }