diff --git a/.jules/palette.md b/.jules/palette.md index 604d7810..a3e7ffa9 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -73,3 +73,7 @@ ## 2026-08-17 - 브라우저 번역과 화면 판독기의 호환성을 위한 텍스트 처리 **Learning:** `aria-label` 속성으로 지정된 화면 판독기용 대체 텍스트는 Chrome Translate 등 브라우저 번역 도구에 의해 번역되지 않는 경우가 많습니다. 이로 인해 문서 언어가 변환되어도 스크린 리더에서는 원본 언어(예: 영어)로 읽혀 다국어 접근성이 저하됩니다. **Action:** 화면 판독기를 위한 숨겨진 설명 텍스트를 제공할 때 `aria-label` 대신 CSS `.visually-hidden` 클래스를 적용한 `` 요소를 사용하여, 브라우저가 일반 텍스트로 인식하고 번역할 수 있도록 하여 다국어 접근성 호환성을 확보하십시오. + +## 2024-10-01 - 시각적으로 숨겨진 텍스트(Visually Hidden Text)의 호버(Hover) 스타일 분리 +**Learning:** `span:last-child`와 같은 범용 구조적 선택자를 사용하여 호버 및 포커스 시 밑줄(Underline)을 적용하면, 마지막 자식이 화면 판독기를 위해 시각적으로 숨겨진(`.visually-hidden`) 텍스트인 경우 밑줄이 실제 표시되는 파일 이름이 아닌 숨겨진 요소에 적용되어 시각적 피드백이 나타나지 않는 UX 결함이 발생합니다. +**Action:** 호버, 포커스 및 활성 상태의 시각적 스타일링(밑줄 등)을 적용할 때는 범용 구조적 선택자 대신 실제 콘텐츠 요소에 구체적인 클래스(예: `.entry-name`)를 지정하여 숨겨진 텍스트로 시각적 스타일이 누출되는 것을 방지하십시오. diff --git a/CHANGELOG.md b/CHANGELOG.md index c442b3b1..974e8e2a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ All notable changes to this project are documented in this file. protection. ### Changed +- 🎨 Palette: 파일 이름 호버/포커스 시 밑줄이 시각적으로 숨겨진 텍스트에 적용되는 문제를 수정하기 위해 `span:last-child` 대신 `.entry-name` 클래스를 사용하도록 개선했습니다. - Improve generated directory-index readability with adjacent-row separators, explicit light and dark empty-state text colors, and text-only hover/focus diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt index 0972fa2c..114d3037 100644 --- a/src/main/kotlin/html4tree/main.kt +++ b/src/main/kotlin/html4tree/main.kt @@ -56,7 +56,7 @@ a:hover, a:focus-visible { outline: 2px solid #0969da; outline-offset: -2px; } -a:hover span:last-child, a:focus-visible span:last-child { +a:hover .entry-name, a:focus-visible .entry-name { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { @@ -460,7 +460,7 @@ fun process_dir(curr_dir: File, excludeSet: Set? = null, dirFiles: Array val ariaLabel = "${fileName} ${if (isLinkedDirectory) { "디렉토리" } else { "파일" }}".escapeHtml() val typeLabel = if (isLinkedDirectory) { "디렉토리" } else { "파일" } val icon = if (isLinkedDirectory) { "📁" } else { "📄" } - l.append("""
  • ${fileName.escapeHtml()} ${typeLabel}
  • """) + l.append("""
  • ${fileName.escapeHtml()} ${typeLabel}
  • """) l.append('\n') } } diff --git a/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt b/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt index 5897ce6d..157d941f 100644 --- a/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt +++ b/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt @@ -147,7 +147,7 @@ class GeneratedIndexReadabilityTest { assertTrue( style.contains( """ - a:hover span:last-child, a:focus-visible span:last-child { + a:hover .entry-name, a:focus-visible .entry-name { text-decoration: underline; } """.trimIndent()