From 3148b4509ecd56d86f349f364b0c6013787bce71 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Wed, 23 Sep 2026 20:59:12 +0000 Subject: [PATCH 1/7] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=8B=9C?= =?UTF-8?q?=EA=B0=81=EC=A0=81=20Hover=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?= =?UTF-8?q?=EB=B3=B5=EC=9B=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit πŸ’‘ What: 디렉토리 λͺ©λ‘μ—μ„œ 접근성을 μœ„ν•΄ μΆ”κ°€λœ `.visually-hidden` 클래슀 μš”μ†Œλ“€λ‘œ 인해 `a:hover span:last-child` CSS μ„ νƒμžκ°€ κΉ¨μ Έ Hoverμ‹œ λ‚˜νƒ€λ‚˜λŠ” ν…μŠ€νŠΈ 밑쀄이 사라진 문제λ₯Ό μˆ˜μ •ν–ˆμŠ΅λ‹ˆλ‹€. λŒ€μ‹  `.entry-label` μ΄λΌλŠ” 의미둠적 클래슀λ₯Ό λ„μž…ν•˜μ—¬ ν•΄λ‹Ή 문제λ₯Ό ν•΄κ²°ν–ˆμŠ΅λ‹ˆλ‹€. 🎯 Why: ν™”λ©΄ 낭독기λ₯Ό μœ„ν•œ 보이지 μ•ŠλŠ” μš”μ†Œκ°€ λ§ˆμ§€λ§‰ μžμ‹μœΌλ‘œ μΆ”κ°€λ˜λ©΄μ„œ CSS의 ꡬ쑰적 μ„ νƒμž(`:last-child`)κ°€ μ˜λ„ν•˜μ§€ μ•Šμ€ μš”μ†Œ(μˆ¨κ²¨μ§„ ν…μŠ€νŠΈ)λ₯Ό κ°€λ¦¬ν‚€κ²Œ λ˜μ–΄ 기쑴의 마우슀 μ˜€λ²„ μ‹œκ° νš¨κ³Όκ°€ 깨쑌기 λ•Œλ¬Έμž…λ‹ˆλ‹€. πŸ“Έ Before/After: Before: 링크에 마우슀λ₯Ό μ˜¬λ €λ„ ν…μŠ€νŠΈμ— 밑쀄이 생기지 μ•ŠμŒ. After: 링크에 마우슀λ₯Ό 올리면 μ˜¬λ°”λ₯΄κ²Œ ν…μŠ€νŠΈμ— 밑쀄 νš¨κ³Όκ°€ λ‚˜νƒ€λ‚¨. β™Ώ Accessibility: μ‹œκ°μ  Hover 효과λ₯Ό μ•ˆμ •μ μœΌλ‘œ λ³΅μ›ν•˜μ—¬, ν‚€λ³΄λ“œ μ‚¬μš©μž 및 마우슀 μ‚¬μš©μž λͺ¨λ‘μ—κ²Œ ν˜„μž¬ 포컀슀된 ν•­λͺ©μ΄ 무엇인지 λͺ…ν™•ν•œ ν”Όλ“œλ°±μ„ μ œκ³΅ν•©λ‹ˆλ‹€. μ΄λŠ” μ›Ή μ ‘κ·Όμ„± 지침 쀑 μ‹œκ°μ  포컀슀 이동 인지λ₯Ό ν–₯μƒμ‹œν‚΅λ‹ˆλ‹€. ꡬ쑰적 CSS μ„ νƒμžλ₯Ό 의미둠적 클래슀둜 λ³€κ²½ν•˜μ—¬ ν–₯ν›„ μ ‘κ·Όμ„± μš”μ†Œ μΆ”κ°€ μ‹œ λ Œλ”λ§μ΄ 깨지지 μ•Šλ„λ‘ κ²¬κ³ ν•˜κ²Œ λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€. --- .jules/palette.md | 3 +++ src/main/kotlin/html4tree/main.kt | 6 +++--- src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt | 4 ++-- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/.jules/palette.md b/.jules/palette.md index 604d7810..b20b58b0 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-05-24 - Restore visual hover feedback +**Learning:** Structural CSS pseudo-classes like `:last-child` easily break when accessibility elements like `.visually-hidden` are added to the end of a container, breaking visual styles like hover underlines. +**Action:** Use semantic classes (e.g., `.entry-label`) instead of structural pseudo-classes to reliably target visible elements for styling. diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt index 0972fa2c..3bfcbfe1 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-label, a:focus-visible .entry-label { 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()}