From b6907d0ef73d62031a1a9c278947755679d09110 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sun, 5 Jul 2026 20:58:05 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=A7=81?=
 =?UTF-8?q?=ED=81=AC=20=ED=98=B8=EB=B2=84=20=EB=B0=8F=20=ED=8F=AC=EC=BB=A4?=
 =?UTF-8?q?=EC=8A=A4=20=EC=83=81=ED=83=9C=EC=97=90=20=EC=A0=91=EA=B7=BC?=
 =?UTF-8?q?=EC=84=B1=20=EC=9E=88=EB=8A=94=20CSS=20=ED=8A=B8=EB=9E=9C?=
 =?UTF-8?q?=EC=A7=80=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 생성되는 HTML의 링크(`a` 태그)에 `background-color`와 `outline-color` 속성에 대한 부드러운 트랜지션 추가
- 접근성을 고려하여 `@media (prefers-reduced-motion: reduce)` 설정을 통해 모션에 민감한 사용자의 경우 트랜지션 비활성화
- `MainTest.kt` 테스트에 해당 CSS 코드 생성을 검증하는 구문 추가 및 통과 확인
- `.jules/palette.md`에 관련된 학습 내용 추가
---
 .jules/palette.md                     | 4 ++++
 src/main/kotlin/html4tree/main.kt     | 7 +++++++
 src/test/kotlin/html4tree/MainTest.kt | 2 ++
 3 files changed, 13 insertions(+)

diff --git a/.jules/palette.md b/.jules/palette.md
index b8df5bd..d57ef9a 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.
+
+## 2026-07-05 - Enhance Interactive Links with Accessible Animations
+**Learning:** Adding transitions (like `transition: all`) can create unintended or janky animations across properties that shouldn't animate, reducing performance and causing motion discomfort for some users.
+**Action:** When adding hover/focus transitions, explicitly list the properties to be transitioned (e.g. `transition: background-color 0.2s ease, outline-color 0.2s ease;`), and always wrap an override for users sensitive to motion by including a `@media (prefers-reduced-motion: reduce) { transition: none; }` block.
diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt
index 2e2809f..81fb690 100644
--- a/src/main/kotlin/html4tree/main.kt
+++ b/src/main/kotlin/html4tree/main.kt
@@ -143,6 +143,8 @@ fun process_dir(curr_dir: File){
                 text-decoration: none;
                 color: #0366d6;
                 border-radius: 4px;
+                outline: 2px solid transparent;
+                transition: background-color 0.2s ease, outline-color 0.2s ease;
               }
               a:hover, a:focus-visible {
                 background-color: #f6f8fa;
@@ -150,6 +152,11 @@ fun process_dir(curr_dir: File){
                 outline: 2px solid #0366d6;
                 outline-offset: -2px;
               }
+              @media (prefers-reduced-motion: reduce) {
+                a {
+                  transition: none;
+                }
+              }
               </style>
               """
 
diff --git a/src/test/kotlin/html4tree/MainTest.kt b/src/test/kotlin/html4tree/MainTest.kt
index e8a3082..cc6a934 100644
--- a/src/test/kotlin/html4tree/MainTest.kt
+++ b/src/test/kotlin/html4tree/MainTest.kt
@@ -160,6 +160,8 @@ class MainTest {
         assertFalse(htmlContent.contains("test.ignore"))
         assertTrue(htmlContent.contains("Content-Security-Policy"))
         assertTrue(htmlContent.contains("default-src 'none'; style-src 'unsafe-inline';"))
+        assertTrue(htmlContent.contains("transition: background-color 0.2s ease, outline-color 0.2s ease;"))
+        assertTrue(htmlContent.contains("@media (prefers-reduced-motion: reduce)"))
     }
 
     @Test

From fbfc75c70913103dcabe8dc83a75647834a2ef58 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Mon, 6 Jul 2026 05:24:47 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=A7=81?=
 =?UTF-8?q?=ED=81=AC=20=ED=98=B8=EB=B2=84=20=EB=B0=8F=20=ED=8F=AC=EC=BB=A4?=
 =?UTF-8?q?=EC=8A=A4=20=EC=83=81=ED=83=9C=EC=97=90=20=EC=A0=91=EA=B7=BC?=
 =?UTF-8?q?=EC=84=B1=20=EC=9E=88=EB=8A=94=20CSS=20=ED=8A=B8=EB=9E=9C?=
 =?UTF-8?q?=EC=A7=80=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 생성되는 HTML의 링크(`a` 태그)에 `background-color`와 `outline-color` 속성에 대한 부드러운 트랜지션 추가
- 기본 상태에서 테두리가 없을 때 나타나는 끊김(jump) 현상을 방지하기 위해 `outline: 2px solid transparent;` 추가
- 접근성을 고려하여 `@media (prefers-reduced-motion: reduce)` 설정을 통해 모션에 민감한 사용자의 경우 트랜지션 비활성화
- `MainTest.kt` 테스트에 해당 CSS 코드 생성을 검증하는 구문 추가 및 통과 확인
- `.jules/palette.md`에 관련된 학습 내용 추가