🎨 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-05-19 - [Accessible CSS Transitions]
+**Learning:** Adding CSS transitions to hover/focus states significantly improves micro-UX by preventing abrupt visual changes. However, when generating static HTML with inline CSS blocks, these transitions must be explicitly paired with a `@media (prefers-reduced-motion: reduce)` override to ensure compliance with accessibility standards for users sensitive to motion.
+**Action:** Always include a `prefers-reduced-motion` override when introducing CSS transitions for hover or focus states in generated UI components.

src/test/kotlin/html4tree/MainTest.kt

@@ -161,6 +161,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"))
+        assertTrue(htmlContent.contains("prefers-reduced-motion"))
     }
 
     @Test