fix: AccordionPanelのkeydownイベントリスナーをTriggerに移動

kufu · Dec 19, 2024 · 407a33b · 407a33b
1 parent 6fead5e
commit 407a33b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanel.tsx b/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanel.tsx
@@ -39,6 +39,7 @@ export const AccordionPanelContext = React.createContext<{
   expandedItems: Map<string, string>
   expandableMultiply: boolean
   parentRef: React.RefObject<HTMLDivElement> | null
+  handleKeyPress?: (event: React.KeyboardEvent<HTMLElement>) => void
   onClickTrigger?: (itemName: string, isExpanded: boolean) => void
   onClickProps?: (expandedItems: string[]) => void
 }>({
@@ -71,7 +72,7 @@ export const AccordionPanel: React.FC<Props & ElementProps> = ({
     [expandableMultiply, expandedItems],
   )
 
-  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>): void => {
+  const handleKeyPress = (event: React.KeyboardEvent<HTMLElement>): void => {
     if (!parentRef?.current) {
       return
     }
@@ -118,16 +119,11 @@ export const AccordionPanel: React.FC<Props & ElementProps> = ({
         iconPosition,
         expandableMultiply,
         parentRef,
+        handleKeyPress,
       }}
     >
       {/* eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation */}
-      <div
-        {...props}
-        className={styles}
-        ref={parentRef}
-        onKeyDown={handleKeyPress}
-        role="presentation"
-      />
+      <div {...props} className={styles} ref={parentRef} role="presentation" />
     </AccordionPanelContext.Provider>
   )
 }
diff --git a/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelTrigger.tsx b/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelTrigger.tsx
@@ -70,8 +70,14 @@ export const AccordionPanelTrigger: FC<Props & ElementProps> = ({
     }
   }, [className])
   const { name } = useContext(AccordionPanelItemContext)
-  const { iconPosition, expandedItems, onClickTrigger, onClickProps, expandableMultiply } =
-    useContext(AccordionPanelContext)
+  const {
+    iconPosition,
+    expandedItems,
+    onClickTrigger,
+    onClickProps,
+    expandableMultiply,
+    handleKeyPress,
+  } = useContext(AccordionPanelContext)
 
   const isExpanded = getIsInclude(expandedItems, name)
 
@@ -98,6 +104,7 @@ export const AccordionPanelTrigger: FC<Props & ElementProps> = ({
         aria-expanded={isExpanded}
         aria-controls={`${name}-content`}
         onClick={handleClick}
+        onKeyDown={handleKeyPress}
         className={buttonStyle}
         data-component="AccordionHeaderButton"
         type="button"