fix: description accordion to work with new wp blocks

CHANGELOG.mdx

@@ -22,6 +22,10 @@ Prefix the change with one of these keywords:
 - Added structured issue forms and automatic triage labeling.
 - Updated footer links of FutureFunder
 
+### Fixed
+
+- `DescriptionAccordion` to use the native js to hide/show content
+
 ## [0.29.4]
 
 ### Added

docs/UTILITIES.md

@@ -25,6 +25,22 @@ import { utils } from '@carletonuniversity/rds'
 const widthClass = utils.maxWidthClasses['7xl']
 ```
 
+### Description accordion behavior
+
+The Description React component supports its own accordion interaction. For static or
+server-rendered Description markup, import the vanilla runtime from the RDS package and
+initialize it once from the theme's JavaScript entry point:
+
+```js
+import { initDescriptionAccordions } from '@carletonuniversity/rds/dist/vanilla-js/cu-description.js'
+
+initDescriptionAccordions()
+```
+
+The runtime uses delegated click and keyboard events, so it also works with accordion
+markup added after initialization. It returns a cleanup function for applications that
+need to remove the listeners.
+
 ### File Locations
 
 ```

lib/components/Description/DescriptionAccordion.tsx

@@ -1,36 +1,45 @@
+import { useState } from 'react'
 import { styles } from './Description.Styles'
 import { Icon } from '../Icon/Icon'
-import { toggleAccordion } from './script'
 
 export interface DescriptionAccordionProps {
   term: string
   children: React.ReactNode
 }
 
 export const DescriptionAccordion = ({ term, children }: DescriptionAccordionProps) => {
+  const [isExpanded, setIsExpanded] = useState(false)
   const termLabel = term && typeof term === 'string' ? 'accordion-' + term.toLowerCase().replace(/ +/g, '-') : ''
 
   return (
     <div className={`accordion ${styles.base} first:border-t`}>
       <dt className={`${styles.term}`}>
         <div
           className="flex items-center w-full accordion__button"
-          aria-expanded="false"
+          aria-expanded={isExpanded}
           aria-controls={termLabel}
           role="button"
-          onClick={toggleAccordion}
+          tabIndex={0}
+          onClick={() => setIsExpanded((expanded) => !expanded)}
+          onKeyDown={(event) => {
+            if (event.target !== event.currentTarget) return
+            if (event.key === 'Enter' || event.key === ' ') {
+              event.preventDefault()
+              setIsExpanded((expanded) => !expanded)
+            }
+          }}
         >
           {term}
           <Icon
             name="chevron-right"
             size={20}
-            className="ml-auto transition-transform rotate-0 accordion__icon"
+            className={`ml-auto transition-transform ${isExpanded ? 'rotate-90' : 'rotate-0'} accordion__icon`}
             color="#808080"
           />
         </div>
       </dt>
 
-      <dd className={`accordion__content ${styles.desc}`} hidden={true} id={termLabel}>
+      <dd className={`accordion__content ${styles.desc}`} hidden={!isExpanded} id={termLabel}>
         {children}
       </dd>
     </div>

package.json

@@ -23,6 +23,7 @@
       "require": "./dist/rds.umd.js"
     },
     "./dist/style.css": "./dist/style.css",
+    "./dist/vanilla-js/cu-description.js": "./dist/vanilla-js/cu-description.js",
     "./dist/vanilla-js/cu-motion.js": "./dist/vanilla-js/cu-motion.js"
   },
   "files": [

public/vanilla-js/cu-description.js

@@ -0,0 +1,71 @@
+const initializedRoots = new WeakMap()
+
+const getAccordionButton = (target) => {
+  return target && target.nodeType === Node.ELEMENT_NODE ? target.closest('.accordion__button') : null
+}
+
+const toggleAccordion = (button) => {
+  const accordion = button.closest('.accordion')
+
+  if (!accordion) {
+    console.error('RDS Description accordion button is missing its .accordion container.', button)
+    return
+  }
+
+  const content = Array.from(accordion.children).find((child) => child.matches('.accordion__content'))
+
+  if (!content) {
+    console.error('RDS Description accordion is missing its .accordion__content element.', accordion)
+    return
+  }
+
+  const isExpanded = content.hidden
+  const icon = button.querySelector('.accordion__icon')
+
+  button.setAttribute('aria-expanded', String(isExpanded))
+  content.hidden = !isExpanded
+
+  if (icon) {
+    icon.classList.toggle('rotate-90', isExpanded)
+    icon.classList.toggle('rotate-0', !isExpanded)
+  }
+}
+
+/**
+ * Add delegated click and keyboard behavior to Description.Accordion markup.
+ * Delegation also handles accordions inserted after initialization.
+ *
+ * @param {Document|Element} root Element whose descendants should be initialized.
+ * @returns {() => void} Remove the delegated event listeners.
+ */
+export function initDescriptionAccordions(root = document) {
+  const existingCleanup = initializedRoots.get(root)
+  if (existingCleanup) return existingCleanup
+
+  const handleClick = (event) => {
+    const button = getAccordionButton(event.target)
+    if (button) toggleAccordion(button)
+  }
+
+  const handleKeydown = (event) => {
+    if (event.key !== 'Enter' && event.key !== ' ') return
+
+    const button = getAccordionButton(event.target)
+    if (!button || button.matches('button, input, select, textarea, a[href]')) return
+
+    event.preventDefault()
+    toggleAccordion(button)
+  }
+
+  root.addEventListener('click', handleClick)
+  root.addEventListener('keydown', handleKeydown)
+
+  const cleanup = () => {
+    root.removeEventListener('click', handleClick)
+    root.removeEventListener('keydown', handleKeydown)
+    initializedRoots.delete(root)
+  }
+
+  initializedRoots.set(root, cleanup)
+  return cleanup
+}