updated disclosure component

rad-ui · Dec 20, 2024 · dff333d · dff333d
1 parent d5dadbd
commit dff333d
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 34 deletions.
diff --git a/src/components/ui/Disclosure/Disclosure.tsx b/src/components/ui/Disclosure/Disclosure.tsx
@@ -6,7 +6,7 @@ import DisclosureContent from "./fragments/DisclosureContent";
 
 export type DisclosureProps = {
 
-     items:{question:string,answer: string}[]
+     items:{title:string, content: string}[]
 }
 
 const Disclosure = ({items}:DisclosureProps) => {
@@ -16,10 +16,10 @@ const Disclosure = ({items}:DisclosureProps) => {
             {items.map((item,index) => (
                  <DisclosureItem key={index} value={index}>
                     <DisclosureTrigger>
-                       {item.question}  
+                       {item.title}  
                     </DisclosureTrigger>
                     <DisclosureContent> 
-                       {item.answer}
+                       {item.content}
                     </DisclosureContent>
                  </DisclosureItem>
 

diff --git a/src/components/ui/Disclosure/contexts/DisclosureContext.tsx b/src/components/ui/Disclosure/contexts/DisclosureContext.tsx
@@ -2,7 +2,7 @@ import {createContext} from "react";
 
 export type DisclosureContextType = {
    rootClass: string;
-   activeItem: null;
-   setActiveItem: (item: null) => void
+   activeItem: number | null;
+   setActiveItem: (item: number | null) => void
 }
 export const DisclosureContext = createContext<DisclosureContextType>({} as DisclosureContextType)
diff --git a/src/components/ui/Disclosure/contexts/DisclosureItemContext.tsx b/src/components/ui/Disclosure/contexts/DisclosureItemContext.tsx
@@ -1,7 +1,7 @@
 import {createContext} from "react";
 
 export type DisclosureItemContextType = {
-  itemValue: number | undefined;
+  itemValue: number;
   setItemValue: (value: number) => void
 }
 

diff --git a/src/components/ui/Disclosure/fragments/DisclosureContent.tsx b/src/components/ui/Disclosure/fragments/DisclosureContent.tsx
@@ -16,7 +16,9 @@ const DisclosureContent = ({children, className=''}:DisclosureContentProps) => {
      return(
           <div  
             className={clsx(`${rootClass}-content`, className)}
-            hidden={activeItem === itemValue}
+            hidden={activeItem !== itemValue}
+            role="region"
+            aria-hidden={activeItem !== itemValue}
             >
             {children}
          </div>

diff --git a/src/components/ui/Disclosure/fragments/DisclosureItem.tsx b/src/components/ui/Disclosure/fragments/DisclosureItem.tsx
@@ -6,21 +6,18 @@ import { clsx } from "clsx";
 export type DisclosureItemProps = {
     children: React.ReactNode;
     className?: string;
-    value?: number
+    value: number
 }
 const DisclosureItem = ({children, className='', value }:DisclosureItemProps) => {
 
-    const {activeItem, rootClass} = useContext(DisclosureContext)
-    const [itemValue, setItemValue] = useState(value)
+    const { activeItem, rootClass } = useContext(DisclosureContext)
+    const [itemValue, setItemValue] = useState<number>(value)
     const [isOpen, setIsOpen] = useState(false)
 
      useEffect(() => {
-            if (activeItem === itemValue) {
-                setIsOpen(true);
-            } else {
-                setIsOpen(false);
-            }
-        }, [activeItem]);
+            setIsOpen(activeItem === itemValue)
+
+        }, [activeItem, itemValue]);
 
     return(
         <DisclosureItemContext.Provider 
@@ -31,6 +28,8 @@ const DisclosureItem = ({children, className='', value }:DisclosureItemProps) =>
          <div
          className={clsx(`${rootClass}-item`, className)}
          data-state={isOpen ? 'open' : 'closed'}
+         role="region"
+         aria-expanded={isOpen}
          >
            {children}
 

diff --git a/src/components/ui/Disclosure/fragments/DisclosureRoot.tsx b/src/components/ui/Disclosure/fragments/DisclosureRoot.tsx
@@ -8,14 +8,16 @@ const COMPONENT_NAME = 'Disclosure';
 export type DisclosureRootProps = {
      children: React.ReactNode;
      customRootClass?: string;
+     defaultOpen?: number | null;
+     'aria-label'?: string;
 
 }
 
-const DisclosureRoot = ({children, customRootClass}:DisclosureRootProps) => {
+const DisclosureRoot = ({ children, customRootClass, 'aria-label': ariaLabel }:DisclosureRootProps) => {
 
         const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME)
 
-        const [activeItem, setActiveItem] = useState(null);
+        const [activeItem, setActiveItem] = useState<number | null>(null);
 
     return(
 
@@ -26,7 +28,12 @@ const DisclosureRoot = ({children, customRootClass}:DisclosureRootProps) => {
           setActiveItem
           }}>
 
-           <div className={clsx(`${rootClass}-root`)}>
+           <div 
+             className={clsx(`${rootClass}-root`)}
+             role="region"
+             aria-label={ariaLabel}
+            >
+
              {children}
            </div>
         </DisclosureContext.Provider>

diff --git a/src/components/ui/Disclosure/fragments/DisclosureTrigger.tsx b/src/components/ui/Disclosure/fragments/DisclosureTrigger.tsx
@@ -6,37 +6,33 @@ import { DisclosureItemContext } from "../contexts/DisclosureItemContext";
 export type DisclosureTriggerProps = {
     children: React.ReactNode;
     className?: string;
-    index?: number;
-
+    index: number; 
 }
 
-const DisclosureTrigger = ({children, className, index}:DisclosureTriggerProps) => {
+const DisclosureTrigger = ({ children, className, index }:DisclosureTriggerProps) => {
 
          const {activeItem, setActiveItem, rootClass} = useContext(DisclosureContext)
          const {itemValue} = useContext(DisclosureItemContext)
 
          const handleDisclosure = () => {
-              if(activeItem === itemValue){
-                 setActiveItem(null)
-              }
-              else if(activeItem !== itemValue){
-                setActiveItem(itemValue)
-              }
+
+                setActiveItem(activeItem === itemValue ? null : itemValue)
                 }
 
    return(
-     <div>
+
        <button
         type='button'
         className={clsx(`${rootClass}-trigger`, className)}
         onClick={handleDisclosure}
         aria-expanded={activeItem === itemValue}
         aria-controls={`content-${index}`}
+        aria-haspopup='true'
         >
+
          {children} 
        </button>
 
-              </div>
    )
 }
 

diff --git a/src/components/ui/Disclosure/stories/Disclosure.stories.js b/src/components/ui/Disclosure/stories/Disclosure.stories.js
@@ -18,13 +18,13 @@ export const All = {
         className: '',
         items: [
             {
-              question: "Why can't I access certain websites?",
-              answer: "Clear your browser's cache and cookies."
+              title: "Why can't I access certain websites?",
+              content: "Clear your browser's cache and cookies."
             },
 
             {
-              question: "Why do I keep getting disconnected from the network?",
-              answer: "Ensure that your network drivers are up-to-date."
+              title: "Why do I keep getting disconnected from the network?",
+              content: "Ensure that your network drivers are up-to-date."
             }
         ]
      }