fix(CAccordion): add a missing ID attribute to the accordion collapse…

… items
coreui · Jan 28, 2025 · 161bbd1 · 161bbd1
1 parent 7c91c99
commit 161bbd1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/packages/coreui-react/src/components/accordion/CAccordionBody.tsx b/packages/coreui-react/src/components/accordion/CAccordionBody.tsx
@@ -15,16 +15,16 @@ export interface CAccordionBodyProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CAccordionBody = forwardRef<HTMLDivElement, CAccordionBodyProps>(
   ({ children, className, ...rest }, ref) => {
-    const { visible } = useContext(CAccordionItemContext)
+    const { id, visible } = useContext(CAccordionItemContext)
 
     return (
-      <CCollapse className="accordion-collapse" visible={visible}>
+      <CCollapse className="accordion-collapse" id={id} visible={visible}>
         <div className={classNames('accordion-body', className)} {...rest} ref={ref}>
           {children}
         </div>
       </CCollapse>
     )
-  },
+  }
 )
 
 CAccordionBody.propTypes = {

diff --git a/packages/coreui-react/src/components/accordion/CAccordionItem.tsx b/packages/coreui-react/src/components/accordion/CAccordionItem.tsx
@@ -22,6 +22,10 @@ export interface CAccordionItemContextProps {
 export const CAccordionItemContext = createContext({} as CAccordionItemContextProps)
 
 export interface CAccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+   */
+  id?: string
   /**
    * A string of all className you want applied to the base component.
    */
@@ -33,9 +37,9 @@ export interface CAccordionItemProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
-  ({ children, className, itemKey, ...rest }, ref) => {
-    const id = useId()
-    const _itemKey = useRef(itemKey ?? id)
+  ({ children, className, id, itemKey, ...rest }, ref) => {
+    const _id = id ?? useId()
+    const _itemKey = useRef(itemKey ?? _id)
 
     const { _activeItemKey, alwaysOpen, setActiveKey } = useContext(CAccordionContext)
     const [visible, setVisible] = useState(Boolean(_activeItemKey === _itemKey.current))
@@ -52,12 +56,12 @@ export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
 
     return (
       <div className={classNames('accordion-item', className)} {...rest} ref={ref}>
-        <CAccordionItemContext.Provider value={{ id, setVisible, visible }}>
+        <CAccordionItemContext.Provider value={{ id: _id, setVisible, visible }}>
           {children}
         </CAccordionItemContext.Provider>
       </div>
     )
-  },
+  }
 )
 
 CAccordionItem.propTypes = {