From 630ea279e3b5bf1807894c5d4a82982fadd5a248 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Mon, 13 Jul 2026 20:59:52 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B9=88=20=EB=94=94?= =?UTF-8?q?=EB=A0=89=ED=86=A0=EB=A6=AC=20UI/UX=20=EB=B0=8F=20=EC=A0=91?= =?UTF-8?q?=EA=B7=BC=EC=84=B1=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 빈 디렉토리 텍스트 요소에 `role="status"` 속성을 부여하여 스크린 리더 접근성 향상 - 빈 디렉토리 항목 좌측에 정보 아이콘(ℹ)을 추가하여 기존 파일/디렉토리 리스트 아이템들과 시각적 흐름 통일 - `empty-dir` 클래스에 Flexbox 속성을 추가하여 아이콘과 텍스트의 정렬 일치 --- .jules/palette.md | 3 +++ src/main/kotlin/html4tree/main.kt | 5 ++++- src/test/kotlin/html4tree/MainTest.kt | 1 + 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/.jules/palette.md b/.jules/palette.md index 721d945..993ce78 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -44,3 +44,6 @@ ## 2026-07-13 - Add title attributes for parity with aria-labels **Learning:** Relying solely on icons or technical symbols (like `..`) without native tooltips can confuse sighted users who don't use screen readers. `title` attributes matching `aria-label` provide parity. **Action:** Add `title` attributes to icon-only links to ensure visual tooltips match screen reader text. +## 2024-07-13 - 빈 디렉토리 상태의 접근성(Accessibility) 개선 +**Learning:** 정적 파일 서버의 빈 디렉토리 상태는 스크린 리더 사용자에게 컨텐츠 누락으로 오해받을 수 있으며, 시각적으로도 일반 리스트 아이템과 정렬이 맞지 않는 문제가 있었습니다. +**Action:** 빈 상태를 나타내는 요소에 `role="status"`를 추가하여 스크린 리더가 명확하게 인지할 수 있도록 하고, 아이콘과 flex 레이아웃을 통해 다른 리스트 아이템과 일관된 시각적 흐름을 제공하도록 합니다. diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt index c606e58..6a969a5 100644 --- a/src/main/kotlin/html4tree/main.kt +++ b/src/main/kotlin/html4tree/main.kt @@ -312,6 +312,9 @@ fun process_dir(curr_dir: File, excludeSet: Set? = null, dirFiles: Array } } .empty-dir { + display: flex; + align-items: flex-start; + gap: 0.5rem; padding: 0.5rem; opacity: 0.7; font-style: italic; @@ -362,7 +365,7 @@ fun process_dir(curr_dir: File, excludeSet: Set? = null, dirFiles: Array } 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 a4d2ba5..66eca13 100644 --- a/src/test/kotlin/html4tree/MainTest.kt +++ b/src/test/kotlin/html4tree/MainTest.kt @@ -94,6 +94,7 @@ class MainTest { val htmlContent = indexFile.readText() assertTrue(htmlContent.contains("")) assertTrue(htmlContent.contains("이 디렉토리는 비어 있습니다.")) + assertTrue(htmlContent.contains("role=\"status\"")) assertTrue(htmlContent.contains("role=\"list\"")) }