Adjusts keydown functionality to use React API

Author: SirJohn96

source/03-components/Accordion/Accordion.tsx

@@ -1,8 +1,7 @@
 import clsx from 'clsx';
 import { GessoComponent } from 'gesso';
-import { useEffect, useId, useRef, useState } from 'react';
+import { KeyboardEvent, createRef, useId, useMemo, useState } from 'react';
 import styles from './accordion.module.css';
-import stylesAccordionItem from './accordion-item.module.css';
 import getCssVar from '../../06-utility/getCssVar';
 import { KEYCODE } from '../../00-config/constants';
 import AccordionItem, { AccordionItemProps } from './AccordionItem';
@@ -22,13 +21,17 @@ function Accordion({
   modifierClasses,
 }: AccordionProps): JSX.Element {
   const accordionId = useId();
-  const accordionRef = useRef(null);
   const [accordionItemsStatus, setAccordionItemsStatus] = useState(
     accordionItems.map((item, index) => ({
       ...item,
       id: `${accordionId}-${index}`,
     })),
   );
+  const accordionItemRefs = useMemo(() => {
+    const refs: { [key: string]: React.RefObject<HTMLButtonElement> } = {};
+    accordionItemsStatus.forEach(item => (refs[item.id] = createRef()));
+    return refs;
+  }, [accordionItemsStatus]);
 
   const openAccordionItem = (items: AccordionItemProps[], index: number) => {
     return items.with(index, {
@@ -65,23 +68,19 @@ function Accordion({
   };
 
   const handleKeydown = (event: KeyboardEvent) => {
-    const currentTarget = event.target as HTMLElement;
-    const accordion = accordionRef.current as HTMLElement | null;
-    const ACCORDION_TOGGLE_CLASS = stylesAccordionItem.toggle;
+    const currentTarget = event.target as HTMLButtonElement;
 
     // Create the array of toggle elements for the accordion group
-    const triggers = Array.prototype.slice.call(
-      accordion ? accordion.querySelectorAll(`.${ACCORDION_TOGGLE_CLASS}`) : [],
-    );
+    const triggers = Object.values(accordionItemRefs).map(ref => ref.current);
 
     // Is this coming from an accordion header?
-    if (currentTarget.tagName === 'BUTTON') {
+    if (triggers && currentTarget.tagName === 'BUTTON') {
       // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
       if (
         event.code === KEYCODE.UP ||
         event.code === KEYCODE.DOWN ||
-        event.code === KEYCODE.PAGEDOWN ||
-        event.code === KEYCODE.UP
+        event.code === KEYCODE.PAGEUP ||
+        event.code === KEYCODE.PAGEDOWN
       ) {
         const index = triggers.indexOf(currentTarget);
         let direction;
@@ -92,40 +91,33 @@ function Accordion({
         }
         const triggerLength = triggers.length;
         const newIndex = (index + triggerLength + direction) % triggerLength;
-        triggers[newIndex].focus();
+        triggers[newIndex]?.focus();
         event.preventDefault();
       } else if (event.code === KEYCODE.HOME || event.code === KEYCODE.END) {
         switch (event.code) {
           // Go to first accordion
           case KEYCODE.HOME:
-            triggers[0].focus();
+            triggers[0]?.focus();
             break;
           // Go to last accordion
           case KEYCODE.END:
-            triggers[triggers.length - 1].focus();
+            triggers[triggers.length - 1]?.focus();
             break;
           default:
-            triggers[0].focus();
+            triggers[0]?.focus();
             break;
         }
         event.preventDefault();
       }
     }
   };
 
-  useEffect(() => {
-    const accordion = accordionRef.current as HTMLElement | null;
-    if (accordion) {
-      accordion.addEventListener('keydown', handleKeydown);
-    }
-  });
-
   return (
     <>
       <div
-        ref={accordionRef}
         className={clsx(styles.accordion, modifierClasses)}
         id={accordionId}
+        onKeyDown={handleKeydown}
       >
         <div className={styles.content}>
           {accordionItemsStatus.map(item => {
@@ -134,6 +126,7 @@ function Accordion({
                 key={item.id}
                 {...item}
                 accordionSpeed={accordionSpeed}
+                toggleRef={accordionItemRefs[item.id]}
                 handleClick={() => handleClick(item.id, item.isOpen)}
               />
             );

source/03-components/Accordion/AccordionItem.tsx

@@ -11,6 +11,7 @@ export interface AccordionItemProps extends GessoComponent {
   titleElement?: ElementType;
   isOpen?: boolean;
   accordionSpeed?: string;
+  toggleRef?: React.RefObject<HTMLButtonElement>;
   handleClick: MouseEventHandler;
 }
 
@@ -21,6 +22,7 @@ function AccordionItem({
   titleElement: TitleElement = 'h3',
   isOpen,
   accordionSpeed,
+  toggleRef,
   modifierClasses,
   handleClick,
 }: AccordionItemProps): JSX.Element {
@@ -52,6 +54,7 @@ function AccordionItem({
             id={buttonId}
             aria-expanded={isOpen}
             aria-controls={sectionId}
+            ref={toggleRef}
             onClick={handleClick}
           >
             {title}