From d774189279156c4a1d6dda2b208527760ecc6d45 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Tue, 11 Aug 2026 20:50:53 +0000 Subject: [PATCH 1/3] =?UTF-8?q?UX:=20=ED=84=B0=EC=B9=98=20=ED=83=80?= =?UTF-8?q?=EA=B2=9F=20=ED=81=AC=EA=B8=B0=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?= =?UTF-8?q?=EA=B0=9C=EC=84=A0=EC=9D=84=20=EC=9C=84=ED=95=9C=20=ED=8C=A8?= =?UTF-8?q?=EB=94=A9=20=EC=A6=9D=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 모바일 기기에서의 사용성을 고려하여 상호작용 요소(`a`) 및 빈 디렉토리 메시지(`.empty-dir`)의 상하 패딩을 `0.5rem`에서 `0.75rem`으로 증가. - 모바일 접근성 가이드라인(터치 타겟 최소 44-48px 확보)을 충족. - 관련 테스트의 하드코딩된 예상 CSS 값 업데이트. - `.jules/palette.md`에 접근성 개선에 관한 학습 내용 기록 추가. --- .jules/palette.md | 4 ++++ src/main/kotlin/html4tree/main.kt | 4 ++-- src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/.jules/palette.md b/.jules/palette.md index f1141fde..c4730127 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -56,3 +56,7 @@ ## 2024-08-08 - 빈 디렉토리 아이콘 메타포 통일 **학습:** 빈 디렉토리를 나타낼 때 정보 아이콘(ℹ)을 사용하면 일반 디렉토리(폴더 아이콘)와의 시각적 연관성이 떨어져 사용자가 직관적으로 디렉토리임을 인지하기 어렵습니다. 열린 폴더 아이콘(📂)을 사용하면 디렉토리가 열려 있지만 내용물이 없다는 메타포를 시각적으로 명확히 전달할 수 있습니다. **조치:** 빈 디렉토리 상태 메시지의 아이콘을 정보 아이콘에서 열린 폴더 아이콘(`📂`)으로 교체하여 시각적 메타포의 일관성을 유지하고 직관성을 높이십시오. + +## 2024-05-30 - 모바일 터치 타겟 크기 접근성 향상 +**학습:** 디렉토리 링크(`a` 태그)와 빈 상태 컨테이너(`.empty-dir`)의 기본 세로 패딩(0.5rem)은 모바일 환경에서 탭하기에 너무 작아 접근성 표준(터치 타겟 높이 최소 44-48px)을 충족하지 못하는 문제가 발생할 수 있습니다. +**조치:** 상호작용이 가능한 요소(`a`) 및 리스트 구조를 유지하는 요소(`.empty-dir`)의 상하 패딩을 `0.75rem`으로 증가시켜(예: `padding: 0.75rem 0.5rem;`) 충분한 터치 타겟 크기를 확보하고 모바일 접근성을 개선하십시오. diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt index 7700e4cb..28821460 100644 --- a/src/main/kotlin/html4tree/main.kt +++ b/src/main/kotlin/html4tree/main.kt @@ -45,7 +45,7 @@ a.dir-link { text-align: center; } a { - padding: 0.5rem; + padding: 0.75rem 0.5rem; text-decoration: none; color: #0969da; border-radius: 4px; @@ -71,7 +71,7 @@ li + li { display: flex; align-items: flex-start; gap: 0.5rem; - padding: 0.5rem; + padding: 0.75rem 0.5rem; color: #656d76; font-style: italic; } diff --git a/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt b/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt index 9658fb28..4a589546 100644 --- a/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt +++ b/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt @@ -96,7 +96,7 @@ class GeneratedIndexReadabilityTest { display: flex; align-items: flex-start; gap: 0.5rem; - padding: 0.5rem; + padding: 0.75rem 0.5rem; color: #656d76; font-style: italic; } From c8e8a73cfe166454bf9147fab031737f8bf0ebaf Mon Sep 17 00:00:00 2001 From: Seongho Bae Date: Wed, 12 Aug 2026 07:08:36 +0900 Subject: [PATCH 2/3] test: lock generated link touch-target padding --- .../html4tree/GeneratedIndexReadabilityTest.kt | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt b/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt index 4a589546..0dfc2017 100644 --- a/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt +++ b/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt @@ -85,6 +85,22 @@ class GeneratedIndexReadabilityTest { assertFalse(style.contains("li:last-child")) } + @Test + fun linkRowsRetainMobileTouchTargetPadding() { + process_dir(temporaryDirectory, setOf("index.html"), emptyArray()) + + val style = emittedStyle() + assertTrue( + style.contains( + """ + a { + padding: 0.75rem 0.5rem; + text-decoration: none; + """.trimIndent() + ) + ) + } + @Test fun emptyStateUsesExplicitLightAndDarkForegroundColors() { process_dir(temporaryDirectory, setOf("index.html"), emptyArray()) From 87b4eb8eaa1da15f9ffdcd5425a049224a18fa9a Mon Sep 17 00:00:00 2001 From: Seongho Bae Date: Wed, 12 Aug 2026 08:54:10 +0900 Subject: [PATCH 3/3] test(a11y): exercise generated touch target row --- src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt b/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt index 0dfc2017..54f01457 100644 --- a/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt +++ b/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt @@ -87,8 +87,10 @@ class GeneratedIndexReadabilityTest { @Test fun linkRowsRetainMobileTouchTargetPadding() { - process_dir(temporaryDirectory, setOf("index.html"), emptyArray()) + val linkedFile = File(temporaryDirectory, "touch-target.txt").apply { writeText("target") } + process_dir(temporaryDirectory, setOf("index.html"), arrayOf(linkedFile)) + assertTrue(generatedHtml().contains("