#205 feat: 타임블록 tab과 enter로 접근 가능하도록 구현

Team-Tiki · Aug 4, 2024 · db64404 · db64404
1 parent 050f880
commit db64404
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/page/archiving/index/ArchivingPage.tsx b/src/page/archiving/index/ArchivingPage.tsx
@@ -41,7 +41,10 @@ const ArchivingPage = () => {
     setSelectedId(id);
   };
 
-  const handleBlockClick = (e: React.MouseEvent<HTMLDivElement>, block: Block) => {
+  const handleBlockClick = (
+    e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
+    block: Block
+  ) => {
     e.stopPropagation();
 
     e.currentTarget.scrollIntoView({

diff --git a/src/page/archiving/index/component/TimeBlock/TimeBlock.tsx b/src/page/archiving/index/component/TimeBlock/TimeBlock.tsx
@@ -11,7 +11,7 @@ interface TimeBlockProps extends HTMLAttributes<HTMLDivElement> {
   floor: number;
   blockType: string;
   isSelected?: boolean;
-  onBlockClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+  onBlockClick: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
 }
 
 const TimeBlock = ({
@@ -30,7 +30,18 @@ const TimeBlock = ({
 
   return (
     /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-    <div css={blockStyle(blockWidth, startPosition, floor, color, isSelected)} onClick={onBlockClick} {...props}>
+    <div
+      role="tab"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          onBlockClick(e);
+        }
+      }}
+      css={blockStyle(blockWidth, startPosition, floor, color, isSelected)}
+      onClick={onBlockClick}
+      {...props}>
       {BLOCK_TYPE.find((icon) => icon.name === blockType)?.icon}
       <span css={blockNameStyle}>{children}</span>
     </div>