add more events examples for compound components

Author: bradwestfall

courses/advanced-compound-components/02-context-and-events/lecture/Accordion.final.jsx

@@ -30,8 +30,28 @@ export const Accordion = React.forwardRef(
       return <AccordionContext.Provider value={context} children={child} />
     })
 
+    function onKeyDown(event) {
+      event.preventDefault()
+      const i = selectedIndex
+
+      switch (event.key) {
+        case 'ArrowUp':
+          if (i !== 0) {
+            setSelectedIndex(i - 1)
+          }
+          break
+        case 'ArrowDown':
+          if (i < React.Children.count(children) - 1) {
+            setSelectedIndex(i + 1)
+          }
+          break
+        default:
+          break
+      }
+    }
+
     return (
-      <div data-accordion="" ref={forwardedRef} {...props}>
+      <div data-accordion="" onKeyDown={onKeyDown} ref={forwardedRef} {...props}>
         {children}
       </div>
     )

courses/advanced-compound-components/03-controlled-components/lecture/Accordion.final.jsx

@@ -39,8 +39,34 @@ export const Accordion = React.forwardRef(
       return <AccordionContext.Provider value={context} children={child} />
     })
 
+    function onKeyDown(event) {
+      event.preventDefault()
+      const i = isControlled ? controlledIndex : selectedIndex
+
+      switch (event.key) {
+        case 'ArrowUp':
+          if (i !== 0) {
+            onChange && onChange(i - 1)
+            if (!isControlled) {
+              setSelectedIndex(i - 1)
+            }
+          }
+          break
+        case 'ArrowDown':
+          if (i < React.Children.count(children) - 1) {
+            onChange && onChange(i + 1)
+            if (!isControlled) {
+              setSelectedIndex(i + 1)
+            }
+          }
+          break
+        default:
+          break
+      }
+    }
+
     return (
-      <div data-accordion="" ref={forwardedRef} {...props}>
+      <div data-accordion="" ref={forwardedRef} onKeyDown={onKeyDown} {...props}>
         {children}
       </div>
     )

courses/advanced-compound-components/03-controlled-components/lecture/Accordion.jsx

@@ -28,8 +28,28 @@ export const Accordion = React.forwardRef(
       return <AccordionContext.Provider value={context} children={child} />
     })
 
+    function onKeyDown(event) {
+      event.preventDefault()
+      const i = selectedIndex
+
+      switch (event.key) {
+        case 'ArrowUp':
+          if (i !== 0) {
+            setSelectedIndex(i - 1)
+          }
+          break
+        case 'ArrowDown':
+          if (i < React.Children.count(children) - 1) {
+            setSelectedIndex(i + 1)
+          }
+          break
+        default:
+          break
+      }
+    }
+
     return (
-      <div data-accordion="" ref={forwardedRef} {...props}>
+      <div data-accordion="" onKeyDown={onKeyDown} ref={forwardedRef} {...props}>
         {children}
       </div>
     )