🎨 Palette: 생성된 HTML 링크에 CSS 트랜지션 및 접근성 미디어 쿼리 추가

.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-03 - Smooth Micro-Interactions in Generated HTML
+**Learning:** Adding CSS transitions to interactive elements (like anchor tags) in raw generated HTML enhances the perceived quality and smoothness of the interface. However, using `transition: all` is inefficient, and not accommodating users who prefer reduced motion is an accessibility violation.
+**Action:** When adding transitions, specify the exact properties (e.g., `background-color`, `outline-color`) and always include a `@media (prefers-reduced-motion: reduce)` block to disable transitions (`transition: none`) for users who have requested it at the OS level.

src/main/kotlin/html4tree/main.kt

@@ -143,13 +143,19 @@ fun process_dir(curr_dir: File){
                 text-decoration: none;
                 color: #0366d6;
                 border-radius: 4px;
+                transition: background-color 0.2s ease, outline-color 0.2s ease;
               }
               a:hover, a:focus-visible {
                 background-color: #f6f8fa;
                 text-decoration: underline;
                 outline: 2px solid #0366d6;
                 outline-offset: -2px;
               }
+              @media (prefers-reduced-motion: reduce) {
+                a {
+                  transition: none;
+                }
+              }
               </style>
               """
 

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