improve(a11y): strengthen site accessibility baseline

[koutyuke]

Summary

site の accessibility baseline を改善しました。theme selection の選択状態、hero の scroll link、低コントラスト気味だった補助テキストを調整しています。

Background

keyboard、screen reader、低視力環境でも personal portfolio site を扱いやすくするため、基本的な a11y の土台を整える必要があります。

Change Details

• theme panel の各 option に aria-pressed を付与し、現在選択中の theme を assistive technology に伝えるようにした
• selected state の check icon を装飾として扱い、accessible name に不要な情報が混ざらないようにした
• floating navigation の focus-visible style で outline を消さず、focus indicator を維持するようにした
• hero の scroll link の accessible name に visible text を含め、name/label の不一致を解消した
• section/contact の補助テキストを text-slate-11 に上げ、contrast を改善した
• theme selection と hero scroll link の a11y regression test を追加した

Related Issue

• closes a11y: improve site accessibility baseline #10

Impact Area

• Hero section
• Contact section
• Floating navigation / theme panel
• Accessibility semantics and focus visibility

Testing

• ./node_modules/.bin/vp check
• ./node_modules/.bin/vp test

Notes

• global PATH 上の vp は見つからなかったため、repository 内の node_modules/.bin/vp を直接実行しました。

[cloudflare-workers-and-pages]

Deploying koutyuke-dev with    Cloudflare Pages

Latest commit:	23e0ec7
Status:	✅  Deploy successful!
Preview URL:	https://67127a36.koutyuke-dev.pages.dev
Branch Preview URL:	https://10-a11y-improve-site-accessi.koutyuke-dev.pages.dev

View logs

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ba60cc6a-f7ba-4ad8-9ec8-7114850ed46f

📥 Commits

Reviewing files that changed from the base of the PR and between 16440e1 and 23e0ec7.

📒 Files selected for processing (7)

• src/shared/ui/section-heading/section-heading.tsx
• src/widgets/contact/ui/contact-section.ui.tsx
• src/widgets/floating-navigation/ui/floating-navigation.test.tsx
• src/widgets/floating-navigation/ui/panels/parts.tsx
• src/widgets/floating-navigation/ui/panels/theme-panel.ui.tsx
• src/widgets/hero/ui/hero-section.test.tsx
• src/widgets/hero/ui/hero-section.ui.tsx

---

📝 Walkthrough

Walkthrough

This PR improves site accessibility by adding aria-pressed state tracking to the theme selector, updating aria-labels to lowercase for consistency, removing focus outline suppression to ensure visible keyboard focus indicators, and refining text color contrast tokens across multiple components. Six files are modified with seven distinct changes targeting keyboard navigation, screen reader compatibility, and visual contrast.

Changes

Accessibility and Visual Refinements

Layer / File(s)	Summary
Accessibility Attributes src/widgets/floating-navigation/ui/panels/theme-panel.ui.tsx, src/widgets/hero/ui/hero-section.ui.tsx	ThemePanelUI buttons expose selection via aria-pressed matching active theme. HeroSectionUI scroll-down anchor aria-label changed to lowercase "scroll down to about section". Selected checkmark icon marked aria-hidden="true" and focusable="false".
Focus Styling src/widgets/floating-navigation/ui/panels/parts.tsx	PanelItem and PanelFooterAction className compositions remove focus-visible:outline-none while preserving focus-visible:bg-slate-4 background styling for keyboard navigation visibility.
Visual Styling src/shared/ui/section-heading/section-heading.tsx, src/widgets/contact/ui/contact-section.ui.tsx	Tailwind text color utilities updated from text-slate-10 to text-slate-11 in SectionHeading eyebrow and two ContactSectionUI text elements to improve contrast.
Tests src/widgets/floating-navigation/ui/floating-navigation.test.tsx, src/widgets/hero/ui/hero-section.test.tsx	New test verifies theme toggle buttons expose correct aria-pressed state transitions. New test verifies hero scroll-down link renders with accessible name "scroll down to about section".

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• koutyuke/koutyuke.dev#19: Refactored component structure and exports in the same UI component files (SectionHeading, ContactSectionUI, ThemePanelUI, FloatingNavigation) that this PR updates with accessibility and styling improvements.

Poem

🐰 A keyboard hop through focus rings bright,
aria-pressed guides dark and light,
Contrast improved, screen readers cheer,
Accessibility blooms loud and clear! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main purpose of the PR: improving the site's accessibility baseline.
Description check	✅ Passed	The description follows the required template structure with all sections completed: Summary, Background, Change Details, Related Issue, Impact Area, Testing, and Notes.
Linked Issues check	✅ Passed	All code changes align with issue #10 requirements: aria-pressed for theme selection, accessible names for links, focus visibility improvements, contrast enhancements, and regression tests added.
Out of Scope Changes check	✅ Passed	All changes are directly related to accessibility improvements specified in issue #10; no unrelated or out-of-scope modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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 10-a11y/improve-site-accessibility-baseline

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

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 and usage tips.}

[github-actions]

🗼 Lighthouse Preview Report 🗼

Latest Commit:	23e0ec7
Status:	✅ Successful!
Target URL:	https://67127a36.koutyuke-dev.pages.dev

Analyze Report

Category	Score
Performance	95
Accessibility	100
Best Practices	100
SEO	66

Metric	Value
First Contentful Paint	1.8 s
Largest Contentful Paint	1.8 s
Total Blocking Time	220 ms
Cumulative Layout Shift	0.035
Speed Index	1.8 s

Detailed Report

Report Artifact
Workflow Run