From 44d6eb5aa9fb71cade5c4cb5aacab88ae3539eef Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 17 Jul 2026 14:06:36 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=ED=83=AD=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=82=A4=EB=B3=B4=EB=93=9C=20?=
 =?UTF-8?q?=ED=83=90=EC=83=89(Roving=20tabindex)=20=EC=A7=80=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- WAI-ARIA 탭 디자인 패턴에 따라 탭 컴포넌트에 Roving tabindex 지원을 추가했습니다.
- 선택된 탭만 `tabindex="0"`을 가지고 나머지는 `-1`을 가져 탭 키로 패널에 바로 접근할 수 있습니다.
- 방향키(`ArrowRight`, `ArrowLeft`)를 사용하여 탭을 이동하고 선택할 수 있도록 `keydown` 이벤트를 처리했습니다.
- 스크린 리더 사용자를 위해 `tablist`에 `aria-label`을 추가했습니다.
---
 .Jules/palette.md          |  4 ++++
 components/index.html      |  8 ++++----
 components/krds-gallery.js | 28 +++++++++++++++++++++-------
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 7fb6a23..954af5f 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -17,3 +17,7 @@
 ## 2024-07-10 - prefers-reduced-motion 지원 추가
 **Learning:** 시스템 레벨에서 애니메이션 줄이기(prefers-reduced-motion)를 설정한 사용자를 위해 과도한 애니메이션과 부드러운 스크롤을 비활성화하는 것이 필요합니다. 이때 `0s` 대신 `0.01ms`를 사용하여 `transitionend`와 같은 브라우저 이벤트가 정상적으로 발생하도록 해야 자바스크립트 콜백이 멈추는(hanging) 문제를 방지할 수 있습니다.
 **Action:** 항상 `styles.css` 하단에 `prefers-reduced-motion: reduce` 미디어 쿼리를 추가하여 모든 요소의 `animation-duration`과 `transition-duration`을 `0.01ms`로 설정하고 `scroll-behavior: auto`를 적용합니다.
+
+## 2024-07-17 - Roving tabindex and Keyboard Navigation for Tabs
+**Learning:** ARIA tablists require roving `tabindex` and arrow key navigation for proper keyboard accessibility. Without it, users have to tab through every single tab to get to the panels, which is inefficient.
+**Action:** When creating custom tabs using ARIA `role="tablist"` and `role="tab"`, ensure only the selected tab is in the natural tab order (`tabindex="0"`), while others are removed (`tabindex="-1"`). Handle `ArrowLeft` and `ArrowRight` to switch focus and selection simultaneously.
diff --git a/components/index.html b/components/index.html
index 615c223..51295a5 100644
--- a/components/index.html
+++ b/components/index.html
@@ -101,10 +101,10 @@ <h2>Badge &amp; Tag</h2>
       <h2>Tabs</h2>
       <p class="src">.krds-tabs · Figma Layout/Tabs 59:11</p>
       <div class="krds-tabs">
-        <div class="krds-tabs__list" role="tablist">
-          <button class="krds-tab" role="tab" aria-selected="true" aria-controls="tp1" id="t1">개요</button>
-          <button class="krds-tab" role="tab" aria-selected="false" aria-controls="tp2" id="t2">근거</button>
-          <button class="krds-tab" role="tab" aria-selected="false" aria-controls="tp3" id="t3">참고</button>
+        <div class="krds-tabs__list" role="tablist" aria-label="상세 정보">
+          <button class="krds-tab" role="tab" aria-selected="true" aria-controls="tp1" id="t1" tabindex="0">개요</button>
+          <button class="krds-tab" role="tab" aria-selected="false" aria-controls="tp2" id="t2" tabindex="-1">근거</button>
+          <button class="krds-tab" role="tab" aria-selected="false" aria-controls="tp3" id="t3" tabindex="-1">참고</button>
         </div>
         <div class="krds-tabpanel" role="tabpanel" id="tp1" aria-labelledby="t1">개요 패널 내용입니다.</div>
         <div class="krds-tabpanel" role="tabpanel" id="tp2" aria-labelledby="t2" hidden>근거 패널 내용입니다.</div>
diff --git a/components/krds-gallery.js b/components/krds-gallery.js
index 672e72f..8ed28df 100644
--- a/components/krds-gallery.js
+++ b/components/krds-gallery.js
@@ -1,13 +1,27 @@
     // Tabs: minimal roving behavior. ponytail: native buttons + aria, no framework.
     document.querySelectorAll(".krds-tabs").forEach((tabs) => {
       const tabList = [...tabs.querySelectorAll('[role="tab"]')];
-      tabList.forEach((tab) => {
-        tab.addEventListener("click", () => {
-          tabList.forEach((t) => {
-            const sel = t === tab;
-            t.setAttribute("aria-selected", sel);
-            document.getElementById(t.getAttribute("aria-controls")).hidden = !sel;
-          });
+
+      const selectTab = (tab) => {
+        tabList.forEach((t) => {
+          const sel = t === tab;
+          t.setAttribute("aria-selected", sel);
+          t.setAttribute("tabindex", sel ? "0" : "-1");
+          document.getElementById(t.getAttribute("aria-controls")).hidden = !sel;
+        });
+        tab.focus();
+      };
+
+      tabList.forEach((tab, index) => {
+        tab.addEventListener("click", () => selectTab(tab));
+
+        tab.addEventListener("keydown", (e) => {
+          if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+            e.preventDefault();
+            const direction = e.key === "ArrowRight" ? 1 : -1;
+            const newIndex = (index + direction + tabList.length) % tabList.length;
+            selectTab(tabList[newIndex]);
+          }
         });
       });
     });