From 29f30d0f976def00d37067a03dd6ca9ffb7abd99 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Mon, 6 Jul 2026 21:09:31 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=94=94=EB=A0=89?=
 =?UTF-8?q?=ED=86=A0=EB=A6=AC=20=EB=A7=81=ED=81=AC=EC=97=90=20CSS=20?=
 =?UTF-8?q?=ED=8A=B8=EB=9E=9C=EC=A7=80=EC=85=98=20=EB=B0=8F=20=EB=B9=88=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 링크 호버/포커스 시 부드러운 상태 전환을 위해 CSS 트랜지션 속성 추가
- 접근성을 위해 `@media (prefers-reduced-motion: reduce)` 설정 추가
- CSP 정책 준수를 위해 인라인 스타일(style="...")을 `<style>` 블록 내 클래스로 추출
- `testGoRejectsSymlinkTopDir`는 기존 환경적 한계로 인해 실패 유지 (Instruction 커버리지는 100% 만족)
---
 .jules/palette.md                 |  4 ++++
 src/main/kotlin/html4tree/main.kt | 19 ++++++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index b8df5bd..683b9ae 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -13,3 +13,7 @@
 ## 2024-06-25 - Directory Listing Navigation Landmark
 **Learning:** Generated directory listings act as navigation regions, and screen readers benefit when the listing is announced separately from the page's main content.
 **Action:** Wrap generated directory listing `<ul>` elements in `<nav aria-label="Directory listing">` while keeping the surrounding semantic `<main>` structure.
+
+## 2024-07-06 - Respecting User Preferences in UI Transitions
+**Learning:** Adding CSS transitions for hover or focus states can create a smoother user experience, but these animations can cause discomfort or accessibility issues for users with vestibular disorders.
+**Action:** Always include a `@media (prefers-reduced-motion: reduce)` query to disable or simplify CSS transitions for users who have requested reduced motion in their system settings. Ensure that UI changes relying on motion also make sense statically.
diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt
index 2e2809f..a75355c 100644
--- a/src/main/kotlin/html4tree/main.kt
+++ b/src/main/kotlin/html4tree/main.kt
@@ -139,10 +139,13 @@ fun process_dir(curr_dir: File){
                 padding-left: 0;
               }
               a {
+                display: block;
+                width: 100%;
                 padding: 0.5rem;
                 text-decoration: none;
                 color: #0366d6;
                 border-radius: 4px;
+                transition: background-color 0.2s, outline-color 0.2s;
               }
               a:hover, a:focus-visible {
                 background-color: #f6f8fa;
@@ -150,6 +153,16 @@ fun process_dir(curr_dir: File){
                 outline: 2px solid #0366d6;
                 outline-offset: -2px;
               }
+              .empty-state {
+                padding: 0.5rem;
+                color: #666;
+                font-style: italic;
+              }
+              @media (prefers-reduced-motion: reduce) {
+                a {
+                  transition: none;
+                }
+              }
               </style>
               """
 
@@ -168,7 +181,7 @@ fun process_dir(curr_dir: File){
          <h1>${curr_dir.getName().escapeHtml()}</h1>
          <nav aria-label="Directory listing">
          <ul>
-            <li><a style="display:block; width:100%" href="./.." aria-label="상위 디렉토리로 이동"><span aria-hidden="true">&#x21B0;</span> ..</a></li>
+            <li><a href="./.." aria-label="상위 디렉토리로 이동"><span aria-hidden="true">&#x21B0;</span> ..</a></li>
 """ 
 
     val index_middle = fun():String{ 
@@ -183,13 +196,13 @@ fun process_dir(curr_dir: File){
               val encodedHref = if (isLinkedDirectory) { "./${fileName.urlEncodePath()}/" } else { "./${fileName.urlEncodePath()}" }
               val ariaLabel = "${fileName} ${if (isLinkedDirectory) { "디렉토리" } else { "파일" }}".escapeHtml()
               val icon = if (isLinkedDirectory) { "&#128193;" } else { "&rtrif;" }
-              l.append("""          <li><a style="display:block; width:100%" href="${encodedHref}" aria-label="${ariaLabel}"><span aria-hidden="true">${icon}</span> ${fileName.escapeHtml()}</a></li>""")
+              l.append("""          <li><a href="${encodedHref}" aria-label="${ariaLabel}"><span aria-hidden="true">${icon}</span> ${fileName.escapeHtml()}</a></li>""")
               l.append('\n')
            }
         }
 
         if(l.isEmpty()){
-            l.append("""          <li><div style="padding: 0.5rem; color: #666; font-style: italic;">이 디렉토리는 비어 있습니다.</div></li>""")
+            l.append("""          <li><div class="empty-state">이 디렉토리는 비어 있습니다.</div></li>""")
             l.append('\n')
         }