🎨 Palette: [UX improvement] 디렉토리 목록 네비게이션 라벨 접근성 개선

[seonghobae]

💡 What: aria-label 대신 .visually-hidden 클래스가 적용된 숨김 텍스트와 aria-labelledby를 사용하여 네비게이션 라벨을 개선하고, 숨김 텍스트 추가로 인해 깨질 수 있는 CSS :last-child 선택자를 :nth-child(2)로 수정했습니다.
🎯 Why: 브라우저 번역 도구가 aria-label 속성을 번역하지 못해 스크린 리더 환경에서 번역되지 않은 라벨이 읽히는 접근성 문제를 해결하기 위함입니다.
📸 Before/After:

• Before: <nav aria-label="디렉토리 목록"> 및 span:last-child CSS 규칙
• After: <nav aria-labelledby="nav-label">\n<span id="nav-label" class="visually-hidden">디렉토리 목록</span> 및 span:nth-child(2) CSS 규칙
  ♿ Accessibility: 스크린 리더 사용자가 페이지 번역 시 네비게이션 라벨도 모국어로 정확히 안내받을 수 있게 되어 다국어 접근성이 크게 향상되었습니다.

---

PR created automatically by Jules for task 4489784047601234240 started by @seonghobae

---

Summary by CodeRabbit

• 접근성 개선

  • 디렉터리 탐색 내비게이션에 숨김 텍스트 기반 라벨을 적용해 보조 기술의 이해도를 높였습니다.
  • 구조가 변경되어도 내비게이션 라벨과 스타일이 안정적으로 유지되도록 개선했습니다.

• 사용자 경험 개선

  • 디렉터리 목록 링크의 마우스 오버 및 키보드 포커스 시 밑줄 표시가 올바르게 적용됩니다.

• 테스트

  • 내비게이션 접근성 라벨과 링크 포커스 스타일 검증을 업데이트했습니다.

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 446edd4f-1bf0-4225-869f-cebb11ec5824

📥 Commits

Reviewing files that changed from the base of the PR and between de82f99 and 969c35a.

📒 Files selected for processing (4)

• .jules/palette.md
• src/main/kotlin/html4tree/main.kt
• src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt
• src/test/kotlin/html4tree/MainTest.kt

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

디렉터리 내비게이션은 숨김 <span>을 참조하는 aria-labelledby를 사용합니다. 링크 스타일 선택자는 span:nth-child(2)를 대상으로 변경되었습니다. 관련 지침과 테스트도 갱신되었습니다.

Changes

디렉터리 내비게이션 개선

Layer / File(s)	Summary
숨김 라벨 기반 내비게이션 .jules/palette.md, src/main/kotlin/html4tree/main.kt, src/test/kotlin/html4tree/MainTest.kt	생성되는 <nav>가 aria-labelledby="nav-label"과 숨김 라벨 <span>을 사용합니다. 접근성 검증 테스트와 구현 지침이 새 구조를 확인합니다.
링크 스타일 선택자 갱신 src/main/kotlin/html4tree/main.kt, src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt	호버 및 키보드 포커스 밑줄 대상이 span:last-child에서 span:nth-child(2)로 변경되었습니다. 관련 테스트도 같은 선택자를 확인합니다.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk:⚪ Minimal · up to 969c3

This PR updates navigation labeling for better translated screen-reader output and adjusts the related CSS selector, with accompanying test updates. No actionable merge-blocking risk remains beyond normal checks and review.

Suggested reviewers:copilot

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목은 디렉토리 목록 내비게이션 라벨의 접근성 개선이라는 주요 변경 사항을 명확하고 구체적으로 설명합니다.
Docstring Coverage	✅ Passed	Docstring check was indeterminate for this PR — some files could not be analyzed in time. Not blocking.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch palette-a11y-nav-label-4489784047601234240

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[devin-ai-integration]

Devin Review found 2 potential issues.

[devin-ai-integration]

📝 Info: Hidden label span may be announced twice

The nav's accessible name comes from a .visually-hidden span referenced by aria-labelledby. The span is clipped, not display:none, so some screen readers announce its text both as the nav label and as in-flow content, reading "디렉토리 목록" twice.

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

📝 Info: Selector change fixes latent underline

The old span:last-child targeted the trailing .visually-hidden type-label span, so the hover/focus underline was never visible. span:nth-child(2) targets the visible name span (consistently the 2nd child in both the .. row and file/dir rows), so underline now applies to link text.

---

Was this helpful? React with 👍 or 👎 to provide feedback.