@coreui/react-pro 5.10.0 → 5.12.0

package/src/components/accordion/CAccordionButton.tsx

@@ -13,13 +13,14 @@ export interface CAccordionButtonProps extends HTMLAttributes<HTMLButtonElement>
 
 export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonProps>(
   ({ children, className, ...rest }, ref) => {
-    const { visible, setVisible } = useContext(CAccordionItemContext)
+    const { id, visible, setVisible } = useContext(CAccordionItemContext)
 
     return (
       <button
         type="button"
         className={classNames('accordion-button', { collapsed: !visible }, className)}
-        aria-expanded={!visible}
+        aria-controls={id}
+        aria-expanded={visible}
         onClick={() => setVisible(!visible)}
         {...rest}
         ref={ref}

package/src/components/accordion/CAccordionItem.tsx

@@ -4,6 +4,7 @@ import React, {
   HTMLAttributes,
   useContext,
   useEffect,
+  useId,
   useRef,
   useState,
 } from 'react'
@@ -13,6 +14,7 @@ import classNames from 'classnames'
 import { CAccordionContext } from './CAccordion'
 
 export interface CAccordionItemContextProps {
+  id: string
   setVisible: (a: boolean) => void
   visible?: boolean
 }
@@ -20,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.
    */
@@ -31,14 +37,17 @@ export interface CAccordionItemProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
-  ({ children, className, itemKey, ...rest }, ref) => {
-    const _itemKey = useRef(itemKey ?? Math.random().toString(36).slice(2, 11))
+  ({ 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))
 
     useEffect(() => {
-      !alwaysOpen && visible && setActiveKey(_itemKey.current)
+      if (!alwaysOpen && visible) {
+        setActiveKey(_itemKey.current)
+      }
     }, [visible])
 
     useEffect(() => {
@@ -47,12 +56,12 @@ export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
 
     return (
       <div className={classNames('accordion-item', className)} {...rest} ref={ref}>
-        <CAccordionItemContext.Provider value={{ setVisible, visible }}>
+        <CAccordionItemContext.Provider value={{ id: _id, setVisible, visible }}>
           {children}
         </CAccordionItemContext.Provider>
       </div>
     )
-  },
+  }
 )
 
 CAccordionItem.propTypes = {

package/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap

@@ -3,7 +3,6 @@
 exports[`CAccordionButton customize 1`] = `
 <div>
   <button
-    aria-expanded="true"
     class="accordion-button collapsed bazinga"
     type="button"
   >
@@ -15,7 +14,6 @@ exports[`CAccordionButton customize 1`] = `
 exports[`loads and displays CAccordionButton component 1`] = `
 <div>
   <button
-    aria-expanded="true"
     class="accordion-button collapsed"
     type="button"
   >

package/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap

@@ -6,7 +6,6 @@ exports[`CAccordionHeader customize 1`] = `
     class="accordion-header bazinga"
   >
     <button
-      aria-expanded="true"
       class="accordion-button collapsed"
       type="button"
     >
@@ -22,7 +21,6 @@ exports[`loads and displays CAccordionHeader component 1`] = `
     class="accordion-header"
   >
     <button
-      aria-expanded="true"
       class="accordion-button collapsed"
       type="button"
     >

package/src/components/badge/CBadge.tsx

@@ -96,7 +96,7 @@ export const CBadge: PolymorphicRefForwardingComponent<'span', CBadgeProps> = fo
 )
 
 CBadge.propTypes = {
-  as: PropTypes.string,
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
   color: PropTypes.oneOfType([colorPropType, gradientsPropType]),