From d8f5f201fc83aeeeeec31c97dbc7fa7c0ff41765 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Tue, 4 Aug 2026 21:09:47 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=A7=81=ED=81=AC=20?=
=?UTF-8?q?Hover=20=EC=8B=9C=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=A0=9C?=
=?UTF-8?q?=EC=99=B8=20=ED=85=8D=EC=8A=A4=ED=8A=B8=EC=97=90=EB=A7=8C=20?=
=?UTF-8?q?=EB=B0=91=EC=A4=84=20=EC=A0=81=EC=9A=A9=20(micro-UX=20=EA=B0=9C?=
=?UTF-8?q?=EC=84=A0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 전체 태그에 `text-decoration: underline;`이 적용되어 아이콘 하단에도 밑줄이 생기는 문제를 수정
- 텍스트를 감싸는 `span:not(.icon)` 영역에만 밑줄이 적용되도록 CSS 수정
- 관련 변경 사항을 테스트하는 JUnit 테스트 케이스 추가
- .jules/palette.md 저널에 한국어로 관련 내용(접근성/UX 개선사항) 추가
---
.jules/palette.md | 4 ++++
src/main/kotlin/html4tree/main.kt | 4 +++-
src/test/kotlin/html4tree/MainTest.kt | 10 ++++++++++
3 files changed, 17 insertions(+), 1 deletion(-)
diff --git a/.jules/palette.md b/.jules/palette.md
index 7b223901..3622a477 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -52,3 +52,7 @@
## 2024-07-13 - 빈 디렉토리 상태의 접근성(Accessibility) 개선
**Learning:** 정적 파일 서버의 빈 디렉토리 상태는 스크린 리더 사용자에게 컨텐츠 누락으로 오해받을 수 있으며, 시각적으로도 일반 리스트 아이템과 정렬이 맞지 않는 문제가 있었습니다.
**Action:** 빈 상태를 나타내는 요소에 `role="status"`를 추가하여 스크린 리더가 명확하게 인지할 수 있도록 하고, 아이콘과 flex 레이아웃을 통해 다른 리스트 아이템과 일관된 시각적 흐름을 제공하도록 합니다.
+
+## 2024-08-04 - 아이콘과 텍스트가 함께 있는 링크의 Hover 상태 시각적 개선
+**학습:** 아이콘과 텍스트를 모두 포함하는 `` 태그 전체에 `text-decoration: underline`을 적용하면 장식용 아이콘 아래에도 밑줄이 표시되어 시각적으로 깔끔하지 못한 UI(시각적 계층 불일치)가 발생합니다.
+**조치:** `:hover` 및 `:focus-visible` 상태에서 전체 `` 블록에 밑줄을 적용하는 대신, 텍스트가 포함된 내부 `span:not(.icon)`에만 선택적으로 `text-decoration: underline`을 적용하여 아이콘 아래의 불필요한 밑줄을 제거하십시오.
diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt
index 29eef0c4..17eeb3c2 100644
--- a/src/main/kotlin/html4tree/main.kt
+++ b/src/main/kotlin/html4tree/main.kt
@@ -281,10 +281,12 @@ fun process_dir(curr_dir: File, excludeSet: Set? = null, dirFiles: Array
}
a:hover, a:focus-visible {
background-color: #f6f8fa;
- text-decoration: underline;
outline: 2px solid #0969da;
outline-offset: -2px;
}
+ a:hover span:not(.icon), a:focus-visible span:not(.icon) {
+ text-decoration: underline;
+ }
@media (prefers-reduced-motion: reduce) {
a {
transition: none;
diff --git a/src/test/kotlin/html4tree/MainTest.kt b/src/test/kotlin/html4tree/MainTest.kt
index 83739c9c..ee9cfac5 100644
--- a/src/test/kotlin/html4tree/MainTest.kt
+++ b/src/test/kotlin/html4tree/MainTest.kt
@@ -86,6 +86,16 @@ class MainTest {
}
}
+ @Test
+ fun testCssContainsMicroUxImprovements() {
+ go(tempDir.absolutePath, -1)
+ val indexFile = File(tempDir, "index.html")
+ assertTrue(indexFile.exists())
+ val htmlContent = indexFile.readText()
+ assertTrue(htmlContent.contains("a:hover span:not(.icon), a:focus-visible span:not(.icon) {"))
+ assertTrue(htmlContent.contains("text-decoration: underline;"))
+ }
+
@Test
fun testGoEmptyDir() {
go(tempDir.absolutePath, -1)