refactor: 네비게이션 접근성 개선

Author: lee-kyu-hwan

packages/view/src/App.tsx

@@ -71,6 +71,7 @@ const App = () => {
         <BranchSelector />
         <RefreshButton />
         <button
+          type="button"
           className="folder-activity-flow-button"
           onClick={handleOpenFolderActivityFlowModal}
         >
@@ -101,12 +102,23 @@ const App = () => {
         <div
           className="folder-activity-flow-modal"
           onClick={handleCloseFolderActivityFlowModal}
+          onKeyDown={(e) => {
+            if (e.key === 'Escape') {
+              handleCloseFolderActivityFlowModal();
+            }
+          }}
+          role="button"
+          tabIndex={0}
         >
           <div
             className="folder-activity-flow-modal-content"
             onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+            role="dialog"
+            tabIndex={-1}
           >
             <button
+              type="button"
               className="folder-activity-flow-modal-close"
               onClick={handleCloseFolderActivityFlowModal}
             >

packages/view/src/components/FolderActivityFlow/FolderActivityFlow.tsx

@@ -118,6 +118,7 @@ const FolderActivityFlow = () => {
           </div>
         </div>
         <button
+          type="button"
           className="folder-activity-flow__mode-toggle"
           onClick={toggleMode}
           style={{
@@ -142,13 +143,22 @@ const FolderActivityFlow = () => {
             <span
               className={index === getBreadcrumbs().length - 1 ? "current" : "clickable"}
               onClick={() => navigateToBreadcrumb(index, getBreadcrumbs().length)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  navigateToBreadcrumb(index, getBreadcrumbs().length);
+                }
+              }}
+              role="button"
+              tabIndex={index === getBreadcrumbs().length - 1 ? -1 : 0}
             >
               {crumb}
             </span>
           </span>
         ))}
         {currentPath !== "" && (
           <button
+            type="button"
             className="folder-activity-flow__back-btn"
             onClick={navigateUp}
           >