diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..59d992e --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2024-05-24 - [빈 상태(Empty State) UX 및 접근성 개선] +**Learning:** 빈 디렉토리 안내와 같이 파일 목록과 구조적으로 동일한 요소에 대해서도, 장식용 이모지 및 `aria-hidden="true"`를 사용하여 일관된 시각적 피드백(아이콘)을 제공하는 것이 사용자 인지 향상에 크게 기여합니다. 또한 flex 레이아웃을 통해 아이콘과 텍스트를 정렬하면, 다른 목록 항목과의 시각적 일관성을 유지할 수 있음을 확인했습니다. +**Action:** 향후 다른 빈 상태나 목록 요소들을 추가할 때도, 스크린 리더를 배려한 장식용 아이콘 배치와 flexbox를 활용한 정렬 패턴을 적극적으로 적용해야 합니다. diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt index b455862..0e223d1 100644 --- a/src/main/kotlin/html4tree/main.kt +++ b/src/main/kotlin/html4tree/main.kt @@ -307,6 +307,10 @@ fun process_dir(curr_dir: File, excludeSet: Set? = null, dirFiles: Array padding: 0.5rem; opacity: 0.7; font-style: italic; + display: flex; + align-items: flex-start; + gap: 0.5rem; + box-sizing: border-box; } """ @@ -370,7 +374,7 @@ ${cssContent} } if(l.isEmpty()){ - l.append("""
  • 이 디렉토리는 비어 있습니다.
    • """) + l.append("""
  • 이 디렉토리는 비어 있습니다.
    • """) l.append('\n') } diff --git a/src/test/kotlin/html4tree/MainTest.kt b/src/test/kotlin/html4tree/MainTest.kt index 1349471..b109958 100644 --- a/src/test/kotlin/html4tree/MainTest.kt +++ b/src/test/kotlin/html4tree/MainTest.kt @@ -94,6 +94,8 @@ class MainTest { val htmlContent = indexFile.readText() assertTrue(htmlContent.contains("")) assertTrue(htmlContent.contains("이 디렉토리는 비어 있습니다.")) + assertTrue(htmlContent.contains("📂")) + assertTrue(htmlContent.contains("aria-hidden=\"true\"")) assertTrue(htmlContent.contains("role=\"list\"")) } @@ -335,6 +337,8 @@ class MainTest { assertTrue(htmlContent.contains("a.dir-link")) assertTrue(htmlContent.contains("class=\"dir-link\"")) assertTrue(htmlContent.contains(".empty-dir")) + assertTrue(htmlContent.contains("display: flex;")) + assertTrue(htmlContent.contains("align-items: flex-start;")) assertTrue(htmlContent.contains("prefers-color-scheme: dark")) assertTrue(htmlContent.contains("font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;")) assertTrue(htmlContent.contains("line-height: 1.5;"))