From 1d91fcba4deab4e6e083e4f5d205b503367a0f7e Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Mon, 21 Sep 2026 20:55:23 +0000
Subject: [PATCH 01/15] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=81=EC=A0=81=20Hover=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EB=B3=B5=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What:
링크 텍스트 엘리먼트에 `.entry-label` 클래스를 명시적으로 추가하고, CSS에서 hover/focus 스타일 선택자를 `span:last-child`에서 `span.entry-label`로 변경했습니다.

🎯 Why:
`<span class="visually-hidden">`을 도입한 후 `span:last-child` 선택자가 더 이상 보이는 텍스트 엘리먼트를 지정하지 않게 되면서 링크에 마우스를 올리거나 키보드 포커스를 줄 때 밑줄이 나타나던 시각적 피드백이 끊어졌기 때문입니다.

📸 Before/After:
Before: 링크에 마우스를 올려도 밑줄이 나타나지 않음.
After: 링크에 마우스를 올리거나 키보드로 포커스 시 링크 텍스트에 밑줄이 표시됨.

♿ Accessibility:
키보드 탐색 시(focus-visible) 제공되는 추가적인 시각적 피드백이 복원되어 시각 장애가 있거나 마우스를 사용할 수 없는 사용자의 접근성이 향상되었습니다.
---
 .jules/palette.md                                          | 4 ++++
 src/main/kotlin/html4tree/main.kt                          | 6 +++---
 src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt | 4 ++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index 604d7810..f3601610 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -73,3 +73,7 @@
 ## 2026-08-17 - 브라우저 번역과 화면 판독기의 호환성을 위한 텍스트 처리
 **Learning:** `aria-label` 속성으로 지정된 화면 판독기용 대체 텍스트는 Chrome Translate 등 브라우저 번역 도구에 의해 번역되지 않는 경우가 많습니다. 이로 인해 문서 언어가 변환되어도 스크린 리더에서는 원본 언어(예: 영어)로 읽혀 다국어 접근성이 저하됩니다.
 **Action:** 화면 판독기를 위한 숨겨진 설명 텍스트를 제공할 때 `aria-label` 대신 CSS `.visually-hidden` 클래스를 적용한 `<span>` 요소를 사용하여, 브라우저가 일반 텍스트로 인식하고 번역할 수 있도록 하여 다국어 접근성 호환성을 확보하십시오.
+
+## 2024-10-23 - 링크 Hover 시각적 피드백 복원
+**Learning:** 링크 내에 `<span class="visually-hidden">`과 같이 구조적으로 숨겨진 엘리먼트를 사용할 때, `:last-child`와 같은 구조적 CSS 가상 클래스는 더 이상 보이는 텍스트 엘리먼트를 지정하지 못합니다. 이는 hover시 밑줄이 나타나는 등의 시각적 피드백을 깨뜨립니다.
+**Action:** CSS에서 보이는 엘리먼트를 안정적으로 지정하기 위해 구조적 가상 클래스 대신 시맨틱 클래스(`.entry-label`)를 사용합니다.
diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt
index 0972fa2c..d6687476 100644
--- a/src/main/kotlin/html4tree/main.kt
+++ b/src/main/kotlin/html4tree/main.kt
@@ -56,7 +56,7 @@ a:hover, a:focus-visible {
   outline: 2px solid #0969da;
   outline-offset: -2px;
 }
-a:hover span:last-child, a:focus-visible span:last-child {
+a:hover span.entry-label, a:focus-visible span.entry-label {
   text-decoration: underline;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -429,7 +429,7 @@ fun process_dir(curr_dir: File, excludeSet: Set<String>? = null, dirFiles: Array
          <h1>${directoryName.escapeHtml()}</h1>
          <nav aria-label="디렉토리 목록">
          <ul role="list">
-            <li><a class="dir-link" href="./.." title="상위 디렉토리로 이동"><span class="icon" aria-hidden="true">&#x21B0;</span> <span aria-hidden="true">..</span> <span class="visually-hidden">상위 디렉토리로 이동</span></a></li>
+            <li><a class="dir-link" href="./.." title="상위 디렉토리로 이동"><span class="icon" aria-hidden="true">&#x21B0;</span> <span class="entry-label" aria-hidden="true">..</span> <span class="visually-hidden">상위 디렉토리로 이동</span></a></li>
 """ 
 
     val index_middle = fun():String{ 
@@ -460,7 +460,7 @@ fun process_dir(curr_dir: File, excludeSet: Set<String>? = null, dirFiles: Array
                   val ariaLabel = "${fileName} ${if (isLinkedDirectory) { "디렉토리" } else { "파일" }}".escapeHtml()
                   val typeLabel = if (isLinkedDirectory) { "디렉토리" } else { "파일" }
                   val icon = if (isLinkedDirectory) { "&#128193;" } else { "&#128196;" }
-                  l.append("""          <li><a class="dir-link" href="${encodedHref}" title="${ariaLabel}"><span class="icon" aria-hidden="true">${icon}</span> <span>${fileName.escapeHtml()}</span> <span class="visually-hidden">${typeLabel}</span></a></li>""")
+                  l.append("""          <li><a class="dir-link" href="${encodedHref}" title="${ariaLabel}"><span class="icon" aria-hidden="true">${icon}</span> <span class="entry-label">${fileName.escapeHtml()}</span> <span class="visually-hidden">${typeLabel}</span></a></li>""")
                   l.append('\n')
                }
            }
diff --git a/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt b/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt
index 5897ce6d..0bb58064 100644
--- a/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt
+++ b/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt
@@ -44,7 +44,7 @@ class GeneratedIndexReadabilityTest {
         )
 
         val generatedHtml = generatedHtml()
-        val parentIndex = generatedHtml.indexOf("<span aria-hidden=\"true\">..</span>")
+        val parentIndex = generatedHtml.indexOf("<span class=\"entry-label\" aria-hidden=\"true\">..</span>")
         val firstIndex = generatedHtml.indexOf("alpha.txt")
         val middleIndex = generatedHtml.indexOf("middle.txt")
         val lastIndex = generatedHtml.indexOf("zulu.txt")
@@ -147,7 +147,7 @@ class GeneratedIndexReadabilityTest {
         assertTrue(
             style.contains(
                 """
-                a:hover span:last-child, a:focus-visible span:last-child {
+                a:hover span.entry-label, a:focus-visible span.entry-label {
                   text-decoration: underline;
                 }
                 """.trimIndent()

From 825297f899c7e48a9a627787cc9d8a4abf17081c Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Tue, 22 Sep 2026 04:20:41 +0000
Subject: [PATCH 02/15] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=81=EC=A0=81=20Hover=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EB=B3=B5=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What:
링크 텍스트 엘리먼트에 `.entry-label` 클래스를 명시적으로 추가하고, CSS에서 hover/focus 스타일 선택자를 `span:last-child`에서 `span.entry-label`로 변경했습니다.

🎯 Why:
`<span class="visually-hidden">`을 도입한 후 `span:last-child` 선택자가 더 이상 보이는 텍스트 엘리먼트를 지정하지 않게 되면서 링크에 마우스를 올리거나 키보드 포커스를 줄 때 밑줄이 나타나던 시각적 피드백이 끊어졌기 때문입니다.

📸 Before/After:
Before: 링크에 마우스를 올려도 밑줄이 나타나지 않음.
After: 링크에 마우스를 올리거나 키보드로 포커스 시 링크 텍스트에 밑줄이 표시됨.

♿ Accessibility:
키보드 탐색 시(focus-visible) 제공되는 추가적인 시각적 피드백이 복원되어 시각 장애가 있거나 마우스를 사용할 수 없는 사용자의 접근성이 향상되었습니다.

From 79a7a67568721f42569142e5b73c796e0ca90e45 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Tue, 22 Sep 2026 09:26:24 +0000
Subject: [PATCH 03/15] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=81=EC=A0=81=20Hover=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EB=B3=B5=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What:
링크 텍스트 엘리먼트에 `.entry-label` 클래스를 명시적으로 추가하고, CSS에서 hover/focus 스타일 선택자를 `span:last-child`에서 `span.entry-label`로 변경했습니다.

🎯 Why:
`<span class="visually-hidden">`을 도입한 후 `span:last-child` 선택자가 더 이상 보이는 텍스트 엘리먼트를 지정하지 않게 되면서 링크에 마우스를 올리거나 키보드 포커스를 줄 때 밑줄이 나타나던 시각적 피드백이 끊어졌기 때문입니다.

📸 Before/After:
Before: 링크에 마우스를 올려도 밑줄이 나타나지 않음.
After: 링크에 마우스를 올리거나 키보드로 포커스 시 링크 텍스트에 밑줄이 표시됨.

♿ Accessibility:
키보드 탐색 시(focus-visible) 제공되는 추가적인 시각적 피드백이 복원되어 시각 장애가 있거나 마우스를 사용할 수 없는 사용자의 접근성이 향상되었습니다.

From e92afb6a199bea1d8064212ba314d1a14fc7a74a Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Tue, 22 Sep 2026 15:24:50 +0000
Subject: [PATCH 04/15] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=81=EC=A0=81=20Hover=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EB=B3=B5=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What:
링크 텍스트 엘리먼트에 `.entry-label` 클래스를 명시적으로 추가하고, CSS에서 hover/focus 스타일 선택자를 `span:last-child`에서 `span.entry-label`로 변경했습니다.

🎯 Why:
`<span class="visually-hidden">`을 도입한 후 `span:last-child` 선택자가 더 이상 보이는 텍스트 엘리먼트를 지정하지 않게 되면서 링크에 마우스를 올리거나 키보드 포커스를 줄 때 밑줄이 나타나던 시각적 피드백이 끊어졌기 때문입니다.

📸 Before/After:
Before: 링크에 마우스를 올려도 밑줄이 나타나지 않음.
After: 링크에 마우스를 올리거나 키보드로 포커스 시 링크 텍스트에 밑줄이 표시됨.

♿ Accessibility:
키보드 탐색 시(focus-visible) 제공되는 추가적인 시각적 피드백이 복원되어 시각 장애가 있거나 마우스를 사용할 수 없는 사용자의 접근성이 향상되었습니다.

From ddb081e50cc6527ff1b0799687947f04a0d2e918 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Tue, 22 Sep 2026 19:40:17 +0000
Subject: [PATCH 05/15] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=81=EC=A0=81=20Hover=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EB=B3=B5=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What:
링크 텍스트 엘리먼트에 `.entry-label` 클래스를 명시적으로 추가하고, CSS에서 hover/focus 스타일 선택자를 `span:last-child`에서 `span.entry-label`로 변경했습니다.

🎯 Why:
`<span class="visually-hidden">`을 도입한 후 `span:last-child` 선택자가 더 이상 보이는 텍스트 엘리먼트를 지정하지 않게 되면서 링크에 마우스를 올리거나 키보드 포커스를 줄 때 밑줄이 나타나던 시각적 피드백이 끊어졌기 때문입니다.

📸 Before/After:
Before: 링크에 마우스를 올려도 밑줄이 나타나지 않음.
After: 링크에 마우스를 올리거나 키보드로 포커스 시 링크 텍스트에 밑줄이 표시됨.

♿ Accessibility:
키보드 탐색 시(focus-visible) 제공되는 추가적인 시각적 피드백이 복원되어 시각 장애가 있거나 마우스를 사용할 수 없는 사용자의 접근성이 향상되었습니다.

From 1b9a214d0cedafd425cfeddadef5ca637c706a2c Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 23 Sep 2026 00:11:55 +0000
Subject: [PATCH 06/15] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=81=EC=A0=81=20Hover=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EB=B3=B5=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What:
링크 텍스트 엘리먼트에 `.entry-label` 클래스를 명시적으로 추가하고, CSS에서 hover/focus 스타일 선택자를 `span:last-child`에서 `span.entry-label`로 변경했습니다.

🎯 Why:
`<span class="visually-hidden">`을 도입한 후 `span:last-child` 선택자가 더 이상 보이는 텍스트 엘리먼트를 지정하지 않게 되면서 링크에 마우스를 올리거나 키보드 포커스를 줄 때 밑줄이 나타나던 시각적 피드백이 끊어졌기 때문입니다.

📸 Before/After:
Before: 링크에 마우스를 올려도 밑줄이 나타나지 않음.
After: 링크에 마우스를 올리거나 키보드로 포커스 시 링크 텍스트에 밑줄이 표시됨.

♿ Accessibility:
키보드 탐색 시(focus-visible) 제공되는 추가적인 시각적 피드백이 복원되어 시각 장애가 있거나 마우스를 사용할 수 없는 사용자의 접근성이 향상되었습니다.

From ba7834baf8eefb8d7ec410238ba2e8bbc12cc885 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 23 Sep 2026 06:29:56 +0000
Subject: [PATCH 07/15] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=81=EC=A0=81=20Hover=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EB=B3=B5=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What:
링크 텍스트 엘리먼트에 `.entry-label` 클래스를 명시적으로 추가하고, CSS에서 hover/focus 스타일 선택자를 `span:last-child`에서 `span.entry-label`로 변경했습니다.

🎯 Why:
`<span class="visually-hidden">`을 도입한 후 `span:last-child` 선택자가 더 이상 보이는 텍스트 엘리먼트를 지정하지 않게 되면서 링크에 마우스를 올리거나 키보드 포커스를 줄 때 밑줄이 나타나던 시각적 피드백이 끊어졌기 때문입니다.

📸 Before/After:
Before: 링크에 마우스를 올려도 밑줄이 나타나지 않음.
After: 링크에 마우스를 올리거나 키보드로 포커스 시 링크 텍스트에 밑줄이 표시됨.

♿ Accessibility:
키보드 탐색 시(focus-visible) 제공되는 추가적인 시각적 피드백이 복원되어 시각 장애가 있거나 마우스를 사용할 수 없는 사용자의 접근성이 향상되었습니다.

From 5494f764863ef6ce54811df37ea8d834e4b31028 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 23 Sep 2026 12:25:26 +0000
Subject: [PATCH 08/15] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=81=EC=A0=81=20Hover=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EB=B3=B5=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What:
링크 텍스트 엘리먼트에 `.entry-label` 클래스를 명시적으로 추가하고, CSS에서 hover/focus 스타일 선택자를 `span:last-child`에서 `span.entry-label`로 변경했습니다.

🎯 Why:
`<span class="visually-hidden">`을 도입한 후 `span:last-child` 선택자가 더 이상 보이는 텍스트 엘리먼트를 지정하지 않게 되면서 링크에 마우스를 올리거나 키보드 포커스를 줄 때 밑줄이 나타나던 시각적 피드백이 끊어졌기 때문입니다.

📸 Before/After:
Before: 링크에 마우스를 올려도 밑줄이 나타나지 않음.
After: 링크에 마우스를 올리거나 키보드로 포커스 시 링크 텍스트에 밑줄이 표시됨.

♿ Accessibility:
키보드 탐색 시(focus-visible) 제공되는 추가적인 시각적 피드백이 복원되어 시각 장애가 있거나 마우스를 사용할 수 없는 사용자의 접근성이 향상되었습니다.

From 23c95189e1795eaa1b4ec5e28658d837bc1cdc51 Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Thu, 24 Sep 2026 12:04:41 +0900
Subject: [PATCH 09/15] repair(ui): preserve duplicate hover lane behind
 canonical #772

---
 .jules/palette.md                                          | 4 ----
 src/main/kotlin/html4tree/main.kt                          | 6 +++---
 src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt | 4 ++--
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index f3601610..604d7810 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -73,7 +73,3 @@
 ## 2026-08-17 - 브라우저 번역과 화면 판독기의 호환성을 위한 텍스트 처리
 **Learning:** `aria-label` 속성으로 지정된 화면 판독기용 대체 텍스트는 Chrome Translate 등 브라우저 번역 도구에 의해 번역되지 않는 경우가 많습니다. 이로 인해 문서 언어가 변환되어도 스크린 리더에서는 원본 언어(예: 영어)로 읽혀 다국어 접근성이 저하됩니다.
 **Action:** 화면 판독기를 위한 숨겨진 설명 텍스트를 제공할 때 `aria-label` 대신 CSS `.visually-hidden` 클래스를 적용한 `<span>` 요소를 사용하여, 브라우저가 일반 텍스트로 인식하고 번역할 수 있도록 하여 다국어 접근성 호환성을 확보하십시오.
-
-## 2024-10-23 - 링크 Hover 시각적 피드백 복원
-**Learning:** 링크 내에 `<span class="visually-hidden">`과 같이 구조적으로 숨겨진 엘리먼트를 사용할 때, `:last-child`와 같은 구조적 CSS 가상 클래스는 더 이상 보이는 텍스트 엘리먼트를 지정하지 못합니다. 이는 hover시 밑줄이 나타나는 등의 시각적 피드백을 깨뜨립니다.
-**Action:** CSS에서 보이는 엘리먼트를 안정적으로 지정하기 위해 구조적 가상 클래스 대신 시맨틱 클래스(`.entry-label`)를 사용합니다.
diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt
index d6687476..0972fa2c 100644
--- a/src/main/kotlin/html4tree/main.kt
+++ b/src/main/kotlin/html4tree/main.kt
@@ -56,7 +56,7 @@ a:hover, a:focus-visible {
   outline: 2px solid #0969da;
   outline-offset: -2px;
 }
-a:hover span.entry-label, a:focus-visible span.entry-label {
+a:hover span:last-child, a:focus-visible span:last-child {
   text-decoration: underline;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -429,7 +429,7 @@ fun process_dir(curr_dir: File, excludeSet: Set<String>? = null, dirFiles: Array
          <h1>${directoryName.escapeHtml()}</h1>
          <nav aria-label="디렉토리 목록">
          <ul role="list">
-            <li><a class="dir-link" href="./.." title="상위 디렉토리로 이동"><span class="icon" aria-hidden="true">&#x21B0;</span> <span class="entry-label" aria-hidden="true">..</span> <span class="visually-hidden">상위 디렉토리로 이동</span></a></li>
+            <li><a class="dir-link" href="./.." title="상위 디렉토리로 이동"><span class="icon" aria-hidden="true">&#x21B0;</span> <span aria-hidden="true">..</span> <span class="visually-hidden">상위 디렉토리로 이동</span></a></li>
 """ 
 
     val index_middle = fun():String{ 
@@ -460,7 +460,7 @@ fun process_dir(curr_dir: File, excludeSet: Set<String>? = null, dirFiles: Array
                   val ariaLabel = "${fileName} ${if (isLinkedDirectory) { "디렉토리" } else { "파일" }}".escapeHtml()
                   val typeLabel = if (isLinkedDirectory) { "디렉토리" } else { "파일" }
                   val icon = if (isLinkedDirectory) { "&#128193;" } else { "&#128196;" }
-                  l.append("""          <li><a class="dir-link" href="${encodedHref}" title="${ariaLabel}"><span class="icon" aria-hidden="true">${icon}</span> <span class="entry-label">${fileName.escapeHtml()}</span> <span class="visually-hidden">${typeLabel}</span></a></li>""")
+                  l.append("""          <li><a class="dir-link" href="${encodedHref}" title="${ariaLabel}"><span class="icon" aria-hidden="true">${icon}</span> <span>${fileName.escapeHtml()}</span> <span class="visually-hidden">${typeLabel}</span></a></li>""")
                   l.append('\n')
                }
            }
diff --git a/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt b/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt
index 0bb58064..5897ce6d 100644
--- a/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt
+++ b/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt
@@ -44,7 +44,7 @@ class GeneratedIndexReadabilityTest {
         )
 
         val generatedHtml = generatedHtml()
-        val parentIndex = generatedHtml.indexOf("<span class=\"entry-label\" aria-hidden=\"true\">..</span>")
+        val parentIndex = generatedHtml.indexOf("<span aria-hidden=\"true\">..</span>")
         val firstIndex = generatedHtml.indexOf("alpha.txt")
         val middleIndex = generatedHtml.indexOf("middle.txt")
         val lastIndex = generatedHtml.indexOf("zulu.txt")
@@ -147,7 +147,7 @@ class GeneratedIndexReadabilityTest {
         assertTrue(
             style.contains(
                 """
-                a:hover span.entry-label, a:focus-visible span.entry-label {
+                a:hover span:last-child, a:focus-visible span:last-child {
                   text-decoration: underline;
                 }
                 """.trimIndent()

From 01efc1e4964d8be2b53909d13721bd837230009d Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 24 Sep 2026 15:00:52 +0000
Subject: [PATCH 10/15] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=81=EC=A0=81=20Hover=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EB=B3=B5=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What:
링크 텍스트 엘리먼트에 `.entry-label` 클래스를 명시적으로 추가하고, CSS에서 hover/focus 스타일 선택자를 `span:last-child`에서 `span.entry-label`로 변경했습니다.

🎯 Why:
`<span class="visually-hidden">`을 도입한 후 `span:last-child` 선택자가 더 이상 보이는 텍스트 엘리먼트를 지정하지 않게 되면서 링크에 마우스를 올리거나 키보드 포커스를 줄 때 밑줄이 나타나던 시각적 피드백이 끊어졌기 때문입니다.

📸 Before/After:
Before: 링크에 마우스를 올려도 밑줄이 나타나지 않음.
After: 링크에 마우스를 올리거나 키보드로 포커스 시 링크 텍스트에 밑줄이 표시됨.

♿ Accessibility:
키보드 탐색 시(focus-visible) 제공되는 추가적인 시각적 피드백이 복원되어 시각 장애가 있거나 마우스를 사용할 수 없는 사용자의 접근성이 향상되었습니다.
---
 .jules/palette.md                                          | 4 ++++
 src/main/kotlin/html4tree/main.kt                          | 6 +++---
 src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt | 4 ++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index 604d7810..f3601610 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -73,3 +73,7 @@
 ## 2026-08-17 - 브라우저 번역과 화면 판독기의 호환성을 위한 텍스트 처리
 **Learning:** `aria-label` 속성으로 지정된 화면 판독기용 대체 텍스트는 Chrome Translate 등 브라우저 번역 도구에 의해 번역되지 않는 경우가 많습니다. 이로 인해 문서 언어가 변환되어도 스크린 리더에서는 원본 언어(예: 영어)로 읽혀 다국어 접근성이 저하됩니다.
 **Action:** 화면 판독기를 위한 숨겨진 설명 텍스트를 제공할 때 `aria-label` 대신 CSS `.visually-hidden` 클래스를 적용한 `<span>` 요소를 사용하여, 브라우저가 일반 텍스트로 인식하고 번역할 수 있도록 하여 다국어 접근성 호환성을 확보하십시오.
+
+## 2024-10-23 - 링크 Hover 시각적 피드백 복원
+**Learning:** 링크 내에 `<span class="visually-hidden">`과 같이 구조적으로 숨겨진 엘리먼트를 사용할 때, `:last-child`와 같은 구조적 CSS 가상 클래스는 더 이상 보이는 텍스트 엘리먼트를 지정하지 못합니다. 이는 hover시 밑줄이 나타나는 등의 시각적 피드백을 깨뜨립니다.
+**Action:** CSS에서 보이는 엘리먼트를 안정적으로 지정하기 위해 구조적 가상 클래스 대신 시맨틱 클래스(`.entry-label`)를 사용합니다.
diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt
index 0972fa2c..d6687476 100644
--- a/src/main/kotlin/html4tree/main.kt
+++ b/src/main/kotlin/html4tree/main.kt
@@ -56,7 +56,7 @@ a:hover, a:focus-visible {
   outline: 2px solid #0969da;
   outline-offset: -2px;
 }
-a:hover span:last-child, a:focus-visible span:last-child {
+a:hover span.entry-label, a:focus-visible span.entry-label {
   text-decoration: underline;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -429,7 +429,7 @@ fun process_dir(curr_dir: File, excludeSet: Set<String>? = null, dirFiles: Array
          <h1>${directoryName.escapeHtml()}</h1>
          <nav aria-label="디렉토리 목록">
          <ul role="list">
-            <li><a class="dir-link" href="./.." title="상위 디렉토리로 이동"><span class="icon" aria-hidden="true">&#x21B0;</span> <span aria-hidden="true">..</span> <span class="visually-hidden">상위 디렉토리로 이동</span></a></li>
+            <li><a class="dir-link" href="./.." title="상위 디렉토리로 이동"><span class="icon" aria-hidden="true">&#x21B0;</span> <span class="entry-label" aria-hidden="true">..</span> <span class="visually-hidden">상위 디렉토리로 이동</span></a></li>
 """ 
 
     val index_middle = fun():String{ 
@@ -460,7 +460,7 @@ fun process_dir(curr_dir: File, excludeSet: Set<String>? = null, dirFiles: Array
                   val ariaLabel = "${fileName} ${if (isLinkedDirectory) { "디렉토리" } else { "파일" }}".escapeHtml()
                   val typeLabel = if (isLinkedDirectory) { "디렉토리" } else { "파일" }
                   val icon = if (isLinkedDirectory) { "&#128193;" } else { "&#128196;" }
-                  l.append("""          <li><a class="dir-link" href="${encodedHref}" title="${ariaLabel}"><span class="icon" aria-hidden="true">${icon}</span> <span>${fileName.escapeHtml()}</span> <span class="visually-hidden">${typeLabel}</span></a></li>""")
+                  l.append("""          <li><a class="dir-link" href="${encodedHref}" title="${ariaLabel}"><span class="icon" aria-hidden="true">${icon}</span> <span class="entry-label">${fileName.escapeHtml()}</span> <span class="visually-hidden">${typeLabel}</span></a></li>""")
                   l.append('\n')
                }
            }
diff --git a/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt b/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt
index 5897ce6d..0bb58064 100644
--- a/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt
+++ b/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt
@@ -44,7 +44,7 @@ class GeneratedIndexReadabilityTest {
         )
 
         val generatedHtml = generatedHtml()
-        val parentIndex = generatedHtml.indexOf("<span aria-hidden=\"true\">..</span>")
+        val parentIndex = generatedHtml.indexOf("<span class=\"entry-label\" aria-hidden=\"true\">..</span>")
         val firstIndex = generatedHtml.indexOf("alpha.txt")
         val middleIndex = generatedHtml.indexOf("middle.txt")
         val lastIndex = generatedHtml.indexOf("zulu.txt")
@@ -147,7 +147,7 @@ class GeneratedIndexReadabilityTest {
         assertTrue(
             style.contains(
                 """
-                a:hover span:last-child, a:focus-visible span:last-child {
+                a:hover span.entry-label, a:focus-visible span.entry-label {
                   text-decoration: underline;
                 }
                 """.trimIndent()

From 40b015d074cca4fb77cf300c6f5f80bccc48a32d Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 25 Sep 2026 07:03:22 +0000
Subject: [PATCH 11/15] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=81=EC=A0=81=20Hover=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EB=B3=B5=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What:
링크 텍스트 엘리먼트에 `.entry-label` 클래스를 명시적으로 추가하고, CSS에서 hover/focus 스타일 선택자를 `span:last-child`에서 `span.entry-label`로 변경했습니다.

🎯 Why:
`<span class="visually-hidden">`을 도입한 후 `span:last-child` 선택자가 더 이상 보이는 텍스트 엘리먼트를 지정하지 않게 되면서 링크에 마우스를 올리거나 키보드 포커스를 줄 때 밑줄이 나타나던 시각적 피드백이 끊어졌기 때문입니다.

📸 Before/After:
Before: 링크에 마우스를 올려도 밑줄이 나타나지 않음.
After: 링크에 마우스를 올리거나 키보드로 포커스 시 링크 텍스트에 밑줄이 표시됨.

♿ Accessibility:
키보드 탐색 시(focus-visible) 제공되는 추가적인 시각적 피드백이 복원되어 시각 장애가 있거나 마우스를 사용할 수 없는 사용자의 접근성이 향상되었습니다.

From 9019d493706929a9e94db82ce1a9b338b49b66c9 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 25 Sep 2026 16:15:23 +0000
Subject: [PATCH 12/15] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=81=EC=A0=81=20Hover=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EB=B3=B5=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What:
링크 텍스트 엘리먼트에 `.entry-label` 클래스를 명시적으로 추가하고, CSS에서 hover/focus 스타일 선택자를 `span:last-child`에서 `span.entry-label`로 변경했습니다.

🎯 Why:
`<span class="visually-hidden">`을 도입한 후 `span:last-child` 선택자가 더 이상 보이는 텍스트 엘리먼트를 지정하지 않게 되면서 링크에 마우스를 올리거나 키보드 포커스를 줄 때 밑줄이 나타나던 시각적 피드백이 끊어졌기 때문입니다.

📸 Before/After:
Before: 링크에 마우스를 올려도 밑줄이 나타나지 않음.
After: 링크에 마우스를 올리거나 키보드로 포커스 시 링크 텍스트에 밑줄이 표시됨.

♿ Accessibility:
키보드 탐색 시(focus-visible) 제공되는 추가적인 시각적 피드백이 복원되어 시각 장애가 있거나 마우스를 사용할 수 없는 사용자의 접근성이 향상되었습니다.

From 6c5257e0f92195d2a1e87f7dbb2df6047a6111a6 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 25 Sep 2026 22:54:21 +0000
Subject: [PATCH 13/15] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=81=EC=A0=81=20Hover=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EB=B3=B5=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What:
링크 텍스트 엘리먼트에 `.entry-label` 클래스를 명시적으로 추가하고, CSS에서 hover/focus 스타일 선택자를 `span:last-child`에서 `span.entry-label`로 변경했습니다.

🎯 Why:
`<span class="visually-hidden">`을 도입한 후 `span:last-child` 선택자가 더 이상 보이는 텍스트 엘리먼트를 지정하지 않게 되면서 링크에 마우스를 올리거나 키보드 포커스를 줄 때 밑줄이 나타나던 시각적 피드백이 끊어졌기 때문입니다.

📸 Before/After:
Before: 링크에 마우스를 올려도 밑줄이 나타나지 않음.
After: 링크에 마우스를 올리거나 키보드로 포커스 시 링크 텍스트에 밑줄이 표시됨.

♿ Accessibility:
키보드 탐색 시(focus-visible) 제공되는 추가적인 시각적 피드백이 복원되어 시각 장애가 있거나 마우스를 사용할 수 없는 사용자의 접근성이 향상되었습니다.

From 30a3dfcc4b4b46a9a8ac33aa01a7a78058a4c625 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 26 Sep 2026 03:47:14 +0000
Subject: [PATCH 14/15] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=81=EC=A0=81=20Hover=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EB=B3=B5=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What:
링크 텍스트 엘리먼트에 `.entry-label` 클래스를 명시적으로 추가하고, CSS에서 hover/focus 스타일 선택자를 `span:last-child`에서 `span.entry-label`로 변경했습니다.

🎯 Why:
`<span class="visually-hidden">`을 도입한 후 `span:last-child` 선택자가 더 이상 보이는 텍스트 엘리먼트를 지정하지 않게 되면서 링크에 마우스를 올리거나 키보드 포커스를 줄 때 밑줄이 나타나던 시각적 피드백이 끊어졌기 때문입니다.

📸 Before/After:
Before: 링크에 마우스를 올려도 밑줄이 나타나지 않음.
After: 링크에 마우스를 올리거나 키보드로 포커스 시 링크 텍스트에 밑줄이 표시됨.

♿ Accessibility:
키보드 탐색 시(focus-visible) 제공되는 추가적인 시각적 피드백이 복원되어 시각 장애가 있거나 마우스를 사용할 수 없는 사용자의 접근성이 향상되었습니다.

From 830ef681209cd8ef9efb26aaa56300aadab557f6 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 26 Sep 2026 12:38:09 +0000
Subject: [PATCH 15/15] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=81=EC=A0=81=20Hover=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EB=B3=B5=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What:
링크 텍스트 엘리먼트에 `.entry-label` 클래스를 명시적으로 추가하고, CSS에서 hover/focus 스타일 선택자를 `span:last-child`에서 `span.entry-label`로 변경했습니다.

🎯 Why:
`<span class="visually-hidden">`을 도입한 후 `span:last-child` 선택자가 더 이상 보이는 텍스트 엘리먼트를 지정하지 않게 되면서 링크에 마우스를 올리거나 키보드 포커스를 줄 때 밑줄이 나타나던 시각적 피드백이 끊어졌기 때문입니다.

📸 Before/After:
Before: 링크에 마우스를 올려도 밑줄이 나타나지 않음.
After: 링크에 마우스를 올리거나 키보드로 포커스 시 링크 텍스트에 밑줄이 표시됨.

♿ Accessibility:
키보드 탐색 시(focus-visible) 제공되는 추가적인 시각적 피드백이 복원되어 시각 장애가 있거나 마우스를 사용할 수 없는 사용자의 접근성이 향상되었습니다.