From 722703f60963b223e73340e6dab2e46cbdac913b Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Tue, 7 Jul 2026 20:55:43 +0000 Subject: [PATCH 1/3] =?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=EB=B6=80=EB=93=9C?= =?UTF-8?q?=EB=9F=AC=EC=9A=B4=20CSS=20=EC=A0=84=ED=99=98=20=ED=9A=A8?= =?UTF-8?q?=EA=B3=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - `index.html`에 생성되는 링크(`a` 태그)의 호버(hover) 및 포커스(focus) 상태에 CSS 전환(transition) 효과 추가. - 시각적 안정성을 위해 전환 속도를 0.2초로 설정. - 접근성을 고려하여 `@media (prefers-reduced-motion: reduce)` 쿼리를 추가해, 움직임에 민감한 사용자의 경우 전환 효과가 비활성화되도록 보완. - 해당 CSS 출력이 테스트 파일(`MainTest.kt`)의 Assert 문에 정상적으로 확인되도록 테스트 추가 및 Jacoco 100% 분기/명령 커버리지 유지. - `.Jules/palette.md`에 관련된 UX 학습 내용 기록. --- .Jules/palette.md | 4 ++++ src/main/kotlin/html4tree/main.kt | 6 ++++++ src/test/kotlin/html4tree/MainTest.kt | 2 ++ 3 files changed, 12 insertions(+) create mode 100644 .Jules/palette.md diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..473b10a --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,4 @@ + +## 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. diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt index 1710d99..346b0c5 100644 --- a/src/main/kotlin/html4tree/main.kt +++ b/src/main/kotlin/html4tree/main.kt @@ -166,6 +166,7 @@ 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; @@ -173,6 +174,11 @@ fun process_dir(curr_dir: File){ outline: 2px solid #0366d6; outline-offset: -2px; } + @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 a3f8c76..beffe33 100644 --- a/src/test/kotlin/html4tree/MainTest.kt +++ b/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 From 150cec5f19293b4a1f2c5300f13cc179cb4a5a38 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Wed, 8 Jul 2026 09:16:15 +0000 Subject: [PATCH 2/3] =?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=EB=B6=80=EB=93=9C?= =?UTF-8?q?=EB=9F=AC=EC=9A=B4=20CSS=20=EC=A0=84=ED=99=98=20=ED=9A=A8?= =?UTF-8?q?=EA=B3=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - `index.html`에 생성되는 링크(`a` 태그)의 호버(hover) 및 포커스(focus) 상태에 CSS 전환(transition) 효과 추가. - 시각적 안정성을 위해 전환 속도를 0.2초로 설정. - 접근성을 고려하여 `@media (prefers-reduced-motion: reduce)` 쿼리를 추가해, 움직임에 민감한 사용자의 경우 전환 효과가 비활성화되도록 보완. - 해당 CSS 출력이 테스트 파일(`MainTest.kt`)의 Assert 문에 정상적으로 확인되도록 테스트 추가 및 Jacoco 100% 분기/명령 커버리지 유지. - `.Jules/palette.md`에 관련된 UX 학습 내용 기록. From 957daca31ead77b5ff044f885439750a0225569b Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Thu, 9 Jul 2026 06:44:49 +0000 Subject: [PATCH 3/3] =?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=EB=B6=80=EB=93=9C?= =?UTF-8?q?=EB=9F=AC=EC=9A=B4=20CSS=20=EC=A0=84=ED=99=98=20=ED=9A=A8?= =?UTF-8?q?=EA=B3=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - `index.html`에 생성되는 링크(`a` 태그)의 호버(hover) 및 포커스(focus) 상태에 CSS 전환(transition) 효과 추가. - 시각적 안정성을 위해 전환 속도를 0.2초로 설정. - 접근성을 고려하여 `@media (prefers-reduced-motion: reduce)` 쿼리를 추가해, 움직임에 민감한 사용자의 경우 전환 효과가 비활성화되도록 보완. - 해당 CSS 출력이 테스트 파일(`MainTest.kt`)의 Assert 문에 정상적으로 확인되도록 테스트 추가 및 Jacoco 100% 분기/명령 커버리지 유지. - `.jules/palette.md`에 관련된 UX 학습 내용 기록. --- .Jules/palette.md | 4 ---- .jules/palette.md | 4 ++++ 2 files changed, 4 insertions(+), 4 deletions(-) delete mode 100644 .Jules/palette.md diff --git a/.Jules/palette.md b/.Jules/palette.md deleted file mode 100644 index 473b10a..0000000 --- a/.Jules/palette.md +++ /dev/null @@ -1,4 +0,0 @@ - -## 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. diff --git a/.jules/palette.md b/.jules/palette.md index b8df5bd..2f8dc29 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 `