diff --git a/.jules/palette.md b/.jules/palette.md index 604d7810..a2f95d7c 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -73,3 +73,6 @@ ## 2026-08-17 - 브라우저 번역과 화면 판독기의 호환성을 위한 텍스트 처리 **Learning:** `aria-label` 속성으로 지정된 화면 판독기용 대체 텍스트는 Chrome Translate 등 브라우저 번역 도구에 의해 번역되지 않는 경우가 많습니다. 이로 인해 문서 언어가 변환되어도 스크린 리더에서는 원본 언어(예: 영어)로 읽혀 다국어 접근성이 저하됩니다. **Action:** 화면 판독기를 위한 숨겨진 설명 텍스트를 제공할 때 `aria-label` 대신 CSS `.visually-hidden` 클래스를 적용한 `` 요소를 사용하여, 브라우저가 일반 텍스트로 인식하고 번역할 수 있도록 하여 다국어 접근성 호환성을 확보하십시오. +## 2024-09-25 - Target specific classes instead of generic child selectors +**Learning:** Using generic structural selectors like `span:last-child` can cause visual styling (like underlines) to leak onto `.visually-hidden` screen-reader text, while failing to apply to the intended visible text. +**Action:** Always target specific content classes (e.g., `.entry-name`) for hover, focus, and active states in interactive elements to ensure visual correctness without breaking accessibility. diff --git a/CHANGELOG.md b/CHANGELOG.md index c442b3b1..5c2b5b40 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,9 @@ All notable changes to this project are documented in this file. ## [Unreleased] +### UX Improvements 🎨 +- 파일 및 디렉토리 링크에 마우스 호버 및 키보드 포커스 시, 시각적으로 숨겨진 스크린 리더 텍스트 대신 실제 파일 이름에 밑줄이 표시되도록 접근성 및 시각적 피드백을 개선했습니다. + ### Added - Emit a `noindex, nofollow` robots meta preference on every generated diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt index 0972fa2c..91e1c503 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) { @@ -429,7 +429,7 @@ fun process_dir(curr_dir: File, excludeSet: Set? = null, dirFiles: Array

${directoryName.escapeHtml()}