메인페이지 탭이동

apps/as/src/pages/dashboard/lib/national-as-map.module.css

@@ -78,6 +78,15 @@
   opacity: 1;
 }
 
+.svgContainer :global(svg) :global(.basin:focus-visible) {
+  opacity: 1;
+}
+
+.svgContainer :global(svg) :global(.basin:focus-visible) :global(path) {
+  stroke: #111827;
+  stroke-width: 2.5;
+}
+
 .svgContainer :global(svg) :global(.basin) :global(path),
 .svgContainer :global(svg) :global(.basin) :global(polygon),
 .svgContainer :global(svg) :global(.basin) :global(polyline) {

apps/as/src/pages/dashboard/lib/use-national-as-map.ts

@@ -265,20 +265,44 @@ export function useNationalAsMap(basinDocPrgrsList: BasinDocPrgrsResponseDto[] |
         };
 
         groups.forEach((group) => {
-          addListener(group, "mouseenter", () => {
+          group.setAttribute("role", "button");
+          group.setAttribute("tabindex", "0");
+          group.setAttribute(
+            "aria-label",
+            `${resolveBasinName(group)} 행정지원 현황 보기`,
+          );
+
+          const activateGroup = () => {
             clearActive?.();
             group.classList.add("active");
             revealGroup(group);
+          };
+          const clearGroupIfInactive = () => {
+            if (!group.matches(":hover") && document.activeElement !== group) {
+              clearActive?.();
+            }
+          };
+
+          addListener(group, "mouseenter", () => {
+            activateGroup();
           });
           addListener(group, "mousemove", () => {
             if (group.classList.contains("active")) revealGroup(group);
           });
-          addListener(group, "mouseleave", () => clearActive?.());
+          addListener(group, "mouseleave", clearGroupIfInactive);
+          addListener(group, "focus", activateGroup);
+          addListener(group, "blur", clearGroupIfInactive);
           addListener(group, "click", (event) => {
             event.stopPropagation();
-            clearActive?.();
-            group.classList.add("active");
-            revealGroup(group);
+            activateGroup();
+          });
+          addListener(group, "keydown", (event) => {
+            const keyboardEvent = event as KeyboardEvent;
+            if (keyboardEvent.key !== "Enter" && keyboardEvent.key !== " ") {
+              return;
+            }
+            keyboardEvent.preventDefault();
+            activateGroup();
           });
         });